Ask your WordPress questions! Pay money and get answers fast! Comodo Trusted Site Seal
Official PayPal Seal

Diving Posts into 2 Columns WordPress


I have 4 posts on my homepage and I want to divide it into 2 columns with 2 posts in each column. Although I managed to create 2 columns, the number of posts in each column isn't corresponding to theif ($count == number){ and } elseif ($count%2 == 0){ numbers i put in.

function gallery_category(){
if (is_home() & !is_paged()) {?>
<div id="gallerycontent" class="prepend-1">
<div id="galleryheader">

<div id='gallery_category'>
global $paged, $more;
$more = 0;

// Second, create a new temporary Variable for your query.
// $creative_query is the Variable used in this example query.
// If you run any new Queries, change the variable to something else more specific ie: $feature_wp_query.
$temp = $portfolio_query;

// Next, set your new Variable to NULL so it's empty.
$portfolio_query = null;

// Then, turn your variable int the WP_Query() function.
$portfolio_query = new WP_Query();

// Set you're query parameters. Need more Parameters?:

// This will create a loop that shows 2 posts from the creative category.
'category_name' => 'portfolio',
'posts_per_page' => 4,

)); ?>

// While posts exists in the Query, display them.
while ($portfolio_query->have_posts()) : $portfolio_query->the_post(); ?>

<?php // Start the looped content here. ?>
<div class="post">
<div class="entry-content">
<?php the_content(); ?>
</div> <!-- closes the first div box -->
<!--This is how to end a loop -->


/* In the case you're rendering the very last post, do nothing: */
if ($count == 9){
// Do nothing, thematic will add a '</div>' to close the last post
/* Is this the last post in the column?
That means if the loop number divides by 2 (or whatever post per column number we choose) */
} elseif ($count%2 == 0){
/* if this is the bottom post, close the div and start a new div: */
echo '</div>

<div id="column2" class="prepend-8">';

} else {
/* Do nothing, just move on, nothing to see here... */

/* We're about to finish the loop, let's add 1 to the count: */

$count = $count + 1;

endwhile; /* loop done, go back up */

/* All the posts are done, close the last column: */
echo '</div>';


// End the Query and set it back to temporary so that it doesn't interfere with other queries.
$portfolio_query = null;
$portfolio_query = $temp;


//Add the function to the Action Hook.

Answers (4)


Andrzej answers:

From what I see, first time when the while loop gets run, $count variable isn't specified, so it's treated like zero. So after very first loop round statement $count%2=0 matches, and <div> gets closed leaving single post in first column.

I think it should work better if you start counting from 1 - just insert
$count = 1;
just above this line:
while ($portfolio_query->have_posts()) : $portfolio_query->the_post();


Rok Don answers:

Initialise $count = 1 above the while loop. It will work


Erez S answers:

// While posts exists in the Query, display them.
// While posts exists in the Query, display them.
$count = 1;



Merne Asplund answers:

OK, I think I understand your problem. You are using the modulous operator.

elseif ($count%2 == 0){

/* if this is the bottom post, close the div and start a new div: */

echo '</div>

<div id="column2" class="prepend-8">';


What this is saying is, if the current number divided by 2 leaves no remainder then run this block of code.

The problem is, you want to put the first 2 items in the 1st column and the second 2 items into column 2. Add the counter=1; that everyone has said, but then change
elseif ($count%2 == 0){
elseif ($count >= 2){
This should behave the way you intend, and no more rogue div starting and closing tags around :)