Content Templates let you design custom templates for WordPress content, using only HTML and no PHP.

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.

If you are new to Views plugin, we recommend that you start with Views plugin training course. You can jump right in to the section on designing single-item templates with Content Templates.

1. Creating a Content Template

Go to Toolset->Content Templates and create a new Content Template.

1. Create a new Content Template 2. Choose for what content types it’s for 3. Give it a name
new-content-template

When you create the template, you can already choose for what content it will be used. You can select the content that will display with the template at this stage, or leave the new template ‘unassigned’. You can also apply it to content later.

2. Add fields to the template

To add content fields, click on Fields and Views. You will see a list of all the available fields. Click on any field to insert the shortcode into the template.

1. Click on Fields and Views 2. Choose the field to insert 3. The shortcode for the field is inserted to the Content Template

3. Design the Content Template using HTML

Content Templates work like ordinary WordPress content. Use HTML tags set 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.

Content Template with HTML tags for styling
Content Template with HTML tags for styling

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’re actually creating page templates. Read more about editing Content Templates to learn about styling with HTML/CSS, adding fields and the different editor options.

4. 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.

1. Click to open the CSS or JS editors 2. Add the styling or JS that you need 3. Update the Content Template
update-button

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.

5. Assign the Content Template to the site’s content

When you create the Content Template, you choose what content will use it. To change this initial setting, go to the Usage section.

1. Choose the content types that will use this Content Template. Update the Content Template to apply. 2. If some of that content doesn’t yet use the template, you will see a warning button. Click on it. 3. See how many items are not using the template and confirm the change.

6. See the Content Template in action

Once you’ve assigned the Content Template to the content, view it on the front-end.

A page styled with a Content Template, showing also the theme elements
A page styled with a Content Template, showing also the theme elements

Keep in mind that the Content Template designs the content part of the page. The page header, menu, sidebars and footer still come from the theme.