This is the second in a series of blog posts dedicated to explaining the important parts of building a custom Drupal website. Last time, we explained content types. In this post, we'll be giving an overview how to utilize "Views" to display your content on an easy to read custom page.

Important: You'll want to download the Views module and install all of the modules it provides.

To get started, click on "Site Building" -> Views. Type in a name and an optional description and tag. The final option is the "View Type" field, which defines the type of content you want to display with this view. For the purposes of this demonstration, select the "Node" option, as the particular view we will be creating is for nodes. Click "Next", and you'll be taken to the main view editing screen.

At first, this screen can seem a bit daunting because of all the available options. However, each item has an important and distinguishable purpose. In this tutorial, we will go over the the most important fields that will provide you with the foundation of creating views on your own website.

For this demonstration, let's say we've just created a news content type. In order to provide an avenue for this content to be portrayed in an easy-to-find manner, we want to a create display for the following: A page that shows the 10 most recent news items and provides a paginator to view older information.

Creating a display

Before creating any view, a "display" needs to be created. In the left most column of the views editor, select the display you want to create and click "Add Display". A new display tab will automatically be created. The defaults tab that already exists allows you to specify the same options across any displays in your view. At any point, you can override a default value in any of your views by clicking an "Override" button. This is quite a useful option if you are creating a lot of similar displays in your view. In this demonstration, most of the options in our displays will be overridden as they are specific to our news page. In future tutorials, we'll be adding to this view, so it's important to override fields that would never apply to another page or block.

Page Display

Name and Title

For our first display, we want to create a page that displays the 10 most recent news items. After adding the page display, click on the "Name" field to give it its own distinct name. You'll see an input field appear below the editor. Any existing options can be clicked on for editing. All options will be added or edited in the same manner through the input boxes below the main editor.

The page now needs a title. This option is different from the previous option in that it needs to be overwritten so other displays can have different titles. This can be achieved by clicking "Override" at the top right of the editing box.

Style and Theming

Views has a built in styling structure that allows you to display your content in different ways, such as a standard div structure, a list, a table, or a grid. In this case, we'll select keep the default style, unformatted, as works well for displaying a number of news items.

If you'd like to theme your views differently than the standard views theme, click the Theme link at the bottom of basic settings. There are three important output templates. The display template is the overall template for the theme. The style output template is used to house the html structure that specifically applies to the information that will be shown in this display. It also utilizes a PHP foreach loop to display each row of content. The Row style output displays each field in that's output for each item. Clicking on each option allows you to see the default template, copy it, and adjust it accordingly.

Pagination

Under basic settings, there are two important options relating to pagination. "Use pager" allows you to define whether or not this page will contain a paginator. For this page, you'll need to select Yes and override the default template. Since we are showing 10 items, the "Items to display" option does not need to be changed.

Header/Footer/Empty Text

Views allows for the management of everything that will need to be shown on this page. This includes the header, which appears under the title, and the footer, which appears under the information output by the view. In addition, it also allows for custom empty text should there be no information to output. For example, say we just created this view and no news items are present. Empty text would simply state that no news items are available at this time and for the visitor to check back later.

Page Settings

Under this section, you can define the URL alias for this page and add it to a menu if desired.

Relationships & Arguments

For the purposes of this demonstration, relationships and arguments are not necessary. We'll be covering these later in a more advanced Views tutorial.

Fields

This section is the heart of Views, as it allows you to define what information shows up on this page. To add a field, click the Plus Sign next to the Fields title. In the editor screen, all available fields are presented. To narrow this list down, select a group, such as Node or Content. Select as many fields as desired from each group, then click "Add". Then, you'll be presented with a number of different options regarding each field. Views does a great job explaining each option, so there's no need to reiterate that here. Once you add each field, click the "Up and Down Arrow" button to easily order the display of fields for each item. For the news page, we'll want to display the news title first, followed by the date, news teaser, and finally a read more link.

Sort Criteria

Here, you can define the order that news items will appear on your page. These can be added and sorted in the same manner as fields. For this demonstration, we'll want to order our posts by "Node: Sticky" descending and "Node: Date" descending. This will ensure that any very important news items always stay on the first page, and we'll order the rest by the order in which they were created.

Filters

The options in this fieldset define which nodes we will draw our content from. For example, in the Fields fieldset, we said that we wanted to display a node title. At this point, all nodes titles will be displayed. We want to limit that only to news nodes. Furthermore, we only want to display nodes that have been published. Therefore, we select the "Node: Type" option and define that we only want to see "News" nodes. We do the same for the "Node: Published" option.

Conclusion

Congratulations, upon clicking the save button, you've created your first view! The next blog post in this Understanding Drupal series will take a look at some of the different displays in Views, such as blocks and RSS feeds. We'll also dive into a couple of the more advanced options in Views.

In the meantime, if you have any questions or thoughts at all, please leave a comment below.