By Neil on May 18, 2015
The following tutorial uses the Views plugin to setup a list of related posts that appear in the sidebar. Each post is set a category and the related posts that show on each specific post are also tagged in the same category, hence they are directly related to each other.
This is a pretty straight forward tutorial and the video below is only around 6 mins long.
Step-by-step tutorial.
The image below shows the end result. There are three related posts to the right of the main body of the post that are all in the same category as the post itself.
You need to Views plugin to follow this tutorial.
Step 1 – Make sure all posts are assigned the correct categories. In this example the Properties are assigned the properties category and the Agents are assigned the agents category. It is these properties that are used to display the related posts.
Step 2 – In your WordPress dashboard hover over the ‘Views’ menu link on the left-hand side and chose ‘Views’. A new screen will open and you need to select ‘Add new View’. In the pop-up window select ‘Display all results’ and give your View a name. Click the ‘Create View’ button.
Step 3 – The View set-up window opens. Under ‘Content Selection’ choose ‘Posts’. Leave ‘Query Option’ ticked (default situation), and choose to ‘Order Randomly’. Set a Limit of 3 posts.
Now set a ‘Query Filter’. Click ‘Add a filter’ and in the pop-up window select ‘Categories’. From the following options choose ‘Set by current page’. This means the View will look at the category assigned to the current post or page and then show only those related posts with the same category in the view.
The initial configuration is now set up, now you need to choose what you want to show in your related posts and how you want it formatted/styled.
Step 4 – In the ‘Loop Output’ window you will see a bit of code already in there. You want to add your custom code & styling between the wpv-loop and the /wpv-loop shortcodes.
In this example I add a title (that if clicked takes you through to the post), a feature image, and also a text link (that says Read more…) that also takes you through to the full post.
The clickable title and the featured image are simply added using the ‘Fields and Views’ menu button. To control the size of the title text H3 HTML tags are manually placed around the title shortcode, and to control the size of the featured image the attribute ‘size=”large”‘ is placed within the shortcode.
These custom modifications to the shortcodes are not compulsory and you can do as much or little custom styling as you like. There is a dedicated CSS window directly below this ‘Loop Output’ area if you want to add more custom CSS styling.
Finally for this area a ‘Read more…’ text link is placed in the code. To get the URL of the post that we want to link too we can use the ‘Fields and Views’ menu again and select URL from the list. The final ‘Loop Output’ code is shown in the image below.
After completing the ‘Loop Output’ area make sure you click the ‘Save all sections at once’ button that is above this ‘Loop Output’ area.
Step 4 – Now we assign this new View to a sidebar widget area in your WordPress theme. Select ‘Appearance/Widgets’ from the left-hand dashboard menu and drag (or assign) the ‘WP Views’ widget to the widget area of your choice. In this example we use the ‘Second Sidebar’ widget area that is the area that shows on the right side of the website in this particular WordPress theme.
We give this widget the Title “Related Posts” and make sure the View we have just set up is selected in the ‘View’ list. Here we only have one View so it is the only one there, but if you have several Views there will be more options.
Save this widget and that’s it. You are ready to go. Head over to your website posts and see if the related posts are showing.
Summary
This tutorial shows you how to get a related posts area on your WordPress website. To follow this tutorial you need to Views Plugin which at the time of writing costs around $79 (USD), which is about £50. While this is a fair amount of money in a world where there are a lot of free options I personally highly recommend this plugin and use it extensively on this website and the other websites I have set up and maintain.
The Views plugin is part of a suite of plugins called Toolset. Find out what else these plugins do here on the Toolset official website.
Leave a Reply