Views lets you perform custom queries to generate lists of content that are output according to your design, as simple lists, or visual grids, or even sliders that transition between posts.
Views can be added to individual pages or to post templates using the Layouts Editor by inserting a View cell.
A View has two parts.
- The Query section determines what content to load from the database, and is where you specify the type of content, set options to limit the number of items returned and how they are ordered, and can add filters to narrow down the results, e.g. to only return the most recent 5 posts with a category “Featured”.
- The Loop Output section renders the results. The Loop Output Editor contains largely structural markup that determines whether the results appear as a simple list, in a grid, or a table, and you use the Loop Wizard to generate this markup.
The fields that are output for each item are typically organised in a Content Template that appears directly below the Loop Output Editor.
- Edit the home page ‘Meet ABC Consulting’ with Layouts.
- Insert a new row beneath the first row that contains the main Visual Editor cell as shown below.
- Add a View cell to this row. We added a cell with a width of 10 columns, leaving a column gap on either side.
- Choose to create a new View which displays all results.
- Give the View a name (e.g. “Our Services”)
- In the Query section choose Services posts for the Content Selection.
- Order the Services by post title, ascending.
- In the Loop Output section, start the Loop Wizard.
- Choose to display the posts in a 3 column Bootstrap grid.
- Add the Service image custom field and post title as a link.
- Before finishing the wizard, edit the Service image field options and choose the Medium size and center alignment.
- Finish the wizard
- Edit the template and wrap the image field in an anchor tag to link to the post and add heading tags to our post title. The url for the post is created by a shortcode wpv-post-url which we insert with the Fields and Views button.
- Save the View and return to the Layouts Editor
- Preview the results before you Save the page.
Here the titles of the 5 most recent featured posts from the above query are simply output as a crude list of links, generated by the shortcode wpv-post-link.
Watch the video for a demonstration of using Views to create custom lists of content.
We’ll update the home page of our training site by adding a row with a View which lists the services offered in a grid.
Add a View cell to the home page
This will insert the structural markup in the Loop Output editor to display the posts in a grid, and the fields to display are organised in a template immediately below.
The final step is to edit this template to add some simple markup that gives us more control over styling the content.
At the bottom of the page you’ll find another View cell that generates a list of featured posts that are displayed in a slider which you can inspect to see how it works, paying particular attention to the pagination settings.
Go to the Getting Started support page and leave a comment. Nigel, the author of these pages, or one of the other Toolset team members will reply to you.
If you find this guide useful or have suggestions on how to improve it please add a comment to the support page