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.
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.
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
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.
Shortt URL for this post: http://shor.tt/1XVy