Out of frustration I came up with a solution for my work/archive/category pages on a Wordpress theme I’m developing for my portfolio. The idea is to showcase my portfolio work in a grid like layout. Like so in the graphic below.
Everything was going to plan until one of the work content containers height increased above the others. This caused the layout to not be so grid like.
Each of the work content is wrapped in an
<article> tag and a single
<section> tag is containing all of the
<article> work content. For the styling I simply did a float: left; and width: 29.5%; on the
<article> work content. This caused all the
<article> containers to align next to each other in a line. But once one of those work content containers height goes above the others it’ll mess up the grid like so.
So my first thought was use David DeSandro’s Masonry plugin. After a little bit of frustration with it and not liking the idea that I had to use a plugin to make this work I removed the plugin and started from scratch.
Second solution was making each
<article> element act as a
table-cell through CSS. But that didn’t work out either.
Finally with enough frustration not figuring out any solution I opened up Firebug and edited the HTML manually to see what it’d look like if I added a horizontal rule. I added the
<hr /> after three posts since that matched what I wanted to achieve with the grid like layout. But of course this was me manually doing this and not part of the dynamic work of Wordpress. After some googling I ran into this clever snippet from that always resourceful css-tricks.com website. But the golden ticket was from one of the comments regarding this snippet on css-tricks.com. The commentator suggested what he had done that was similar to the snippet. His suggestion says to search for the current posts and if it reaches up to four posts add a class of “last” to the forth post.
if (!((1+$wp_query->current_post) % 4)) echo 'last';
This snippet looked like what I needed. But for me instead of adding a class I needed to add a horizontal rule after three posts. So I switched the 4 to 3 and ‘last’ to ‘
<hr />’. Like so.
<?php if (!((1+$wp_query->current_post) % 3)) echo '<hr />' ; ?>
This snippet of code should go within the famous Wordpress loop and before the end of the loop. This is what mine looks like.
<section class="content archive"> <?php $wp_query = new WP_Query(); $wp_query->query('showposts=1000'.'&paged='.$paged); ?> <?php if (have_posts()) : while (have_posts()) : the_post(); ?> <article class="post"> content... </article><!--end post--> <--Here is the snippet to insert a horizontal rule after three posts--> <?php if (!((1+$wp_query->current_post) % 3)) echo '<hr />' ; ?> <?php endwhile; endif; ?> </section><!--end content archive-->
That’s the code needed in my example.
So no matter what height each of the <article> containers is, it won’t mess with the layout as long as the horizontal rule continues to be inserted after the third post. Like so.