Blog, WordPress, WordPress Shortcode

Create a Related Reading List in WordPress

Continuing with a number of WordPress shortcode functions that query various posts from your WP database, the next in our series looks at rendering related posts attached to each post. While there's a ton of "related posts" plugins available from within the WordPress repository, none were suitable for us because we tailor how results are rendered for each individual client.

Note: This solution is quite old and should be considered redundant. A new Yabber version is detailed in an article titled "Revised Related Posts, Downloads, and Videos Module", and other titled "Posts Category Accordion Elementor Widget and Shortcode"

While one could easily create a single function to return posts with all the available query parameters (see the random posts and future posts examples), the related posts is one feature where a dedicated function was required since we render the results visually to increase engagement... and related posts do increase increase engagement. On those sites where we've included a related posts option the bounce rate has decreased and page-level conversions have increased by over 15%.

We use your post tags to query and return relevant results. If no posts are found we fall back onto a category search. Our little function is by no means complete and it's not a great example. It is, however, a good starting point.

The Result

Because of the number and complexity of the shortcode we've created a page with another example here. Shortcodes should be simple to use... but I strayed a little on this one. The idea with shortcodes, however, is that you will create your own variation on our theme... which includes adding and removing your own attributes. That said, it is a plug-and play option if you're so inclined.

A basic example with 5 responsive results (that'll play nicely on desktop and mobile) is as follows (shortcode used is the default [relatedposts]):

~~[relatedposts cards="5" number="5"]~~ (Example Removed).

The number of results and rows can be altered to your liking (as can the background color, height, font style, author etc). If we were to have three rows of four related posts I'd use the shortcode of [relatedposts cards="12" number="4"] (where 12 is the total number of related 'cards' and 4 is the number of cards on each row). The result can be found here. I was unable to include any further examples on this page because scoped CSS content is largely unsupported. In real-world use you would likely copy the CSS into your custom functions file.

In reality we wouldn't be using the related posts feature by way of shortcode. Instead, you would hard-code the function into a theme file or include it into the content via a filter (we've got a post forthcoming that'll show you how to do this).

Shortcode Attributes

The following filtering and customisation options apply.

author

To return a related reading list from a particular author or authors, use a comma separated list of author IDs.

category

To narrow the list of returned results include a specific category, use the category ID.

tags

We use your post tags to filter results by default. To use your own tags, or to further limit results, include a list of comma separated tag names.

orderby

By default we'll order the results by rand (random). To limit, for example, by most recent, use orderby="date".

date

The date is used as a title for the rendered image. If you choose to alter the format of the date, change it here.

description

We don't render the description under titles because of limited realestate. However, we do use the description (excerpt) as the link title text. To disable this, use description="false".

remove

It's not uncommon to have unrelated text in your post container (via the content filter). To remove this, use the remove parameter.

words

The words is the length of the description returned (as a link title text, returned on mouseover).

title_length

Limit the length of words returned in the title with title_length="8" (8 is the default).

height

Adjust the height of each card with height="170" (170 is the default).

color

To alter the color of the card's background color, use color="#DBDBDB". It's white by default.

fontsize

Adjust the font size as required.

image

We use the featured image as the tile featured image. When a featured image for a post isn't set we'll default to the image defined here.

cards

The number of cards (results) to return. We return 5 by default.

number

The number of cards (results) on each row.

cache

The query is an expensive operation. We'll query results for 2 days by default. You might consider using Simple Cache over the WP transient API.

Considerations

As stated, there's a ~~bit~~ stack of work required before this code will see its way anywhere near any of our sites.
The wrapping of cards uses a similar technique we use to wrap testimonials and other types of content (forthcoming).
The function can easily be modified to simply return results in a list. We'll publish an example to our WP snippets repository soon.
Keep posted: we'll post another refined version soon. We'll also share a funky function that injects a related post reference into your content.
Most of the wp_query() search parameters are documented in the WordPress Codex .
Again, the cards are best used with the content filter or via a theme's hook.
To create equal panel heights, determine the ratio of the featured image, then adjust the height of the div container as required.
We've used wp_trim_words() for the title_length for ease of use. Consider trimming to character length.