Stand with Ukraine. Fight for freedom and democracy

Donate
Back to contents

How to Create an Archive Page Template for the Custom Taxonomy

 

Get to know how to create an Archive Page template for the JetEngine custom taxonomy to display it in the form of a listing with the help of the Listing Grid widget.

Tutorial requirements:

With JetEngine and JetThemeCore plugins, you can create an Archive Page template even for the custom taxonomy. That’s an opportunity to style posts dedicated to each taxonomy and specific terms of this taxonomy.

How to Create an Archive Page Template in the Elementor Editor

Creating a Listing template for an Archive

1 Step — The first thing you should do is to create a listing template for the taxonomy. Go to JetEngine > Listings and click on the “Add New” button.

jetengine listing items

2 Step — In the pop-up window, select “Terms” in the Listing source field.

3 Step — Then, choose a taxonomy for which you need to create an archive. In my case, it is the “City.”

4 Step — Select the “Elementor” editor in the Listing view field.

5 Step — Type the Listing item name and click the “Create Listing Item” button.

listing item creation

6 Step — In the Elementor editor, you need to drag and drop Dynamic Widgets to create a template for the chosen taxonomy.

In my case, I need to display the term name, description, and image. So I drop the Dynamic Field widget twice, and in the Object Field block, select “Term name” in the first widget and “Term description” in the second.

dynamic field editing

Also, I drag the Dynamic Field widget once again and select the “Meta Data” option in the Source field. Then, select the needed Meta Field. In my case, it is Image.

meta field metadata source

Take into consideration that for the image that can be displayed, you should enable the Filter field output option. Then, select the “Get image by ID” option from the Callback dropdown.

filter field output

7 Step — Finally, click the “Publish/Update” button and go back to the Dashboard.

Creating an Archive Page template for the Taxonomy

1 Step — Go to the Crocoblock > Theme Builder tab on the WordPress Dashboard and hit the “Create new page template” button.

crocoblock theme builder

2 Step — In the appeared pop-up, click the “Add Condition” button, select the “Include,” “Archive,” and “CPT Taxonomy” conditions, and in the last drop-down menu, choose the needed taxonomy. Then, hit the “Create” button.

page template conditions

3 Step — In the newly created page template, push the “Add body” and “Create template” buttons.

create body template

4 Step — In the pop-up, select the “Elementor” Template content type, enter the Template name and press the “Create” button.

create a template pop-up

5 Step — In the next pop-up, push the “Go to editor” button.

template created pop-up

6 Step — Place the Listing Grid widget on the archive template and pick the needed Listing from the drop-down menu. Customize the Listing Grid settings whatever you want and hit the “Publish/Update” button.

listing grid on the archive template

7 Step — Return to Crocoblock > Theme Builder and add the header and footer to the Archive Page template. You can add already created templates from the library or create new ones.

archive page template with body header and footer

8 Step — Observe the Archive Page template on the front end.

archive page template

How to Create an Archive Page Template in the Gutenberg (Block) Editor

Creating a Listing Template for an Archive

1 Step — The first thing you should do is to create a listing template for the taxonomy. Go to JetEngine > Listings and click on the “Add New” button.

2 Step — In the pop-up window, select “Terms” in the Listing source field.

3 Step — Then, choose a taxonomy for which you need to create an archive. In my case, it is the “City.”

4 Step — Select the “Blocks (Gutenberg)” editor in the Listing view field.

5 Step — Type the Listing item name and click the “Create Listing Item” button.

listing item creation pop-up

6 Step — In the Gutenberg editor, you need to drag and drop Dynamic Blocks to create a template for the chosen taxonomy.

In my case, I need to display the term name, description, and image. So I drop the Dynamic Field block twice, and in the Object Field block, select “Term name” in the first widget and “Term description” in the second.

dynamic field post object

Also, I drag the Dynamic Field widget once again and select the “Meta Data” option in the Source field. Then, select the needed Meta Field. In my case, it is Image.

meta data source Gutenberg

Take into consideration that for the image that can be displayed, you should enable the Filter field output option. Then, select the “Get image by ID” option from the Callback dropdown.

filter field output Gutenberg

7 Step — Finally, click the “Publish/Update” button and go back to the Dashboard.

Creating an Archive Page template for the Taxonomy

1 Step — Go to the Crocoblock > Theme Builder tab on the WordPress Dashboard and hit the “Create new page template” button.

crocoblock theme builder

2 Step — In the appeared pop-up, click the “Add Condition” button, select the “Include,” “Archive,” and “CPT Taxonomy” conditions, and in the last drop-down menu, choose the needed taxonomy. Then, hit the “Create” button.

page template conditions

3 Step — In the newly created page template, push the “Add body” and “Create template” buttons.

create body template

4 Step — In the pop-up, select the “Block Editor” Template content type, enter the Template name and press the “Create” button.

create a template

5 Step — In the next pop-up, push the “Go to editor” button.

template created pop-up

6 Step — Place the Listing Grid block on the archive template and pick the needed Listing from the drop-down menu. Customize the Listing Grid settings whatever you want and hit the “Publish/Update” button.

listing grid on the archive template in the block editor

7 Step — Return to Crocoblock > Theme Builder and add the header and footer to the Archive Page template. You can add already created templates from the library or create new ones.

archive page template with body header footer

8 Step — Observe the Archive Page template on the front end.

archive page template with body template created in the block editor

That’s it. Now you know how to create the Archive Page template for the custom taxonomy in WordPress, using the JetThemeCore and JetEngine plugins.