Croco Black Friday 2024 banner element
Copy discount code:
bfcroco2024
Days
Hours
Minutes
Croco Black Friday 2024 banner element
Help Center
How to Add Featured Posts on Front End Using Query Builder

How to Add Featured Posts on Front End Using Query Builder

This guide will teach you how to display feature posts in the Listing Grid using the JetEngine plugin.

Before you start, check the tutorial requirements:

  • Elementor (Free version)

  • JetEngine plugin installed and activated

Default WordPress Posts

Create a meta box

If you want to show featured posts from default WordPress posts, you need to create a meta box.
Go to WordPress Dashboard > JetEngine > Meta Boxes and press the “Add New” button to build a new meta box item.

jetengine meta boxes list

In the Source dropdown, choose “Posts” and add the meta field with the “Switcher” Field type.

Warning

If you have a lot of posts, better use the “Checkbox” Field type for this purpose.

switcher meta field settings

Press the “Add/Update Meta Box” button and proceed to posts to fill out the options. 

wordpress default posts
Warning

You will need to check the switcher in each post — turn it on or off.

activated switcher in the wordpress post

Build a listing

Next, go to WordPress Dashboard > JetEngine > Listings and click the “Add New” button. In the appeared pop-up, choose the “Posts” Listing source, complete the following fields, and press the “Create Listing Item” button to open the editor.
Once opened, build a listing item with needed widgets.

switcher field value callback in the dynamic field elementor widget

Set query builder

After the listing is ready, let’s create a Query for it.

Navigate to WordPress Dashboard > JetEngine > Query Builder and push the “Add New” button.
Go to the Meta query section. Fill in the Field key/name, choose the “Equal” Compare operator, and complete the switcher Value (when the switcher is on — its value is “true,” when off – “false.”)

Save the query by pressing the “Add/Update Query” button.

meta query section in the posts query settings

Apply a query to a listing on the Elementor page

Go to the Elementor page. Here, add the Listing Grid widget.

In the Custom Query tab, activate the Use Custom Query toggle, pick a Custom Query, and save the changes.

custom query in the listing grid

Look at the achieved result on the front end.

queried listing on the front end

Custom Post Type Posts

Add a checkbox field in the post type

Go to WordPress Dashboard > JetEngine > Post Types

Click on the “Add New” or “Edit” button to open the post type editor.

jetengine custom post types list dashboard

Go down to the meta field section and add a “Checkbox” Field type with two options, “featured” and “not featured.”

checkbox meta fields in the post type editor

Click the “Update Post Type” and proceed to the next step.
Go to the edited post type, open one of the posts, and mark the featured value in the desired posts.

Don’t forget to press the “Update” after editing posts.

checkbox meta field in the wordpress post

Create a listing

Next, you need to build a Listing Grid for this post type. To do it, head to WordPress Dashboard > JetEngine > Listings and push the “Add New” button. 

Adjust the needed settings in the pop-up and press the “Create Listing Item” button.

jetengine listing items dashboard

To display the checkbox field, choose the Dynamic Field widget.

Select the “Meta Data” in the Source field and specify the needed Meta Field.

Then, enable the Filter field output switcher and select the “Checkbox field values” option in the Callback drop-down menu.

Style the listing and hit the “Update” button.

checkbox field value callback in the dynamic field elementor widget

Adjust query builder

The primary step is to make a Query to show only featured posts.  

Go to WordPress Dashboard > JetEngine > Query Builder to create a new query. 

Select the “Posts Type” Query Type and find the desired CPT in the Post Type list. 

Then, go to the Meta Query section; in the Field key/name field, choose the “JetEngine meta field” macro by pressing the dynamic tag button.

Set the “Regexp” Compare operator and fill in the desired value, depending on which posts you want to show.

Don’t forget to update the Query by hitting the “Add/Update Query” button.

meta query settings in the query builder

Applying a query to a listing on the Elementor page

Create a static page or go to the needed page and add the Listing Grid widget.

Choose the created Listing

Afterward, go to the Custom Query section, enable the Use Custom Query toggle, and choose the created query in the Custom Query list.

featured query in the listing grid

Check the ready page by heading to the front end.

featured posts on the front end

Now you know how to create and show featured posts using the JetEngine plugin.

Was this article helpful?
YesNo

Need help?

Ask Facebook community

Get answers from 22K Crocoblock Community experts from all over the world.

Start a live chat

Ask question to support agent and share its details via chat messages.