Toolset allows you to create lists of content and display them anywhere in your site. This may be lists of regular posts, pages, or custom posts (like Tours or News). In Toolset this is called a View and is one of the most popular Toolset features.

Toolset allows you to use WPBakery Page Builder (formerly Visual Composer) to design how single entries are displayed in your custom list of content. In our example, we create a list of tours, where “Tour” is our custom post type.

Toolset and WPBakery Page Builder
List of posts with Toolset and WPBakery Page Builder

 

Creating the View

 

    1. Go to Toolset -> Dashboard.

      Toolset and WPBakery Page Builder
      Toolset dashboard – Creating a View for Tours

    2. Locate the custom post type for which you want to create the View (“Tours”, in our example) and click the Create View button.

      Toolset and WPBakery Page Builder
      Adding a new View

    3. Give your View a name such as “List of Tours”. Select Display all results, and click Create View.
    4. You are taken to the View editing page.

      Toolset and WPBakery Page Builder
      Creating the View

    5. Scroll down to the Loop Output Editor section and click on the Loop Wizard button.

      Toolset and WPBakery Page Builder
      Toolset WP Bakery page builder Loop Wizard

    6. In the Loop Wizard that appears, select Unformatted, and click Next.

      Toolset and WPBakery Page Builder
      Displaying the loop

    7. As we will insert all the fields using the WPBakery Page Builder, click to add only one field. For example, select the Post Title.

      Toolset and WPBakery Page Builder
      Select the fields to include in the loop

    8. Select the Use a Content Template to group the fields in this loop option and click Finish.

      Toolset and WPBakery Page Builder
      Selecting the fields to include in the loop

    9. Stay on the View page as we are not done yet.
    10. Click the Scroll down to the Content Template button.

Toolset and WPBakery Page Builder
Scroll to the content template butotn

 

You are taken to the Template for this View section. Use the WPBakery Page Builder to design how a single entry of your View is displayed.

Designing the single entries using WPBakery Page Builder

Now that we have created a list of Tours, we need to design how single post entries are displayed in our list. We will use the WPBakery Page Builder to control the content of a single Tour post, and the expected result is shown below.

Tour – Single Entry

 

    1. Click the WPBakery Page Builder button.
    2. Click the Edit WPBakery Page Builder button.
    3. Now you can see the familiar WPBakery Page Builder interface—use it to design a single post entry.

      Toolset and WPBakery Page Builder
      Launching WPBakery Page Builder

    4. Now we are going to insert the post fields (title, featured image) into some Text Blocks and some other custom fields (tour price, tour duration) into a Tab Element. To insert a field, follow the steps below:
      a. In our example, we insert a Text Block:

      Toolset and WPBakery Page Builder
      Text Block

      To insert fields into any other types of Elements (like a Tab for example), please refer to our page about inserting fields into Elements.
      b. Click the Fields and Views button.

      Toolset and WPBakery Page Builder
      Fields and Views button

      c. A dialog with a list of fields and views appears as shown below:

      Toolset and WPBakery Page Builder
      Choosing and inserting the View

      d. Click the field you want to insert and then Insert shortcode. In our example, we start with the post’s featured image. Your field is added in double curly brackets:Toolset and WPBakery Page Builder
      e. Press Save Changes to close the Element dialog.

      Toolset and WPBakery Page Builder
      Save all the sections at once.

 

Repeat the above steps for each of the fields you want to add. In our example, these would be:

    1. Post Title
    2. Tour Price (custom price)
    3. Duration (custom field)
    4. Tour Types (custom taxonomy)

 

Once you are done creating the template, press Save all sections at once.

Toolset and WPBakery Page Builder
Content Template for a single tour entry created with Toolset and WPBakery Page Builder

 

In the next section, we show you how to display this list.

Inserting a Toolset View using WPBakery Page Builder

Now that your View is ready, you can insert it anywhere you want: in a page, a WPBakery Page Builder Element, or even a widget.

To insert a View into a regular page built with WPBakery Page Builder simply follow the steps below:

    1. Create a new page.
    2. Click the Fields and Views button.
    3. Locate the View you just created, and insert it.
    4. Save your changes.
    5. Visit your page—it should display the View that you created:Toolset and WPBakery Page Builder

Shortcode is inserted

 

Creating custom searches and displaying content on a map

Besides listing your posts and pages, Toolset allows you to create custom searches and easily display content on a Google map.

This way, you allow visitors to filter the contents by different parameters you enable. Below are some examples of custom searches you can build with Toolset and insert into your pages.

Toolset and WPBakery Page Builder
Custom search created with Toolset

Toolset and WPBakery Page Builder
Display your tours on a map with Toolset

Learn more about how to build custom search with Toolset and how to display your content on a map.

Display only content that meets specific criteria

You can limit the list of your posts to display only those that meet specific criteria. For example, we can display only Tour posts that have a custom field, “Special Offer,” marked as checked. This is done using the Query Filter section in the View editor:

Toolset and WPBakery Page Builder
Using filters to display posts that meet certain criteria.

 

What’s next?

Next Front-end forms to submit content and register users

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.