Adding a View to a layout allows you to list any type of contents and also users. You can add pagination with AJAX loading and even add elaborate custom searches to your designs. You can use all of the Views features right from the Layouts drag-and-drop editor.
To add Views to your layouts, you simply need to insert the View cell and set the options for it.
In this tutorial, we will go through a typical usage scenario. Let’s say we are designing the home page of our site. So far, we have some general static content for it, as shown in the following image.
Our Home Page before adding the list of latest Articles
Layout for this Home Page before adding the View
Let’s go through the steps needed to add a list of the six latest “Articles” posts.
1. Insert the View cell
Following table shows the steps needed to insert a View cell into our layout.
What to do
Screenshot
Click on the plus button in the bottom-right corner of a row to add another row to the layout.
We want to add two rows, one where we will put a heading and the other where we will insert the actual View to list Articles.
Insert a Visual Editor cell into the top empty row we created in the previous step.
Add the “Latest Articles” text and select a “Heading 2” style for it in the editor dashboard.
Insert a View cell into the other empty row.
In the options that appear in the dialog, you can use the options that are selected by default and click the Create button.
2. Configuring the View
Now that you inserted the View cell into your layout, a new View was created and the View editor is shown in the dialog box. We have to configure the View, so that it shows the six latest Articles and style its output a bit.
The following table presents a list of steps to achieve this.
What to do
Screenshot
Select the “Articles” custom post type in the Content Selection section.
This “tells” the View to list only posts from the “Articles” post type.
In the Limit and Offset section, select the number of posts to list.
We chose six in our example.
Scroll down to the Loop Output section.
This section’s editor features some HTML markup there, including Views shortcodes.
We need to insert shortcodes that will display contents of our articles on the front-end.
The easiest way to insert the shortcodes is by using the Loop Wizard button.
In the Loop Wizard dialog box that opens select the Bootstrap Grid option. Grids allow us to output the list of posts in different ways, by specifying how many posts are shown per one row. A big advantage of the Bootstrap Grid is that it is responsive.
In the Bootstrap Grid Options select the number of columns for the grid.
Click the Next button.
It the next step of the Loop Wizard we need to select the fields we want to show for our posts.
Click the Add a field button to add a field.
In the drop-down menu next to each added field, select which type of field to use.
We added fields for Post date, Post title with a link and Post excerpt and clicked the Finish button.
You can leave the default settings for other options.
Loop Wizard has inserted all needed markup according to the settings we provided.
When you finish the Loop Wizard for the first time, a pop-up message will show and explain that the loop was inserted using a Content Template.
This means that instead of inserting the shortcodes for the post contents multiple times, the View actually calls a Content Template.
If you scroll down to the Templates for this View section, you will see the editor with shortcodes.
These are the exact shortcodes we added by using the Loop Wizard. This is the Content Template we mentioned in the previous step.
If we want to change the output of our “Articles” list, we can now do this directly by altering this Content Template here.
As you can see in the screenshot, we used some basic HTML styling to improve the visual appearance of our posts in the list.
That’s it! We can click the Save and Close this View and return to the layout button.
This is our layout after doing the above changes.
Wrapping up
Now that we finished inserting our View, our home page shows a list of latest “Articles”, as shown in the following image.
Our home page after we added the View to list the latest six Article posts
As we have seen in this tutorial, we first need to insert a View cell and then choose the options for it. This includes selecting the post fields we want to show and a layout (grid) we want to show the posts in.
Advanced Views features
In this tutorial, we covered the basics of loading content and displaying it with Views.
To make your Views even more powerful, read about:
