When you add custom content types to a site, you should design how “single” items display. Most themes will display your custom content without any custom fields. Content Templates let you create your own templates, including any field that belongs to the content, using simple HTML and without writing PHP.

First, remember to install and activate Toolset Views plugin.

Creating a Content Template

Go to Toolset -> Dashboard and click Create Content Template button in the row of the post type you want to design a template for.

Creating a Content Template from the Toolset Dashboard page
Creating a Content Template from the Toolset Dashboard page

Adding fields to the template

To add post fields to your template, scroll to the main editor in the Template section and click the Fields and Views button. A dialog with a list of all available fields will appear. Click on any field to insert the shortcode into the template.

Using the Fields and Views button to insert post fields into the template
Using the Fields and Views button to insert post fields into the template

Designing the Content Template using HTML

Content Templates work like ordinary WordPress content. Use HTML tags to control the layout of the template. You can wrap shortcodes with HTML tags and you can also add classes and styles directly to all shortcodes.

You can also easily arrange post information and fields into columns, by using the Grid button.

Template editor with some custom HTML markup
Template editor with some custom HTML markup

The editor includes a convenient syntax highlighter, which lets you easily craft your HTML. It’s very similar to writing ordinary WordPress content, however, you are actually creating page templates.

Inline CSS and Javascript editors for Content Templates (optional)

Content Templates let you add your own CSS and Javascript, without having to edit theme files on the server.

The CSS and Javascript that you add to the Content Template will only load when that template is being used. This allows you to separate between the design of different content types in your site.

To add custom CSS or JS to a Content Template, simply click to expand the CSS editor or JS editor sections below the main Template editor.

Adding custom CSS and JS code to a template
Adding custom CSS and JS code to a template

You don’t need to worry about loading that CSS and Javascript. Views adds it automatically to the output of any content that uses that Content Template.

Need help?

Go to the Getting Started support page, leave a comment and we will reply to you.

What’s next?

Continue to the page about displaying custom lists of content or go back to the one about creating templates to display custom posts.