Create a manually selected list of related posts to encourage site visitors to read more.
Since early 2017 I have been writing weekly blog posts about code I have written for WordPress and WooCommerce. There is no order to the posts – they’ve all been written shortly after I’ve solved an issue for a client site or even my own site. When someone comes to this site they won’t easily find other similar posts unless they were linked to in the post. That changes now.
For months I’ve been planning to add a manual Related Posts section at the end of each of my posts. I didn’t want to use a plugin to automatically choose related posts as the results could be wrong and such plugins apparently slow things down (A number of them are not allowed on WP Engine servers).
I had thought about using CMB2 to provide a drop down or similar list from which I would select three appropriate posts. I kept putting this off because the more I thought about it the more intimidating it got (I would have cached the list of post IDs and titles to speed things up but the functionality escaped me).
Found a plugin
During my many visits to the CMB2 wiki about the various field types I found the CMB2 Attached Posts Field code and installed it on this site. In the Edit Post screen it presents a Related Posts area under the editor. From this I can search for posts and choose those to “attach” to this post. It added their post IDs to a custom field.
The code used a custom CMB2 field, a lot better than anything I would have written.
Below you can see a screenshot of the area for this post. It’s quite simple to use.
The frontend
As CMB2 only runs in the Dashboard get_post_meta() is used to retrieve the list of attached posts when on the frontend. When you have that list you can present it in any way you like. I decided to keep it simple with the featured image (if there is one) on the left and the post title and excerpt on the right. I use flexbox to display them. I might alternate the order on every second row and put the image on the right. This is what I do on my Portfolio though I used CSS Grid and column ordering for that.
The code
The code is quite simple (I like to keep my code easy to make it easier to understand, maintain, make it more robust and less likely to have errors). I have included the CSS in the code so it is a self-contained example.
It retrieves the post meta array and goes through each element (a post ID), calls get_post() to get the post data and then puts the featured image, permalink, title and excerpt in a section. I used the API functions get_the_permalink(), get_the_title() and get_the_excerpt() to allow any attached filter functions to run. Passing the post object to these functions meant that the database was not queried multiple times.
Note: The code uses the ‘genesis_after_entry‘ hook. This is because my site uses the Genesis framework. A non-Genesis based theme would likely use ‘the_content‘ filter. Using ob_start() and ob_get_clean() would allow the code to keep the echo calls.
And now, for those Related Posts….
Leave a Reply