How to Use JetEngine Query Builder with Bricks Query Loop

Initially, make sure that the needed Post Types that you want to display in the Query Loop are enabled in the WordPress Dashboard > Bricks > Settings directory. For example, we need the “Jobs (Vacancies)” Custom Post Types to be activated.

Don’t forget ot press the “Save Settings” button below.

In this example, we will create a custom query in JetEngine for the Bricks Query Loop. Go to WordPress Dashboard > JetEngine > Query Builder and hit “Add New.”

When the new query editor is opened, enter the query’s Name. In our case, “Full-time job query.”

Then, select the needed Query Type. In this guide, we will use “Posts Query.”

Scrolling down to the Posts Query section, we pick the “Jobs (Vacancies)” Post Type in the General tab.

Then, we open the Tax Query tab and press the “Add new” button.

We want to filter the posts by the term of the “Vacancy Type” taxonomy, so we select it in the Taxonomy field. 

After that, we select the “Slug” option as the Field so the query will search posts by the taxonomy term slug. Then, we specify the slug itself (“full-time”) in the Terms field.

That’s all for our query customization. Make other customizations, and when ready, press the “Add Query” button.

It’s time to build a template with the Query Loop. So, open the WordPress Dashboard > Bricks > Templates directory and press the “Add New Template” button.

Enter the title and select the needed template type (for example, “Section”). Once done, open the template in the editor.

In the Bricks editor, first, we add a two-column layout.

In the first column, we add a Dynamic Field element. We leave the default “Post/Term/User/Option Data” Source and the “Title” Object Field. This way, you will now see the page’s title, but it will be changed once we select our query in the further steps.

For this, click on the Section to see its settings.

Here, activate the Bricks Query Loop toggle and press the “infinity” sign next to the Query field.

In the opened pop-up, select the “JetEngine Query Builder” Type to use the custom query in Bricks. This ensures compatibility with JetSmartFilters, sorting, and “Load More” features. 

Then click outside the pop-up to close it.

In the JetEngine Queries field, select the query you have built earlier. In our case, it’s “Full-time jobs query.”

After selecting the query, the queried items will appear in the editor preview.

You can switch to the STYLE tab of the element settings to make some changes to the element’s style if needed.

We also change the Margin settings of the section.

Moving to the second column, we add another Dynamic Field here. This time, the Source is set to “Meta Data” and the Meta Field to “salary.” This is a JetEngine meta field that stores the salary of the offered vacancies.

We also work on the STYLE settings of this Dynamic Field.

Publish the template when ready.

Now, you can open the front end and check the result. In our case, all the full-time jobs are displayed here, along with the offered salaries.