1. Code
  2. Plugins

Display & Style Related Posts For Your WordPress Site

Read Time:3 minsLanguages:

Displaying related posts is a great way to keep readers on your blog and this tutorial will show you how to achieve just this! There are definitely many related posts plugins out there that would be great to use, however I couldn't find any plugins that fit exactly what I needed. So after a lot of reading and researching, here's what I ended up with that's helped me on a ton of my client's projects including my own. Here I will show you how to program a custom WordPress loop that will display your related posts with thumbnails.

Step 1 Edit your functions.php file

First thing's first, open up your functions.php file and add this little bit of code:

Be sure to replace the 196 and 110 with your own dimensions. Save it and upload the file. After you upload it, in your post sidebar you'll see a new option titled "featured image". You can upload any image you want to use here and this will be the image that will display in the related posts section. And make sure you tag all of your posts with at least one keyword. That way when you use this code, you can actually display other posts with any specific tag that the current post has.

Step 2 Edit your single.php file

Now, open your single.php file and add this block of code anywhere you want the related posts section to show up.

Just change the 'showposts'=>4 to however many posts you want to show.

Optional Default Image

If you don't tend to use images in your posts too much but still want the ability to use the related posts with a thumbnail, replace this line above:

with this:

This will pull a default image from your theme folder just in case you don't have an image assigned to any post.

Step 3 Make it Look Good with CSS!

Above is just an example of what you can do with CSS and your related posts code. And that's it! You have a fully functional related posts section on your WordPress site.

Here's a Screenshot of the Finished Product

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.