Content Templates, by Views plugin, let you design how WordPress content is displayed on the site’s front-end.

Your templates can include any HTML, media, links, fields and taxonomy. Designing templates is similar to editing content in the WordPress editor. To create beautiful templates, you need to have background in HTML and CSS, but no PHP programming is needed.

1. Creating a Content Template

Once you install Views plugin, you can create new Content Templates. Go to Views->Content Templates and create a new one.

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

2. Add fields to the template

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

1. Click on the Fields and Views button 2. Choose the field to insert 3. The shortcode for the field is inserted to the Content Template
v-icon1 select-field shortcode-added1

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.

Some fields, like images, allow you to specify the CSS classes and add inline styles. When you add these fields, a popup dialog will open, with the field options. Click on the ‘Styling’ link in the field dialog to add the class and style.

Adding class and style to fields
Adding class and style to fields

In the Content Template Settings, you can override WordPress’ default and ensure that no paragraphs, line breaks or other unwanted markup is inserted into your template. You have full control over the final output.

Content templates - Settings Output mode
Content templates – Settings Output mode

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
content-template-css-js1 content-template-css-editor1 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. Display site content using the Content Template

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

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 icon. Click on it. 3. See how many items are not using the template and confirm the change.
choose-content-types apply-to-all-link confirm-apply-template

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.