How To Style Alternate Posts On Wordpress Post Loop
For a recent website project of mine, I needed to style alternate posts for a Wordpress theme I was building. This was a more creative approach to just simply adding a Horizontal Rule tag to separate content in a clean, minimalistic design.
The approach is relatively simple. We need to add some dynamism to our code which will be able to compute 'odd' and 'even' numbering. For example, if we give each post displayed from our post loop a number we get the following:
At the moment, each post is styled the same.
Anyone with a background in programming will very easily make the connection between the Wordpress Post Loop Query and a Counter variable. We can simply add a counter within the Post Loop and increment it every time a post is loaded. That means, for Post 1 the counter = 1, for Post 2 the counter = 2 and for Post 3 the counter = 3. From here, we can create an algorithm (read: function) that can decipher whether the counter is an 'odd' or 'even' number in order to style alternate posts.
How to style alternate posts from the Wordpress post loop
Step 1: To allow us to easily implement the ability to check for an odd or even number, we will create a function that can be called from anywhere within Wordpress. To do this, open your theme's functions.php file and paste the following code anywhere between the opening and closing php tags (<?php and ?>).
function odd_or_even($counter) { if($counter % 2 == 0) { return "even"; } else { return "odd"; } }
This function simple takes an input argument called 'counter' and checks the remainder when divided by two. If the remainder after division by two is equal to zero, the input argument of the post-loop counter must be even so we return the string 'even'. If the number does not satisfy the expression for being even it must be odd. We've just created a function called 'odd_or_even' which can be called from anywhere within Wordpress. So in the next step, we will make the call.
Step 2: From the template file where your post list appears, you'll need to locate the 'while' loop containing creating the post loop. In this example, my code looks like this:
<?php if ( $query->have_posts() ) : while ( $query->have_posts() ) : $query->the_post(); ?>
Above this line you need to create a counter variable. To do this outside of PHP tags, use the following code:
<?php $counter = 1; ?>
Step 3: You then need to locate the containing div and add the following PHP code within the HTML 'class' tag:
<div class="row post-list-<?php echo odd_or_even($counter); ?>"><p></p><p>Here we can called the function we placed in our <em>functions.php</em> file. We pass it the value of the counter which starts at one and increments according to how many posts are displayed on the page. This function then returns a string as described above which is appended to the term 'post-list-'.</p><p>The div which contains the post loop will therefore have two classes. All posts will have the class <em>row</em> and then posts will have either of the following classes:</p><ul><li>post-list-odd</li><li>post-list-even</li></ul><p>This will now enable us to style alternate posts that appear via this particular template file.</p><p><img src="/images/How-To-Style-Alternate-Posts-On-Wordpress-Post-Loop-Odd-Even.jpg" alt="How To Style Alternate Posts On Wordpress Post Loop Odd Even"></p><p><strong>Step 4:</strong> You can now head to your <em>style.css</em> file and add some styling specifics. For example, to set a red background to odd posts and a blue background to even posts you could add the following to your <em>style.css</em> stylesheet:</p><p>.post-list-odd { background: red; }</p><p>.post-list-even { background: blue; }</p><p>And voila! You'll now see that after saving the template file, the background of alternating posts will vary.</p></div>