The idea is to use a plugin called Related Posts By Taxonomy for the underlying logic of showing related posts with Elementor. We’ll leverage the developer-friendly aspect of Elementor’s Posts element, allowing you to bend it to your will. The result is the related posts widget you see at the end of any article on this site. It uses Elementor’s design, but not its WP Query! We use the 3rd party plugin to funnel query results to the cards view. This article tells you how to do that.
About Related Posts By Taxonomy
I was sad to see the decommissioning of my previous go-to plugin for this purpose: Yet Another Related Posts Plugin (YARPP). Therefore I decided to scan the official repository for a new alternative. Of course, it had to be free. Why would you buy an Elementor element pack, solely for a related posts solution? My criteria were the following:
- Lightweight
- Have a good algorithm/logic
- Front-end looks don’t matter
- Highly rated
I found Related Posts By Taxonomy, and I’m glad to announce that it perfectly fits the purpose. It’s so lightweight that it doesn’t even have an admin panel! I loved that aspect – no useless clutter! It only appears as a widget. Elementor can make use of WordPress widgets, so just in case you are happy with the looks of this plugin, you can use it as-is. The widget controls appear in the editing sidebar of Elementor.
The logic is simple but effective. A top ranking related post is an article that shares as many categories/tags as possible with the displayed post. It works with custom taxonomies too. Unfortunately, there is no custom weighting in this plugin. Anyway, it retains a visitor better if you show posts after an article that have something in common with it. Previously, we displayed the three most recent posts, and that practice wasn’t leading anywhere. The latest often didn’t have anything to do with the one you were reading.
Preparing Elementor’s Post element
Set up an Elementor Post element however you like (cards or classic skin), and reach a point where it shows some recent posts with a design you want. Then there is only a small change you need to make to the Post Element. To affect the query and show related posts with Elementor, add lwp_related_posts to the Query > Query ID setting. The next step will put some meaning behind that handle. This setting allows a developer to hook into and manipulate the query to change what posts to show.
The custom code that connects the two plugins
Add the following PHP code snippet to your site, using one of the methods I told you about earlier.
add_action(
/* Pre-Elementor 2.5.1 use this:
'elementor_pro/posts/query/lwp_related_posts', */
'elementor/query/lwp_related_posts',
'lwp_3266_related_posts'
);
function lwp_3266_related_posts( $query ) {
global $post;
$query->set(
'post__in',
km_rpbt_get_related_posts(
$post->ID,
array( 'fields' => 'ids' )
)
);
}
That’s all, and it’s surprisingly simple. The function calls the Related Posts By Taxonomy plugin to fetch related posts for the current post. It sets Elementor’s query to grab those posts. Yes, there are two queries, but unless we want to dig deep into how the logic of the sidekick plugin works, this is fine. Usually, people show just a handful of related posts anyway, so it’s not that taxing to use the post__in query parameter.
Further tweaks
For our use case, this is all it took to show related posts with Elementor. Your mileage may vary, but the above function is where you can tweak the query further. Mind you that anything you set for the query in Elementor still applies. Therefore the basic setup can happen there.
Nonetheless, to use a broader set of settings, look up changing the output of Related Posts By Taxonomy. It’s surprisingly well-documented for a free plugin. I hope this snippet helps increase visitor engagement on your site.
April 2019 update:
Elementor 2.5 includes a Related option in the Source dropdown under Query. I believe the results are still better with our approach. Furthermore, in 2.5.1, they renamed the action hook – see comment in the code above.
Comments are closed.