CODEWITHSUNDEEP
wordpress
Cameron
Cameron

Reputation: 28783

WordPress query posts into two Divs

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.

Any help much appreciated.

Upvotes: 1

Views: 777

Answers (3)

ahmet2106
ahmet2106

Reputation: 5007

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; ?>

Upvotes: 2

shipshape
shipshape

Reputation: 1742

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;

Upvotes: 0

AKX
AKX

Reputation: 168843

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...)

Upvotes: 1

Related Questions