By default, all post types and taxonomies have an archive page in WordPress. Toolset allows you to customize these archive pages, and WPBakery Page Builder (formerly Visual Composer) allows you to design the how individual posts are listed on them.

If you are new to the idea of archives, please consult our short page about the meaning and importance of archive pages. And if you want to design the listing of your WooCommerce products, visit our page about creating a customized Shop page using WPBakery Page Builder and Toolset.

Through this tutorial, we will explain how to create an archive page containing a two-column list of all posts belonging to our custom “Tours” post type:

WPBakery and Toolset
Archives built with WCBakery Page Buidler

 

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

      WPBakery and Toolset
      Creating an Archive from the Toolset Dashboard

    2. In the pop-up dialog that appears, click on Create WordPress Archive. An archive is created and automatically assigned to your custom post type “Tours”:

WPBakery and Toolset
Adding a new WordPress archive called Tour.

 

Enabling the WPBakery Page Builder on your Archive page

The archive template is created, and in this example , it will be used for the Tours archive page, as shown below:

WPBakery and Toolset
Archive Editor Dialog

 

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

      WPBakery and Toolset
      Clicking on the loop wizard button

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

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

    6. In this step of the wizard, select the fields available for each listed post. We must select at least one field at this point. All other fields can be selected later using the WPBakery Builder.
      a. Click on the Add field button.
      b. Select Post title with a link.
      c. Make sure that the Content Template option has been checked when inserting fields, as shown below:

      WPBakery and Toolset
      Important setting: select Use a Content Template

      d. Click Finish.

    7. 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 the WPBakery Page Builder.
    8. Press the Update button:WPBakery and Toolset
    9. Start editing by using the WPBakery Page Builder:WPBakery and Toolset
    10. Click on the Edit with WPBakery Builder button:

WPBakery and Toolset

 

Designing your archive

As the Edit Content Template screen opens, you can design how single post entries are listed on your archive page by using the page builder:

WPBakery and Toolset

Use the WPBakery basic building blocks (Rows, Columns, and Elements) 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.

Use the Text Block, and then click the Fields and Views button to insert other fields. Note that you are free to use any design blocks, not only the Text Block.

1. Let’s start by inserting the “Price of the Tour” field:

a. Insert a new Text module.

b. Click on Fields and Views.

c. Locate the Tours section.

d. Choose the WooCommerce Product Price field to insert it.

WPBakery and Toolset

2. Repeat the previous steps to insert more fields to your Tours.

3. This is how your Content Template may look like after designing it:
WPBakery and Toolset4. Click Save all changes at once above your template.

WPBakery and Toolset5. Switch back to the tab of your browser that shows Edit WordPress Archive and click on Update.

WPBakery and Toolset
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:
WPBakery and Toolset

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.WPBakery and Toolset
    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 List posts with custom searches and maps

Need help?

If you need assistance with using Toolset in combination with WPBakery Page Builder, please visit our professional support forum dedicated to this topic.