Creating a Custom Home Page in Drupal Using Views
by Liam McDermott, 29 June 2007 - 5:35pm
One of the most popular questions people new to Drupal ask is: ‘How do I change the home page?’ By default the index page of a Drupal site has a bloggy feel, the latest items shown in date order, but it doesn't have to look like that! That is the aim of this article, to show two ways—because there is always more than one way to do something in Drupal—to customize a Drupal home page.
Required for Both Methods
This article assumes Clean URLs and the Path Module are both enabled. If these are disabled, or the reader is unsure, follow the aPaddedCell article: Enabling Clean URLs and the Path module.
Custom Drupal Home Page: the Simple Way (Without Views)
The simple way to customize Drupal offers the least flexibility but is, of course, easier. For people who need only a static page this will work well. Those looking for more complicated, dynamic content on their front page (summaries of most popular content, most recent articles etc.) should skip to the section showing the complicated way (it's complicated but, thanks to step-by-step instructions, not difficult!).
Create a New Page
Select Create Content -> Page in the Drupal administrator menu (in the side bar of a default installation).
Enter at least a Title, e.g. ‘Home Page’. Text in the Body is optional (and can be added later).
Click to drop-down URL path settings, then enter ‘home’ in the text box. Also drop-down Publishing options and ensure Published is checked but Promoted to Front Page is not.
Make Drupal Use the New Page as its Front Page
Under the administrator menu, select Administer -> Site configuration -> Site information.
Change Default home page to ‘home‘, then click Save configuration.
Finished! Click the site logo (or type in the URL) to go to the newly created home page. To edit the text on the home page simply click the Edit link, when logged in as an administrator.
Custom Drupal Home Page: the Complicated Way (With Views)
For a home page with dynamic content (latest article summaries, top ten articles, etc.) it is better to use a view. Views can be used to create both pages and blocks. This section will show both: first a page view will be created, then a block view added to that page, giving an overview of how to create truly customized home pages for Drupal.
Download and Enable the Views Module
Firstly download the Views module from the Drupal website.
Since Drupal 5 the best place to keep modules is drupalinstalldirectory/sites/all/modules (where ‘drupalinstalldirectory’ is the directory Drupal is installed in, e.g. httpdocs or public_html). If the directory does not exist: create it. Storing modules in this location keeps them separate from the ones that come with Drupal. Making upgrades and safely removing modules easier. No more: ‘Was that module part of Drupal?’
Upload the whole views directory to the Drupal site, the path of the module should look like: drupalinstalldirectory/sites/all/modules/views. Then enable it under Administer -> Site building -> Modules on the Administrators menu (in the side bar of a default Drupal installation) by finding the Views group, selecting the Views and Views UI check boxes, then clicking Save configuration, at the bottom of the page.
Optional Video: Installing the Views Module
The embedded video shows how to install the views module. This is in Flash format, which is non-Free and patent enclubered, not all surfers will be able to view it. For these users an OGG video is available.
This is a Flash placeholder, please see above for alternate to Flash. Or download Flash from Adobe.
Create a New Page View
Click Administer -> Site building -> Views this will show a list of currently available views, the module comes with some ready made ones, but this article will show how to make a new page view from scratch.
Click Add at the top of the views page, then enter: ‘first_three_teaser’ as the Name.
Drop down the Page group and check the Provide Page View.
Under the URL text box enter ‘firstthree’.
Select Teaser List from the View Type list. This shows a short summary of the articles/blog posts in the site database, views allow up to 99999 posts per page (should be enough for any site)! In this case three will be shown, with no pager (widget to move between pages).
Make sure Use Pager and Breadcrumb trail should not include "Home" are both not checked, then enter 3 in the Nodes per Page text box.
Next Filters are used to ensure the view includes only articles published and promoted to the front page by an administrator. Expand the Filters group by clicking on it.
Using the Add Filter drop-down list select Node: Published, then Add Filter. Repeat this with Node: Front Page.
The article teasers need to be ordered by the date they were written. Expand the Sort Criteria group. Using the Add criteria drop-down select Node: Created time, then click Add Criteria. Note that the order of the criteria needs to be changed so the articles published last are listed first, to do this change the Order drop-down list to Descending.
Lastly click Save. The new view has been created!
Make Drupal Use the New View as its Front Page
Select Administer -> Site configuration -> Site information in the Drupal administrator menu. Enter ‘firstthree’ in the Default front page text box.
Click Save configuration. Return to the front page (usually by clicking the site logo) and check the changes are working, if there is no content on the site enter some by clicking Create content -> Story in the administrator menu. Anything can be entered here, silly posts can be deleted later!
Add Blocks to Taste
Creating a page View is only the beginning. Views allow almost all the information on a site to be grouped, summarised and ordered in ways visitors might like. Blocks are small bits of content in Drupal, they can be inserted into a page at several predefined places (see Administer -> Site building -> Blocks to configure blocks). This tutorial shows how to create two blocks, the first produces a table of the 10 newest articles, the second a table of the 10 most commented on articles.
10 Newest Block
Select Administer -> Site building -> Views in the Drupal administrator menu, then click Add in the menu at the top of the page.
Enter ‘newest10’ as the view Name.
Expand the Block group and check the Provide block box.
Under the View Type drop-down select Table View, enter ‘10 Newest’ in the Title and ‘10’ in the Nodes per block.
Leave the Block group and expand the Fields one. Then—as creating a page view, using the Add field drop-down—add the following fields to the block:
- Node: Title
- Node: Author Name
- Node: Created Time
Next to the Name is a Label field, this is used for column headings in the view generated table. Node: Title should have a Label of ‘Title’, Node: Author Name should be ‘Author’ and Node: Created time should be labelled ‘Date’.
Expand the Filters group by clicking on it. Using the Add Filter drop-down list select Node: Published, then Add Filter. Repeat this with Node: Front Page. These are the same filters used on the page view.
Lastly the items in the table need to be ordered by the date they were written. Expand the Sort Criteria group. Using the Add criteria drop-down select Node: Created time, then click Add Criteria. Then change the Order drop-down list to Descending. This sort is the same as that on the page view created earlier in this article. Click Save to finish creating the block.
10 Most Commented Block
Follow the instructions above, for creating the 10 newest block, with the following changes:
- For the view Name enter ‘mostcommented10’;
- Under the block Title enter ‘10 Most Commented On’;
- Instead of clicking Save when finished, click Save and edit.
- Visitors may wish to know how many comments are attached to each article in the table. To do this add the field: Comment: Count to the block view (in the same way all other fields were added).
Making this into the 10 Most Commented On block is just a case of adding another Sort Criteria. Select Comment: Comment Count in the Add Criteria drop-down list, then click Add Criteria. Notice the Node: Created Time criteria is above the one just created, click the up arrow of the comment count line to move it above this. Change the sort order by selecting Descending in the Order drop-down list.
Finally click Save.
Showing the Blocks on the Front Page
Repeat these steps for each block. The block administration page can be found under Administer -> Site building-> Blocks. Click configure on the block that needs to be moved.
Under Page specific visibility settings select the Show on only the listed pages option, then enter ‘<front>’ into the Pages text box. ‘<front>’ is the name of the page where the block should be displayed; more than one page can be listed by pressing return between page names (see the instructions on the block configuration page, underneath the Pages text box for details). Click Save block to complete the changes.
When the block is saved Drupal returns to the block listing page, finally the block should be enabled and moved to the content area of the page. Under Region in the block list are a column of drop-down menus: using the drop-down select Content, then click Save blocks.
Optional Video: Creating Page and Block Views
The embedded video shows how to carry out the steps above to create both page and block views. Helpful if something some part of this tutorial is difficult to understand, missing something, or Drupal isn't working the way it should. This is in Flash format, which is non-Free and patent enclubered, not all surfers will be able to view it. For these users an OGG video is available.
This is a Flash placeholder, please see above for alternate to Flash. Or download Flash from Adobe.
Views are one of the most versatile and useful modules available for Drupal, this article can only scratch the surface of what is possible with them. The best way to learn is by creating views, then changing them until they provide exactly what the visitor wants. It's also worth noting that other modules for Drupal can integrate with views: providing more information.
Often a simpler site will not require views at all, using a static page is simple yet effective. Dynamic sites don't need to look dynamic, Drupal caters for this taste too.
Please use the following link to view the the Webmaster Forums discussion on this Drupal Views article. Questions and comments on the article are welcome!