Site icon League WP

How to Redesign Related Posts in WordPress

Related posts play a key role in improving bounce rate on your website. If you have a lot of useful articles on your website, you want to display them in a visually attractive manner for your site visitors.

If you’re using WordPress, here’s how you can display Related Posts on your blog.

#1. Install and activate JetPack plugin by WordPress.

#2. Turn on the Related Post feature on the plugin settings page.

#3. Go Reading under Settings and tick both boxes under Related Post (see screenshot below).

Related Posts before Redesign

Now click on any post of your blog and, as shown in the screenshot above, you should be able to see the Related Posts under each posts.

However, you might want to change a couple of things to make it look more attractive.

#1. Display higher number of posts, e.g 6 posts in stead of 3 posts which is the default setting.

#2. Display a compelling title for the posts in stead of the default title which says “Related”.

#3. Remove the word “In” from the Post Category.

#4. Leave some spacing between the related post image and the title.

When you’re done implementing the above changes, your Related Posts should look something like this (screenshot below).

Related Posts after Redesign

In order to achieve this, we need to make two changes:

Step #1: Add some code snippets to Functions.php file
Step #2: Add some code to our CSS file

So, let’s do it.

Step #1: Please, stay advised that you should use an FTP client such as File Zilla to make these changes. While you could make changes directly within the WordPress dashboard (Appearance > Editor), it’s kinda risky – if something goes wrong during the copying and pasting, your website will go down temporarily.

If you’re ready, add the following code snippets to the functions.php file in your currently active theme.

Step #2: Add the following CSS code snippets to your style.css file.

Exit mobile version