When someone has read your content, it can help keep them engaged with your site if you suggest related content for them. Whilst there are plugins that create links to related content by means of related taxonomies, I prefer to give site admins the option of setting related content manually.
The idea is to add related post IDs as an array in the postmeta table for the post in question. We can then retrieve these IDs, fetch relevant associated data and display links to the related content in the post template.
You select related posts by means of a custom metabox in the post edit window.
There are a number of options for actually grabbing the related posts data and writing it into the database. You could roll your own solution (sometimes it’s fun to reinvent the wheel) or you could achieve this with the CMB2 class – I’ve been dabbling with this recently and I really like it.
The Advanced Custom Fields (ACF) plugin is hard to beat when it comes to setting up metadata. ACF is a useful and reliable plugin that allows you to put together extremely user friendly admin areas with ease.
The method discussed uses ACF to display options and add selections to the database.
Our objective is for the post author or site admin to be able to easily select related content by selecting from a dropdown list in the post editing window.
Set Up Related Content Field
Create an ACF Field Group and add a “Relationship” field. Give it the name “Related Posts” (or “Related Projects”, or whatever).
ACF will turn your name into an underscore_case field name – so your ‘Related Posts’ data will be stored in the postmeta database table under the field name ‘related_posts’. You’ll need this field name later to retrieve your data.
ACF allows you to easily control which content receives your custom fields – you can constrain field groups by post, page, category, custom post type, or even specific pages and posts.
For example, you could set the new relationship field to display on all posts with the custom post type “Project”. Configure the field to display the relevant content type (posts, pages, custom post types, etc).
In the post edit window, there will now be a new “Related Posts” field.
In this field, select the related posts that you want to associate with the current post.
Once you hit “Update” to save your post, the related post data will be stored in the site database as an array of post IDs.
Add Related Content to Your Page Templates
The function below retrieves related content and uses this to create an unordered list. For example, see the bottom of this post, which uses the exact same function.
To display the list of links, you could echo out this function in a theme template, or add it to a shortcode.
Display List of Related Posts
The method used above is plugin-agnostic in that it does not use ACF functions to retrieve data from the postmeta table, relying instead on the core WordPress function get_post_meta(). This means that data added by means of ACF is not dependent upon the plugin for display – so it your client accidentally deactivates ACF they’re not left with a nearly blank site!
See Bill Erickson’s blog for more discussion of this issue.
ACF has some perfectly good methods for displaying postmeta data – principally the the_field() and the get_field() functions. The next example uses the latter function to retrieve data.
More Complex Display Options
In this example, we’ll display related content in a responsive grid, with some of the content (the excerpt) being visible on hover.
The image below shows the end result – with the leftmost related content div illustrating the hover state:
We’re displaying the featured image of each related post, with the post excerpt becoming visible on hover.
This function is used to retrieve the related post data and build the HTML for display:
The relevant CSS is shown below:
