Designing WordPress Content with Content Templates

content-template
Designing WordPress content (3:30 minutes)

Content Templates let you create page templates from the WordPress admin.

Watch

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 V icon. 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 V icon 2. Choose the field to insert 3. The shortcode for the field is inserted to the Content Template
v-icon select-field shortcode-added

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

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-js content-template-css-editor 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. Apply the Content Template to content

When you create the Content Template, you choose which content types it will design. However, you can change this setting at any time.

From the Content template settings you can choose the Single post where this Content will be displayed. Then, apply it to existing content.

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.