Place Content After nth Post

Volatyl’s goal was to be complex but easy to use. Never getting in WordPress’ way, most of what you find in the WordPress Codex can be used in Volatyl without hassle.

One of the most popular customizations to any WordPress website is placing content in unique “hotspots” around the site. On the main blog page, placing content beneath nth post in the feed is definitely a hotspot.

Here’s how it’s done.

First of all, make sure you’re familiar with how child themes work. The important part to understand is that Volatyl is ready to be overwritten by your child theme by simply copying certain files into the same structural location in your child theme.

With that being understood, blog feeds are display using the templates/content.php file. The first thing you want to do is copy that file to the “templates” folder of your child theme. If you do not already have a “templates” folder, create it in your child theme’s root.

With the content.php file in place, add the following code at the very bottom beneath the closing </article> tag:

<?php // add content beneath nth post ?>
<?php if( $wp_query->current_post == 0 ) { ?>
	<h1 class="entry-title">This is a headline!</h1>
	<p>This is a paragraph!</p>
<?php } ?>

With that in place, the HTML will display beneath the first post in your blog feed (0 equals the first position… 1 equals the second position… etc.).

Adding Display Conditionals

The content.php file is shared. What you place using the code above will be displayed on the blog home, search results, and archives. You need to add to the conditional to change this.

For example, using WordPress Conditional Tags, we already know that is_home() is the blog home, is_search() is the search result, and is_archive() is for archives. If you only want your code to display on the blog home, you’d need to use && to add another condition and use the correct conditional tag like so…

<?php if( $wp_query->current_post == 2 && is_home() ) { ?>

With that in place, the HTML will only display beneath the 3rd post on the blog home. Using the WordPress Conditional Tags, you can get as detailed as you’d like with that code.

You’re done. Happy coding! 🙂

Return to docs