Your Views can display content with any HTML, media, links, fields and taxonomy. You can create Views for simple content listings and for advanced elements like custom searches. To create beautiful Views, you’ll need to have background in HTML and CSS, but no PHP coding is needed.
In newly created Views, the usage of the Loop Wizard is recommended. The Loop Wizard button is highlighted and the whole editor is disabled until you take an action on it.
1. Creating a View
First, you need to create a new View. After you install Views plugin, you will find a ‘Views’ entry in your site’s admin dashboard. Click on Toolset->Views.
|1. Go the to Views menu and create a new View||2. Choose what the View is for||3. Give the View a name|
2. Choosing what to display
A View can display post types, taxonomy or users. Post types covers the standard WordPress posts and pages, as well as custom post types. Taxonomy includes tags, categories and any custom taxonomy. Users are the WordPress users in the site.
In this example, we display blog posts.
The query section lets you set up filters for loading specific content. For example, you can filter posts based on their IDs, date, custom fields, and other. In this example, we don’t use filters.
You can find detailed information about all types of filters on the following documentation pages:
- Filtering Views Query by Post ID
- Filtering Views Query by Custom Fields
- Filtering Views Query by Taxonomy
- Filtering Posts by User-Selected Taxonomy
- Filtering Views Query by Post Status
- Filtering Views Query by Author
- Filtering Views Query by Date
- Filtering Views for a specific text string – search
- Date Filters
3. Styling the output
The Loop Output section determines how the View displays the content that it loads. Start with the Loop Wizard to create an initial layout. Then, continue editing it using simple HTML and fields.
|1. Click on the Loop Wizard button||2. Choose your preferred style||3. Add fields|
The resulting Loop Output will include a loop with the style and the fields that you’ve selected. In most cases, you should edit it and apply your formatting. Editing the Loop Output is just like writing plain HTML. Use any HTML that you like and add more fields using the Fields and Views button.
After a bit of editing, the Loop Output in our example is:
[wpv-layout-start] [wpv-items-found] <!-- wpv-loop-start --> <ul> <wpv-loop> <li> <h2>[wpv-post-link]</h2> <p><em>[wpv-post-date]</em></p> [wpv-post-excerpt] <p><a href="[wpv-post-url]">Read more...</a></p> </li> </wpv-loop> </ul> <!-- wpv-loop-end --> [/wpv-items-found] [wpv-no-items-found] [wpml-string context="wpv-views"]<strong>No items found</strong>[/wpml-string] [/wpv-no-items-found] [wpv-layout-end]
Views loop basics:
- When there are results (something found in the query), the View will loop everything between [wpv-items-found] and [/wpv-items-found]. If nothing is found, it outputs the content between [wpv-no-items-found] and [/wpv-no-items-found].
- Everything between <wpv-loop> and </wpv-loop> will repeat for each item the View loaded from the database.
So, the View actually implements a loop, which you can fully control. You determine what displays before the loop and for each item in the loop.
Our example View will output this HTML:
<ul> <li> ... content for post 1 ... </li> <li> ... content for post 2 ... </li> <li> ... content for post 3 ... </li> </ul>
It starts with a list tag. Then, there are list items for each post and a closing list tag. Views doesn’t output anything for its own control tags. The only output you will get is for the HTML that you add and your shortcodes.
Each of the list items in the loop will look like this:
<li> <h2><a href="http://example.com/?p=6">Third post</a></h2> <p><em>December 16, 2013</em></p> <p>Our mission today is to use a View, to display a list of posts...</p> <p><a href="http://example.com/?p=6">Read more...</a></p> </li>
You have far greater control than just displaying every item in the same way. At the end of this page, you will find links to documentation about customizing the Views loop.
4. Displaying the View
Finally, you need to add the View somewhere, in order to display it. In this example, we display the View inside a WordPress page.
|1. When editing content, click on the Fields and Views button to insert a View||2. Select the View to insert||3. The View shortcode is added to the content|
Then, when we visit the page, where the View is inserted, we can see the View, inline with the page’s content.
You can display Views inline with content, as widgets and inside other Views and Content Templates.
To display a View as a widget, go to Appearance->Widgets. Look for the WP Views widget and drag it to a widget area. Then, select the View to display.