Toolset offers you an easy way to design templates for custom post types using Visual Composer. You will design the template in VC once for the entire post type.

Templates for entire custom post types

Without Toolset, you need to create your design in Visual Composer for each item of the custom post type. With Toolset, you design once, include place-holders for custom fields, and your design appears automatically for the entire custom post type.

One Visual Composer Design for all Items of Your Custom Type

The integration of Visual Composer and Toolset works like this:

  1. You continue using Visual Composer to create your page designs.
  2. There is no need to “hard code” contents like titles, texts, or images into your designs. Instead, you insert fields into your Visual Composer designs, using Toolset.
  3. There is no need to adjust and re-use the same template for every single post. You use Toolset to apply one design to multiple items.

Customize the Design of All Posts at Once

Eventually, every design would need to be tweaked after a while. It may be for improving its visual appeal, usability, or to freshen it up a bit.

To make changes to all posts at once, you only need to edit the template you originally created. Changes are reflected for all the posts the template is used for.

Inserting a field into the Visual Composer design is reflected on the front-end for all posts
Inserting a field into the Visual Composer design is reflected on the front-end for all posts

With a single account, you will be able to build as many sites as you need for yourself and for your clients. Our 30-days refunds give you the peace of mind, knowing that if you don’t like our approach to building sites, you get all your money back.

Buy Toolset – $149

Getting Started

To start designing templates with Toolset and Visual Composer, make sure you have the following plugins installed and activated in your website:

  • Visual Composer
  • Toolset Views
  • Toolset Types

Designing Content Templates with Visual Composer

Go to Toolset Dashboard and click Create template for the content type you want to design templates for.

Creating a template through Toolset Dashboard
Creating a template through Toolset Dashboard

Whether your theme comes with Visual Composer or you have installed it manually, you will see a Visual Composer button in the editor. Click on it to edit the template with the page builder.

Adding Fields to the Visual Composer Design

Remember that you are using Visual Composer to design a template. This means that you want to insert fields and not the actual data that is saved in these fields. For example, in the template for our “Book”, we will include the field called “Book image” at the top-left. We are not inserting an image, but a field that will display the proper image for each book.

To insert fields into the design, use the Text Block cell.

Fields and Views button in Text Block

Notice the new Fields and Views button in the cell editor. Click on it to insert fields or a list of contents and select the one you want to add.

Dialog box with available shortcodes
Dialog box with available shortcodes

For now, we will focus on using fields. We will talk about Views in the next section. After you have inserted the field, you should see a shortcode for it.

Field in Visual Composer cell editor

You can insert several fields into the same cell or use a separate cell for each field.

Using Field Value for Other Cell Types

In the previous example, we used a Text Block cell to insert a field. Visual Composer comes with many useful types of cells, which you can also integrate with Toolset.

For example, you can use a Message Box cell and, depending on a Toolset field that indicates if the book is on sale, provide the relevant message on the front-end.

Setting a condition depending on a Toolset field
Setting a condition depending on a Toolset field

You can use the conditional output button that Toolset offers and display a message on the front-end, only if the “Book on Sale” field of a specific book is checked.

Message box depending on a field condition
Message box depending on a field condition

Adding Lists of Content to Visual Composer Designs

Sometimes you need to include lists of content in the template. For example, in our template for Books, we also want to display “Related books”. This is a list of books, that belongs to the same category as the book being displayed.

Toolset lets you build lists of items using Views. A View will load content from the database and display it any way you want.

To create a list of “related books”, we need to:

  1. Create the “related books” View
  2. Design how the “related books” display
  3. Add the “related books” View to the template

Shortcodes from 3rd party plugins, including Visual Composer, will not work properly when any type of AJAX call is used inside a View, Content Template, or a WordPress Archive. This includes AJAX pagination and custom search.

Let’s assume that you have already created the “related books” View.

Again, insert a Text Block cell to the Visual Composer design, at the place where you want to display the list of related books. Click on the Fields and Views button and, this time, scroll down and find the View that you want to add. Select it and insert.

Viewing the Design with Content on the Front-end

Since we are designing a template, we cannot directly preview it. This is because you need to see how the template displays some content.

To see your template in action, go to any content item and view it on the front-end.

Link to view the book on the front-end
Link to view the book on the front-end

Now you see what your site’s content looks like when displayed with the content that you just designed.

Final design with fields on the front-end
Final design with fields on the front-end

With a single account, you will be able to build as many sites as you need for yourself and for your clients. Our 30-days refunds give you the peace of mind, knowing that if you don’t like our approach to building sites, you get all your money back.

Buy Toolset – $149