How to add related posts to your Elementor posts or sidebar

 

 

In this video, I will show you how to use the related posts sections in the Katka Elementor Template pack. It includes two options and three use cases. One for the regular placement at the end of your posts and one for the sidebar as a widget.

Please note, this will require Elementor’s Pro version.

First, log into your WordPress admin area and make sure Elementor and Elementor Pro are installed and activated!

Next, let’s import the related posts templates.

– Hover over Elementor and click on my library option

– Here, click on Import new

– Navigate to the unzipped template pack folder and in the sections folder find the related posts option

– Here, we can use the zip file to import all 3 templates at once

There are a few options from here on. First, we can add the sidebar widget to the required position.

For this we need to do some editing of the template. Let’s find the related posts for sidebar template and edit with Elementor. As we can not export widgets this is a whole section. To get the widget only, hover over the posts widget and click on the save icon, give it a name you will remember and exit the editor.

Next, hover over Appearance and click on the widgets option, add an Elementor template widget to the sidebar of your choice and from the drop-down find the recently saved template. You can give it a name or leave it blank.

The next option is to use the new Elementor pro single posts template. Hover over Elementor and click on my library once again.

– Find the single tab and edit the template of your choice.

– Scroll to the end of the template and add a new section from templates.

– Find the related posts template and insert it.

– From here you can style it as usual.

– Make sure to save it when finished an exit from the editor.

The last version is for those who use GeneratePress hooks and prefer to keep all functions done by the theme. For this to work you need a bit of code and the shortcode of the related posts template.

– Hover of appearance and click on the GP Hooks option.

– Find the hook called “after content”.

– And insert the code provided.

<?php if ( is_single() ) : ?>

[shortcode here]

<?php endif; ?>

– Next, in a new tab lets find the shortcode of our template and copy it.

– On the previous tab, paste it in the designated portion of our code and make sure to tick the execute PHP option too before you save it. This will add the related posts template at the end of all the single posts only.

So this is how to do it quickly but the magical setting you need to use when building your own version is post querys! Use a posts widget in Elementor pro and in the query options set it the exclude the current post.

 

Resources used:

Did I do something wrong?

Are you missing a design or didn’t had the chance to take a good look on other templates?