One of my recent projects involved creating a page template for WordPress which had an area showing 3 related posts underneath the main post. Here is how I went about creating that.
I began by going to the current theme’s single.php the single post template file and opening it with a text editor.
Where the loop begins with
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
I wrote a little bit of code to get the tags attributed to the WordPress post being viewed.
foreach ( get_the_tags() as $tag ) {
if (!isset($tagID)) { $tagID = $tag->term_id.', '; }
else { $tagID .= $tag->term_id.', '; }
}
$tagstring = substr($tagID,0,strlen($tagID)-2);
Just to talk you through that quickly:
get_the_tags() is a WordPress function which returns the tag information into an array object, here we are using the foreach php loop to cycle through each tag array and add the ID to the tagID variable along with a comma and space to separate them.
The substr function underneath chops of the final comma and space from the string, leaving us with a list of tag id’s seperated by comma’s in the variable tagstring, just the kind of list that can be input into a new WP Query as we see below.
The related posts loop needs to be inserted after the main loop has closed, this is usually how it is closed, so find this in the file:
And add your section underneath:
<div class="related-posts">
<h4>RELATED POSTS</h4>
<?php $related_posts = new WP_Query( array(
'posts_per_page' => '9',
'tag__in' => array( $tagstring )
) );
while ( $related_posts->have_posts() ) { $related_posts->the_post(); ?>
<aside class="related-post">
<div class="related-post-thumbnail">
<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr(get_the_title()); ?>"><?php the_post_thumbnail( 'related-post-thumbnail' ); ?></a>
</div>
<a href="<?php the_permalink(); ?>" title="<?php echo esc_attr(get_the_title()); ?>" class="related-post-title"><?php the_title(); ?></a>
</aside>
<?php } ?>
</div>
Let go through this bit quickly as well.
So we are wrapping the entire section in a div with the class related-posts to being with and adding a heading. Next up we create the new WP query loop with our custom arguments, note I’ve adding in the posts_per_page variable so I can manually choose how many to display, without this the loop will return as many posts as are selected in your reading settings in the admin dashboard. Also underneath that ‘tag__in’ is set to tagstring, our list of tags we created earlier.
Below this we instigate the new loop, we have called a new WP Query so we can call the_post() without the previous loop interfering with it. Now we are inside the loop, all code from here to the wobbly bracket at the bottom will be dulicated for each post. So we create the aside to wrap each post, and a div containing the post thumbnail – with a custom image size called ‘related-post-thumbnail’ with a link to the post, and a title with link to the post underneath that. The final bit of php closes the while loop.
I went onto to apply styles for desktop, tablet and mobile resulting in the finished article.