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"
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.
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 cards="5" number="5"]
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).
The following filtering and customisation options apply.
rand(random). To limit, for example, by most recent, use
title_length="8"(8 is the default).
height="170"(170 is the default).
color="#DBDBDB". It's white by default.
- As stated, there's a
bitstack 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
title_lengthfor ease of use. Consider trimming to character length.
Download removed. Newer version pending.