Two-column post display on index with Bootstrap in WordPress

2 Views

Currently, I’m attempting to have a two-columned post display layout on my index page, but unfortunately, none of my tries seem to work. My idea is to have them shown like this:

Article one             Article two
Article three           Article four
Article five             Article six

Read More

Instead, however, they’re shown like this:

Article one

Article two
Article three

And so forth. In my content.php file, the following is the code I have: 

<?php
/**
 * @package dazzling
 */
?>

  <div class="row"> <div class="col-sm-12 col-md-6">
    <div class="thumbnail" style="padding: 0px;">
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
    <div class="caption"><header class="entry-header page-header">

        <h3><a href="<?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a> <small style="color: inherit;"><li class="glyphicon glyphicon-new-window"></li></small></h3>

        <?php if ( 'post' == get_post_type() ) : ?>
        <small class="entry-meta">
            <?php dazzling_posted_on(); ?><?php if ( ! post_password_required() && ( comments_open() || '0' != get_comments_number() ) ) : ?>
        <span class="comments-link"><li class="glyphicon glyphicon-comment"></li> <?php comments_popup_link( __( 'Leave a comment', 'dazzling' ), __( '1 Comment', 'dazzling' ), __( '% Comments', 'dazzling' ) ); ?></span>
        <?php endif; ?>

        <?php if ( 'post' == get_post_type() ) : // Hide category and tag text for pages on Search ?>
            <?php
                /* translators: used between list items, there is a space after the comma */
                $categories_list = get_the_category_list( __( ', ', 'dazzling' ) );
                if ( $categories_list && dazzling_categorized_blog() ) :
            ?>
            <span class="cat-links"><li class="glyphicon glyphicon-folder-open"></li>&nbsp; 
                <?php printf( __( ' %1$s', 'dazzling' ), $categories_list ); ?>
            </span>
            <?php endif; // End if categories ?>
        <?php endif; // End if 'post' == get_post_type() ?>

        <?php edit_post_link( __( 'Edit', 'dazzling' ), '<li class="glyphicon glyphicon-pencil"></li> <span class="edit-link">', '</span>' ); ?>

        </small><!-- .entry-meta -->
        <?php endif; ?>
    </header><!-- .entry-header -->

    <?php if ( is_search() ) : // Only display Excerpts for Search ?>

        <?php the_excerpt(); ?>
        <p><a class="btn btn-default read-more" href="<?php the_permalink(); ?>"><?php _e( 'Continue reading', 'dazzling' ); ?> <span class="glyphicon glyphicon-chevron-right"></span></a></p>
    </div><!-- .entry-summary -->
    <?php else : ?>

        <?php if ( has_post_thumbnail()) : ?>
        <a href="<?php the_permalink(); ?>" style="float: left; margin-right: 10px;" title="<?php the_title_attribute(); ?>">
            <?php the_post_thumbnail( 'medium', array( 'class' => 'img-thumbnail' )); ?>
        </a>
    <div class="caption">
            <?php the_excerpt(); ?>
        </div> 
        <?php else : ?>
            <?php the_excerpt(); ?>         
        <?php endif; ?>
        <p><a class="btn btn-default read-more" href="<?php the_permalink(); ?>"><?php _e( 'Continue reading', 'dazzling' ); ?> <span class="glyphicon glyphicon-chevron-right"></span></a></p>

        <a href="<?php the_permalink() ?>" title="<?php the_title_attribute(); ?>"></a> 


        <?php
            wp_link_pages( array( 
                'before'            => '<div class="page-links">'.__( 'Pages:', 'dazzling' ),
                'after'             => '</div>',
                'link_before'       => '<span>',
                'link_after'        => '</span>',
                'pagelink'          => '%',
                'echo'              => 1 
            ) );
        ?>
    </div><!-- .entry-content -->
    <?php endif; ?>

    <br>
</article></div></div></div>
<!-- #post-## -->

Could you all please explain if I’m doing anything wrong here? Thank you!

Post Views: 2

Related posts

Leave a Reply

1 comment

  1. The easiest solution would probably be a CSS approach. If you assign a class to each post that is printed on the page, you could then float half to the right, and half to the left. Here is an example:

    Sample HTML

    <div class="wrapper">
    <div class="post">Sample Post 1 Content</div>
    <div class="post">Sample Post 2 Content</div>
    <div class="post">Sample Post 3 Content</div>
    <div class="post">Sample Post 4 Content</div>
    <div class="post">Sample Post 5 Content</div>
    <div class="post">Sample Post 6 Content</div>
</div>

    Corresponding CSS

    .post:nth-child(odd) {
    float:left;
    width:50%;
}
.post:nth-child(even) {
    float: right;
    width:50%;
}

    Here is a demo where you can see this approach in action.