WordPress query posts into two Divs

4 Views

I want to display my wordpress posts in a category in two divs. So for example: 

<ul id="left">

<li class="post">POST 1</li>

<li class="post">POST 3</li>

<li class="post">POST 5</li>

<li class="post">POST 7</li>

</ul>

<ul id="right">

<li class="post">POST 2</li>

<li class="post">POST 4</li>

<li class="post">POST 6</li>

<li class="post">POST 8</li>

</ul>

So want I need to do is tell the query_posts to somehow start spitting out the first 4 posts oddly and then evenly for each div. I don’t want to have two seperate WP_Queries as this is a category.php file and needs to have the default loop. Not quite sure how to do this.

Read More

Any help much appreciated.

Post Views: 4

Related posts

Leave a Reply

3 comments

  1. I have not test this before, this is not the best way but a solution

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

    <?php while (have_posts()) : the_post(); ?>

        <?php
            $count++;

            if( $count % 2 ) {
                $left_array[] = array( 'content' => get_the_content('more...') );
            }
            else {
                $right_array[] = array( 'content' => get_the_content('more...') );
            }
        ?>

    <?php endwhile; ?>

    <ul id="left">
        <?php
        foreach( $left_array as $post ) {
            echo '<li class="post">'.$post['content'].'</li>';
        }
        ?>
    </ul>
    <ul id="right">
        <?php
        foreach( $right_array as $post ) {
            echo '<li class="post">'.$post['content'].'</li>';
        }
        ?>
    </ul>

<?php else : ?>

<?php endif; ?>

    or the same idea, but another way:

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

    <?php while (have_posts()) : the_post(); ?>

        <ul id="left">
        <?php
            $count++;

            if( $count % 2 ) {
            }
            else {
        ?>
                <li class="post"><?php the_content('more...'); ?></li>
        <?php
            }
        ?>
        </ul>

        <ul id="right">
        <?php
            $count++;
            if( $count % 2 ) {
        ?>
                <li class="post"><?php the_content('more...'); ?></li>
        <?php
            }
        ?>
        </ul>

    <?php endwhile; ?>

<?php else : ?>

<?php endif; ?>

  2. How about preconstructing the two lists: (I can’t recall the WP query syntax, so it’s pseudo-PHP:)

    <?php
$list1 = array();
$list2 = array();
$i=0;
foreach($query_results as $res) {
  if(($i++)&1) $list2[] = $res;
  else $list1[] = $res;
}
?>

    Now list1 contains the first, third, … item and list2 contains the second, fourth, …
    You can then print them in the two divs as you wish.

    (On a tangent: Does PHP have any succinct way to do what the above code does? Python has the stepped slicing syntax…)

  3. If your goal is to have a two-column list of posts, it would be much easier to just output the posts in one list, and then use CSS to give the visual appearance of two columns using float, for instance:

    width: 50%;
float: left;