Creating a custom home page in Drupal 7 using Views (part one)

by Liam McDermott, 23 June 2011 - 2:11am

Having installed Drupal, one of the first questions people ask is, ‘How do I change the home page?’ By default the front page of Drupal has a blog feel, with the latest posts shown in date order, but it does not have to be like this! These two articles will show how a front page can be customized using Views.

Part one creates a page in Views and sets it to the home page, part two builds on this with ‘new users’ and ‘latest comments’ blocks.

Note: this is an updated version of: Creating a Custom Home Page in Drupal Using Views, which was aimed at Drupal 5.

Video instructions are also provided at the bottom of the article.

Drupal’s default front page

The default Drupal front page is a blog style ‘teaser’ listing of the most recent posts, having followed these instructions the front page will consist of:

• three article teasers, followed by;
• ten more recent articles;
• ten most commented articles;
• recent comments in the sidebar (part two), and;
• avatars of new users in the sidebar (part two).

Requirements

This article assumes a copy of Views is installed (and the Views UI module in particular).

For help with installing Drupal modules, see the Drupal documentation on installing modules.

Creating the page view

The first step is creating a page view that can be set as the front page. Click Structure -> Views which will show a list of currently available views, the module comes with some ready made ones, but this article will concentrate on making a new page view from scratch.

1. Click Add new view,
2. enter ‘Recent posts’ as the View name,
3. set Items per page to 3,
4. select the text in Create a page -> Page title and delete it (since there shouldn't be a title at the top of the view),
5. click Continue & edit.
6. Under Pager -> Use pager click Full,
7. in the settings box that appears click Display a specified number of items,
8. click Apply,
9. click Apply on the next settings box that appears too.

Ten more recent articles

Creating the page view adds a page with three article teasers, next a table will be added beneath these showing ten more recent articles. Since the page already has the first three articles, the table will skip them and display the next ten.

1. From the view edit page click Add, then Attachment from the drop-down menu,
2. under Pager click 10 items,
3. change the Offset to ‘3’,
4. click Apply.
5. Under Attachment settings -> Attach to: click Not defined,
6. tick Page by clicking on it,
7. click Apply,
8. still in the same section, under Attachment position: click Before,
9. in the settings box that appears, click After,
10. click Apply.
11. Under Format -> Format click Unformatted list,
12. at the top of the box that appears is a drop-down labelled For, select ‘This attachment (override)’;
13. select ‘Table’ from the option list,
14. click Apply,
15. click Apply on the next options box too.
16. Under Fields click add,
17. tick Content: Post date and User: Name,
18. click Add and configure fields,
19. when the Configure field: Content: Post date settings box appears:
    1. untick Place a colon after the label,
    2. click Apply;
20. when the Configure field: User: Name settings box appears:
    1. untick Place a colon after the label,
    2. change the Label to ‘Author’,
    3. click Apply.
21. Under Fields again, click the drop-down arrow next to add,
22. from the drop-down list select sort by clicking on it,
23. drag-and-drop the fields into this order: Content: Title, User: Name then Content: Post date,
24. click Apply.
25. Under Display name: (near the top of the view page, on the left) click Attachment,
26. in the box that appears enter ‘10 recent posts table’,
27. click Apply.

Finally, when all required changes have been made, click Save.

Set the home page to the ‘Recent articles’ view

Click Configuration, then in the System section, click Site information.

In the Front page -> Default front page text box, enter ‘recent-posts’. Scroll to the bottom and click Save configuration.

This is what the new front page looks like so far:

Ten most commented posts

Following the ten recent articles table, a similar table can be added, showing the ten most commented-on posts. Since different fields from the existing view are needed a new view will be created.

Make the view

Create a basic block view

To get back to the Views interface click Structure -> Views (or by clicking the Views link from the breadcrumbs at the top — if already in the Views interface).

1. Click Add new view,
2. enter ‘Ten most commented’ as the View name,
3. untick Create a page and tick Create a block instead,
4. change Create a block -> Display format to ‘Table’,
5. change Items per page to ‘10’,
6. click Continue & edit.

This will add a new view of nodes ordered by date, some more work is required to make it show nodes ordered by comment count.

Customize the block view with comment counts

1. From the view edit page, under Filter criteria click add,
2. tick Content: Promoted to front page by clicking on it,
3. click Add and configure filter criteria,
4. in the settings box that appears, under Promoted to front page tick Yes,
5. click Apply.
6. Under Fields click add,
7. tick Content: Comment count and User: Name by clicking on them,
8. click Add and configure fields,
9. when the Configure field: Content: Comment count settings box appears:
   1. untick Place a colon after the label,
   2. click Apply;
10. when the Configure field: User: Name settings box appears:
    1. untick Place a colon after the label,
    2. change the Label to ‘Author’,
    3. click Apply.
11. Under Fields again, click the drop-down arrow next to add,
12. from the drop-down list select sort by clicking on it,
13. drag-and-drop the fields into this order: Content: Title, User: Name then Content: Comment count,
14. click Apply.
15. Under Sort criteria click add,
16. in the field list that appears tick Content: Comment count,
17. click Add and configure sort criteria,
18. in the configuration box that appears check Sort descending,
19. click Apply.
20. Under Sort criteria again, click the drop-down arrow next to add,
21. from the drop-down list select sort by clicking on it,
22. drag-and-drop the fields into this order: Content: Comment count desc then Content: Post date desc,
23. click Apply.

Finally, when all required changes have been made, click Save.

Position the most commented block

From the toolbar menu at the top, click Structure -> Blocks; from there the just created Ten most commented view may be positioned on the page.

1. Scroll-down the table of blocks and find View: Ten most commented (under Disabled),
2. in the Region drop-down select ‘Content’ (or the equivalent in your theme),
3. scroll-up and find the Content region where the block has just been placed,
4. if required, drag-and-drop the blocks into this order: Main page content then View: Ten most commented,
5. scroll down and click Save blocks.
6. Find View: Ten most commented in the block list again and click configure,
7. under Show block on specific pages, click Only the listed pages, then enter ‘<front>’ in the text box below,
8. click Save block.

The final table looks like:

Have a look at the new front page

From the toolbar menu at the top click the Home icon and admire the new front page!

Video instructions

Prefer following video instructions? Just watch the Youtube video below!

Conclusion

Views are one of the most versatile and useful modules available for Drupal, this article can only scratch the surface of what is possible. A good way to learn is by taking the views created here, then change them to do whatever is needed. 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.

Part two will cover creating views of recent comments in the sidebar and avatars of new users in the sidebar.

Discussion

Please use the following link to view the the Webmaster Forums discussion on Creating a custom home page in Drupal 7 using Views (part one). Questions and comments on the article are welcome!