Back to contents

JetEngine: How to Display “Related Posts” Using Listing Grid

Find out how to display Related Posts section on the Single post page with the help of JetEngine Listing Grid widget.

If you want to offer your users to take a look at the posts related to the one they are currently viewing, you might need to display them on a Single post page. It’s quite easy with the Listing Grid widget and JetEngine plugin functionality. So let’s walk through the process.

1 Step— Create the Single Page template

Let’s assume, that you have already created the custom post type and added some posts to it. If not – go through our Custom Post Type creation tutorial. Afterward, you have to create and attach taxonomies to these posts. If you need some help with it, follow the link and check out our custom taxonomy creation guide.

Now, log in to your WordPress Dashboard and navigate to the Crocoblock > Theme Bulder. Open the Single tab and click the “Add new” button. Enter the Template Name and click on the “Create Template” button.

creating single page

After that, you will be redirected to the Elementor editor. Click on the “Settings” button at the bottom of the left side panel and unfold the Conditions section. In the General field choose the “Singular” option and in the Singular drop-down menu select the “Post Type”. In the Post Type field add the CPT for which you are creating this Single page.

Go to the Preview section and select the created Post Type. In the next Select Post field enter the name of the post to be displayed. The post you choose will be used as an example for the Single Page.

Single page Preview settings

2 Step— Add the Listing Grid widget

Find the Dynamic Field widget and drop it to the page. In the General menu section choose the Listing template you have created for the CPT. Afterward, open the Posts Query section and hit the “Add Item” button. In the Type dropdown menu choose the “Posts&Author Parameters” option. After that, you need to put in the macros %current_id% in the Exclude posts by IDs field in order to prevent duplication of the currently displayed posts on the page from the query.

Posts Query for related posts

Now, add a new item with “Tax Query” Type. Select the taxonomy you have created for the CPT in the Taxonomy field. Leave the Operator at the “IN” option and Field at “Term ID”.

In the Terms field, you should enter the macros %current_terms% in order to showcase the posts with the same terms as the one, the user is currently looking at.

tax query for related posts

Congrats, you’ve learned how to display related posts on the Single post page template using the Listing Grid widget of JetEngine plugin.