Troubleshooting //
Highlighting the Current Term in Listing on the Archive Page

Highlighting the Current Term in Listing on the Archive Page

Question

If I use the listing grid widget to display the terms by query, how can I show them as active?

Tutorial requirements:

Answer

Build Terms Query

Build the Terms query for the desired taxonomy assigned to the CPT.

Go to the WordPress Dashboard > JetEngine > Query Builder and click on the “Add New button.

Choose the Terms Query Query Type, and below inside the General tab, choose the Taxonomy assigned to the CPT. Leave the rest of the settings as it is.

terms query in the query builder

Create the desired listings

Go to WordPress Dashboard > JetEngine > Listings and click on the ”Add New” button. Select “Query Builder” as the Listing source, and pick the newly created query from the Query field.

Also, do not forget to create the listing item for the CPT if you still do not have such.

query builder listing item

Design the Query listing template

For the Query listing item, add two sections with the widget to display the term title. In our case, it is the Dynamic Field widget (Source: “Post/Term/User/Object Data”; Object Field: “Term name”).

dynamic field general settings in elementor

Set the different styles for the sections.

design for the section

Adjust Dynamic Visibility settings

Make sure that the Dynamic Visibility module is activated in the JetEngine settings.

Set the dynamic visibility for the sections: click on the Section > Advanced > Dynamic Visibility tab. Then activate the Enable toggle and set the “Show element if condition met” option, “Equal” Conditions. Click on the Dynamic Tags icon, choose “Current ID” from the Macros list, paste the next macro %current_id%{“context”:”wp_object”}  into the Value field.

For the second section, repeat the same actions, except for the Visibility condition type: choose “Hide element if condition met.”

dynamic visibility of the section

Adding Listing Grid to the Archive template

Keep in mind that the Listing Grid should be placed on the archive page template. So go to the WordPress Dashboard > Crocoblock > Theme Builder and press the “Create new page template” and “Add Condition” buttons (select “Include” – “Archive” – “All archives” of your CPT, in our case, it is “All Tutorials Archive”).

theme builder template visibility conditions

Add the section with two columns; each should have the Listing Grid widget inside. One for the Query listing we created before and one for the CPT listing.

elementor plugin archive navigator

Check the final result.

final result on the front end
Was this article helpful?
YesNo
Still need help?
Submit a request