Dividing post content in 2 columns in WordPress using bootstrap grid system

1 Views

I’m trying to create a blog page where i want to divide the posts in two columns. The current setup I’m using is using categories for each column. The ‘category 1’ posts will be shown on the left column and ‘category 2’ posts on the right.

I currently have the following code where I divided both columns using the grid method provided by the bootstrap framework. Where I am stuck is that wordpress keeps showing a single column page as shown here: http://imgur.com/RLeZLVQ

Read More

Any ideas why this is happening? 

<div class="container">
<div class="row">
    <div class="span6">
    <?php query_posts('cat=1&showposts=10'); ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

     <!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. -->

     <small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>


     <!-- Display the Post's content in a div box. -->

     <div class="entry">
       <?php the_content(); ?>
     </div>


     <!-- Display a comma separated list of the Post's Categories. -->

     <p class="postmetadata">Posted in <?php the_category(', '); ?></p>
     </div> <!-- closes the first div box -->

    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>

    <?php endwhile;?>
    </div>

    <div class="span6">
    <?php query_posts('cat=2&showposts=10'); ?>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <h2><a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>

     <!-- Display the date (November 16th, 2009 format) and a link to other posts by this posts author. -->

     <small><?php the_time('F jS, Y') ?> by <?php the_author_posts_link() ?></small>


     <!-- Display the Post's content in a div box. -->

     <div class="entry">
       <?php the_content(); ?>
     </div>


     <!-- Display a comma separated list of the Post's Categories. -->

     <p class="postmetadata">Posted in <?php the_category(', '); ?></p>
     </div> <!-- closes the first div box -->

    <?php endwhile; else: ?>
    <p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
    <?php endif; ?>

    <?php endwhile;?>
    </div>
</div>
Post Views: 1

Related posts

Leave a Reply

2 comments

  1. The solution was a simple ‘duh’. Placed the code in single.php (single posts pages) instead of home.php (where all posts go). Anyway, the code as presented in the opening post works, for those interested!

    Here’s the full code that you will have to place in home.php of your wordpress template for a 2 column page. Do note that you have to change the number after ‘cat=’ in

    <?php query_posts('cat=3&showposts=10'); ?>

    You have to change the number with the category ID of the posts that you want to have in each column. Category ID can be found in the WP admin screen under the post category tab. Select the category and check the URL for the ID. 

    <?php get_header(); ?>
<div class="container">
<div class="row-fluid">
<div class="span6">
  <?php query_posts('cat=3&showposts=10'); ?>

    <?php if ( have_posts() ) : ?>

        <?php while ( have_posts() ) : the_post(); ?>
            <?php get_template_part( 'content', get_post_format() ); ?>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></h2></a>
        <p>Posted at <em><?php the_time('l, F jS, Y'); ?></em> by <?php the_author(); ?> </p>

        <?php the_content(); ?>

    <?php endwhile; else: ?>
        <p><?php _e('Sorry, this page does not exist.'); ?></p>
    <?php endif; ?>

  </div>

  <div class="span6">
  <?php query_posts('cat=4&showposts=10'); ?>

    <?php if ( have_posts() ) : ?>

        <?php while ( have_posts() ) : the_post(); ?>
            <?php get_template_part( 'content', get_post_format() ); ?>
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></h2></a>
        <p>Posted at <em><?php the_time('l, F jS, Y'); ?></em> by <?php the_author(); ?> </p>

        <?php the_content(); ?>

    <?php endwhile; else: ?>
        <p><?php _e('Sorry, this page does not exist.'); ?></p>
    <?php endif; ?>

  </div>
</div>
</div>

<?php get_footer(); ?>

  2. you have an extra </div> in there after the first <?php endwhile;?> this closes that row

    yeah I am pretty sure that this is what is doing it

    <?php endwhile; else: ?>
<p><?php _e('Sorry, no posts matched your criteria.'); ?></p>
<?php endif; ?>

<?php endwhile;?>
</div>  <----