A View loads content and displays it on the site’s front-end.

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.

If you are new to Views plugin, we recommend that you start with Views plugin training course. You can jump right in to the section on loading and displaying content with a View.

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
add-new-view choose-view-purpose name-the-view

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.

In this example, we display posts
In this example, we display 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:

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
Button to launch the Layout Wizard in Views select-layout-style 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:

Layout HTML
[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:

Layout HTML output
<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:

HTML sample of a single post
<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
click-v view-shortcode-inserted

Then, when we visit the page, where the View is inserted, we can see the View, inline with the page’s content.

sample-view-in-page

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.

view-widget