Diving Posts into 2 Columns WordPress
- SOLVED
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">
<h1>FEATURED PORTFOLIO</h1>
</div>
<div id='gallery_category'>
<?php
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?: http://codex.wordpress.org/Template_Tags/query_posts
$portfolio_query->query(array(
// This will create a loop that shows 2 posts from the creative category.
'category_name' => 'portfolio',
'posts_per_page' => 4,
)); ?>
<?php
// 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>
</div> <!-- closes the first div box -->
<!--This is how to end a loop -->
<?php
/* 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>';
?>
</div>
<?php
// 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.
add_action('thematic_belowcontainer','gallery_category');
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();
Erez S answers:
Replace:
// While posts exists in the Query, display them.
With:
// While posts exists in the Query, display them.
$count = 1;
Enjoy
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){
to
elseif ($count >= 2){
This should behave the way you intend, and no more rogue div starting and closing tags around :)