Need help with 2 column loop

Hi,
Not sure what you mean with the extra div,

have you closed the second column?

echo '</div> <!-- end second column -->';

Then a div to clear: Both!

If post count is odd after the last loop, add an empty div, close the column and then add a clear both div after the loop!

B.T.W. Modulus Operator
$postcount MOD 2 will only return the remainder of postcount divided by 2 so a false or true 0 or 1

So this would never be true!

if( $postcount % 2 ) == 2 )

Can be shorter if you wanted!

if( $postcount % 2 ) //true 1 Odd
if( !$postcount % 2 ) //false 0 Even

HTH

David

Ok, i just noticed that the extra div is always in the left column (the odd posts), so the right column has 4 posts, and the left has 3. I think it’s expecting there to be equal posts in both the left and right.

It’s closing all the divs properly, the problem is that it’s outputting some of the stuff from the post (stuff that isn’t dynamic). Here’s the html from the last two entries in the left column:

[Code moderated as per the Forum Rules. Please use the pastebin]

So you see, that it displays” Read Post | | Comments Off” at the bottom of the left column, if there isn’t an even number of posts.

Does that clarify the issue?

Hi,
You need to add a clear

.clear {
   clear: both;
}

<div class="clear"></div> <!-- Clear Both -->

Alternative Code (Not Tested)
If you are using excerpts and want nice even post columns.
[Code moderated as per the Forum Rules. Please use the pastebin]

This is a post I wrote for the twenty eleven theme with two columns of posts.

HTH

David

Initial Code posted here:
https://pastebin.com/fgQRTt5v

David, thanks for the response, i’m not really looking for nice even post columns, the effect i’m going for is kind of a newspaper style, they won’t line up at the bottom, but it’s ok.
I saw your code before it was removed by the moderators, I don’t think it would work for what i’m trying to accomplish here. But could you post it again, as I think it may be helpful to someone else who is trying to do something similar.

have you checked if the right posts are shown?

i think there is a flaw in the logic:

if( ($postcount % 2) == 2 ) : // skip 'even' posts

the above will never be true.
(see how the modulus operator works https://php.net/manual/en/language.operators.arithmetic.php)

and you are calling the_post() twice in one of the loops.

imho, the whole code should look like:

https://pastebin.com/42pPi6pV

Hi,
Here is the code I pasted earlier for a loop using excerpts Paste Bin

I would agree with the code from alchymyth with the addition of a clear both div at the end.

If you are still having problems then stick it on a non-production website and posts a link.

Regards

David

@alchymyth your code worked perfectly!

Thank you!

I just finished creating a tutorial on how to add different types of columns in a WordPress template. The first example from my tutorial sounds exactly like what you need.

<?php
????// Custom loop that adds a clearing class to the first item in each row
????$args = array('numberposts' => -1, 'order' => 'ASC' ); //For this example I am setting the arguments to return all posts in reverse chronological order. Odds are this will be a different query for your project
????$allposts = get_posts($args);
????$numCol = 2; // Set number of columns
?
????// Start Counter
????$counter = 0;
????foreach ($allposts as $post) {
????????$content = '<div class="columns-'.$numCol.($counter % $numCol == 0 ? ' first' : '').'">'; // Add class to first column
????????$content .= '<h3><a href="'.$post->guid.'">'.$post->post_title.'</a></h3>';
????????$content .= $post->post_content;
????????$content .= '</div>';
????????echo $content;
????????$counter ++;
????}
?>
?
<style type="text/css">
????/* Added styles here for the demo, but ideally you would put this in a stylesheet.*/
????.columns-2 {
????????float:left;
????????width:45%;
????????margin-left:10%;
????}
????.first {
????????clear:both;
????????margin-left:0;
????}
</style>

The above code uses the modulus operator like @alchymyth suggests in order to add a “clearing” class every X posts in a loop. CSS is then used to float the posts into columns and clear at the beginning of each row.

Feel free to check out the full tutorial here: https://heinencreative.com/tutorials/adding-columns-to-a-wordpress-template