In WordPress, all post types and taxonomies have an archive page, by default. With Toolset, you can easily customize these archive pages and you can use Beaver Builder to design how individual posts are listed on them. The real power that Toolset offers here is the possibility to easily add a custom search to your archives and display information on a Google Map.
In this tutorial, we use an example of creating an archive page for our custom “Tours” post type.
Go to your Toolset Dashboard and click on the Create Archive button within the row of your custom post type.
In the pop-up dialog that appears, click on the Create WordPress Archive button. A template for this archive is created and automatically assigned to your custom post type “Tours”.
First, we need to enable the Beaver Builder for it.
- Scroll down to the Loop Output Editor.
- Click on the Loop Wizard button.
- In this step of the wizard, you must select whether to display posts in a grid, table, list, or in any other way. In our example, we are going to display our “Tours” in a two-column grid.
- Select Bootstrap grid and set Number of columns at 2.
- Click on the Next button.
- In the second step of the wizard, we must select at least one field that will be displayed for each post. All other fields can be selected later using Beaver Builder.
- Click on the Add a field button.
- Select Post title with a link.
- Make sure to check the Use a Content Template to group the fields in this loop option, as shown below:
- Click Finish.
- Scroll down to the Templates for this WordPress Archive section. In this editor, you must design the content for a single product entry. We are going to design this using Beaver Builder.
- Press the Update button:
- Click the Page Builder button that features the Beaver Builder logo, to enable Beaver Builder for this template.
- Click on the Edit with Page Builder button.
A new tab opens with a page where you design the Content Template using Beaver Builder. Again, this template defines how single posts are listed on your archive page.
In the Template section, click the Launch Page Builder button.
You are taken to the classic Beaver Builder interface on the front-end. Use the Beaver Builder basic building blocks (Rows, Columns, and Modules) to design the content of your Tour entry. As you can see, the post link has already been inserted while we were creating the archive.
Please note that the front-end editing interface will display only a single post and not the list of posts. However, the way you design the single post here will be exactly reflected on your archive page.
Use the Preview this Content Template with dropdown menu, to select an item used when designing and previewing this template.
1. Let’s start by inserting the “Price of the Tour” field:
a. Insert a new Text Editor module.
b. Click on Fields and Views.
c. Locate the Tours section.
d. Choose the WooCommerce Product Price field to insert it. You can type in the “Price of the tour:” label manually.
2. Repeat the previous steps to insert more fields to your Tours. Note that you are free to use any design blocks, not only the Text Editor module. The difference is that instead of the Fields and Views button, you will see a round “plus” button next to the fields where it is possible to insert Toolset fields.
3. This is how your Content Template may look like after designing it:
4. Click Done in the top right corner of the editing page and then Publish.
5. Switch back to the tab of your browser that shows Edit WordPress Archive and click on Update.
You may now visit your archive page on the front-end to see it in action.
You can also add a custom search to your archive page so that users can filter posts by custom fields and taxonomies:
1. Scroll up the WordPress Archive screen to the top and open Screen Options.
2. Select the option Display the archive as a custom search.
3. Scroll down to the Filter Editor, add your filters, and add the submit button.
You can find a detailed guide about this process on the Building Custom Searches page.