When you create custom posts and extend them with custom fields and taxonomies, theme templates won’t display that extra content on the front end. To see more than the post title, post body, and standard fields such as post author and publication date you need to design your own templates.

Layouts provides a drag-and-drop editor to create templates for displaying single posts that include the content you specify. (The same editor is available to design post archives and individual posts and pages.)

You design a Template Layout and assign it to a post type to use it to render all single posts of that type. The same template can be re-used for different post types, and you can override the template on individual posts.

The header, footer, and sidebars are generated by your theme, while Layouts renders the content area.

Create a Template Layout

To create a new template go to the Toolset > Dashboard page and click the Create template button in the row of your custom post type which will open the template with the Layouts Editor.

Screenshot of an empty Template Layout

The Layouts grid

Layouts are based on the Bootstrap grid, with content arranged in rows of 12 columns. Content is inserted using cells, and there are different kinds of cells to add different kinds of content.

The Visual Editor cell is a general-purpose cell used to add static text and to insert shortcodes for dynamic content such as custom fields and taxonomy terms of the post being displayed.

The Post Content cell renders the contents of the post body. Use an Image cell to insert an image from your media library.

You can see a full list of cell types here.

Adding dynamic content to templates

Toolset makes widespread use of shortcodes in templates to generate content. The shortcodes can be entered manually, but typically you will use buttons such as the Fields and Views button to generate the shortcode with the required attributes or options.

A template for events might render the event name using the shortcode [wpv-post-title] which displays the standard post title field.

It might render the time and date of the event using the shortcode [types field='event-date' style='text' format='F j, Y g:i a'][/types]

The taxonomy for the type of event might be rendered using a shortcode such as [wpv-post-taxonomy type="event-type"]

Watch the video to see the Layouts Editor used to design a post template.

Learn by doing

In your training site go to the Toolset > Dashboard page and create a template for the Consultant post type.

Here’s how the final Template Layout will look.

Screenshot of Consultant Template Layout

Design the template

    1. In the first row add a Visual Editor cell for the profile image
    2. In the same row add a Visual Editor cell for the custom fields
      • Insert shortcodes to output the custom fields values using the Fields and Views button
      • Insert the expertise field
      • Insert the consultant-email field
      • Insert the consultant-phone field
      • Insert the hourly-rate field
      • Insert the site-visits field (specify “Yes” and “No” as the values for the selected and not-selected states)
      • Insert the language taxonomy
      • Add HTML markup as required to arrange and label the fields, like so:
Screenshot of consultant fields in Visual Editor cell
  1. Add a new row and insert a Visual Editor cell for a sub-heading with the consultant’s name (the consultant’s name is the post title and can be output using the wpv-post-title shortcode)
  2. Add a new row then insert a Post Content cell to output the post body that contains the description of the consultant
  3. Use the Preview layout button at any time to see how the design looks on the front end.
  4. Save the template when done.

Need help?

Go to the Getting Started support page and leave a comment. Nigel, the author of these pages, or one of the other Toolset team members will reply to you.

If you find this guide useful or have suggestions on how to improve it please add a comment to the support page

What’s next?

Step 4 Customize post archives