View Templates let you create page templates from the WordPress admin, without any coding.
You edit View Templates as regular HTML and insert custom fields, standard fields and taxonomy, using the View menu.
- Code-free website development
- Design without leaving the WordPress admin
- Easy design with syntax highlighting
View Templates are one of the powerful features in Views plugin.
Already purchased? Skip to tutorial
View Template Highlights
When you use View Templates, you’ll be able to create any page template, including any field, right from within WordPress. It’s not going to be just easier and faster, but also a lot more flexible than hard-coded PHP templates.
- Insert fields from Views GUI – Click on the V icon, from either Visual or HTML modes and choose the field to insert. If you have many field types, you’ll love the instant Search tool.
- Set field attributes from Views GUI – In addition to inserting fields, Views let you choose their properties. For example, set size for images, anchor text for links and values to checkboxes.
- Edit View Templates in Visual or RAW modes – ever tried to create valid HTML with WordPress? RAW mode lets you bypass all the line breaks and paragraph injections. You’ll be able to build forms and any other HTML, without any WordPress ‘magic’.
- Use View Templates in Views too – View Templates work like ‘subroutines’ for your site’s layout. You can use the in Views, to achieve complex visual display, using simple code.
Using View Templates
Step 1 – Create a new View Template
Let’s create a simple View Template for a real estate website. To create a dynamic template with Views, navigate to View Templates > Add New.
The View Template 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.
Step 2 – Add Fields to the template
To add content fields, click on the V icon at the top. You’ll see a list of all the available fields. Click on any field to insert it to the template. You can use the Search feature to instantly locate fields by their names.
Step 3 – Design the template using HTML tags
View Templates work like ordinary WordPress content. Use HTML tags set control the layout of the template. You can add classes and styles to any Views shortcodes.
Step 4 – Style the Template
View Templates make it easy for you to separate between layout and styling. A CSS editing section, complete with syntax highlighting will let you enter the CSS for this template.
You don’t need to worry about loading that CSS or adding it to the theme. Views adds it automatically to the output of any content that uses that View Template.
Step 5 – Use the View Template to Display Content
Once you’ve created a View Template, you can assign it to various content types or to specific content items.
When you edit content, you will see a new Content Template selector, where you can choose content for each page separately.
When you want to assign a View Template to all content of a certain type, go to Views > Settings.
Look at the section called View Template for Post Types. Click on the Edit button to make changes.
To complete this operation, you need to instruct Views to apply that View Template to existing content. Views will report how many posts are actually using that View Template. Use the update button to change existing content to your new selection.
Step 6 -See the View Template in Action
You’re practically done. Now, just add content to your Property post type and you’ll be able to see your new View Template in action.