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.

An archive page for a "Tours" custom post type designed with Beaver Builder
An archive page for a “Tours” custom post type designed with Beaver Builder

Creating a template for your archive

Go to your Toolset Dashboard and click on the Create Archive button within the row of your custom post type.

Creating an Archive from the Toolset Dashboard
Creating an Archive from the Toolset Dashboard

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”.

Enabling Beaver Builder for your archive page

First, we need to enable the Beaver Builder for it.

  1. Scroll down to the Loop Output Editor.
  2. Click on the Loop Wizard button.

Clicking on the loop wizard button
Clicking on the loop wizard button

  1. 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.
  2. Select Bootstrap grid and set Number of columns at 2.
  3. Click on the Next button.

Selecting how to display the listed posts
Selecting how to display the listed posts

  1. 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.
  1. Click on the Add a field button.
  2. Select Post title with a link.
  3. Make sure to check the Use a Content Template to group the fields in this loop option, as shown below:

Important setting: select "Use a Content Template"
Important setting: select “Use a Content Template”

  1. Click Finish.
  1. 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.
  2. Press the Update button:

You must update the section first
You must update the section first

  1. Click the Page Builder button that features the Beaver Builder logo, to enable Beaver Builder for this template.

Click to enable Beaver Builder for this template
Click to enable Beaver Builder for this template

  1. Click on the Edit with Page Builder button.

Click to start editing the template with Beaver Builder
Click to start editing the template with Beaver Builder

Designing your archive

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.

Launch Beaver Builder
Launch Beaver Builder

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.

Selecting a post for previewing your design
Selecting a post for previewing your design

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.

Shortcode for a Toolset custom field inserted into a module
Shortcode for a Toolset custom field inserted into a module

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.

The "plus" button on other modules
The “plus” button on other modules

3. This is how your Content Template may look like after designing it:

Example of a final design
Example of a final design

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:

Archive page with a custom search
Archive page with a custom search

Adding a search to your archive

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.

 

What’s next?

Next Best Practices When Creating Templates With Beaver Builder