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.

  1. 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”.
  2. Screenshot of a View Query section
  3. 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.

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

    Screenshot of a View Loop Output section

    Watch the video for a demonstration of using Views to create custom lists of content.

    Learn-by-doing

    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.

    Screenshot of a View listing Services on the front-end

    Add a View cell to the home page

    1. Edit the home page ‘Meet ABC Consulting’ with Layouts.
    2. Insert a new row beneath the first row that contains the main Visual Editor cell as shown below.
    3. Screenshot of adding a row to the home page Content Layout
    4. Add a View cell to this row. We added a cell with a width of 10 columns, leaving a column gap on either side.
    5. Choose to create a new View which displays all results.
    6. Screenshot of inserting a new View cell
    7. Give the View a name (e.g. “Our Services”)
    8. In the Query section choose Services posts for the Content Selection.
    9. Order the Services by post title, ascending.
    10. In the Loop Output section, start the Loop Wizard.
    11. Choose to display the posts in a 3 column Bootstrap grid.
    12. Screenshot of Loop Wizard
    13. Add the Service image custom field and post title as a link.
    14. Screenshot of adding Service fields with the Loop Wizard
    15. Before finishing the wizard, edit the Service image field options and choose the Medium size and center alignment.
    16. Finish the wizard
    17. 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.

    18. 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.
    19. Screenshot of the loop output template after editing
    20. Save the View and return to the Layouts Editor
    21. Preview the results before you Save the page.

    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.

    Need help?

    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

    What’s next?

    Step 7 Filter content lists and add custom search