Methods of creating Drupal home pages

The following pages outline a variety of ways you can create a custom home page for your Drupal site.
Also, check out these helpful video lessons that illustrate one or more of the techniques:

Custom/dynamic front page using CCK, Views, Panels, and (optionally) Nodequeue.

[[[[Add description]]]]

Modules you will need for this lesson

This lesson has been designed for Drupal 5.x, since at the time of writing not all necessary modules were yet available for Drupal 6. When possible, this lesson will be upgraded with any additional details needed for Drupal 6 compatibility.

CCK
Views
Panels 2
Nodequeue

Benefits and Drawbacks

Benefits of this technique

Drawbacks of this technique

Setting up your Content Types with CCK module

This lesson will use a sample CCK Content Type called "Article". You can create or import this Content Type to follow along (grab the import code from below ***ADD CODE***), or else simply apply the concepts to your own content types. Before beginning on your own home page, it is important that you fully develop the Content Types you will be using for your site (or at the least, those that will be involved with the home page in any way). Since your Content Types make up the bulk of what your home page will actually consist of, it's important to have them all sorted out before dealing with your home page. If you'd like some guidance on setting up your own Content Types and fields before proceeding with this lesson, please visit the following resources:
-
 -

For simplicity, our sample Article content type will have the following fields:

  • title (standard Title field)
  • body (standard Body field)
  • teaser_title (text field, set with a maximum of 50 characters)
  • teaser_text (text field, set with a maximum length of 100 characters)

(your Content Types may have considerably more fields, or additional types such as Image fields)

You might wonder why you need the teaser_title and teaser_text fields, instead of just using Drupal's own node title and automatically generated teaser text. On a more complex home page, it becomes important to ensure that certain blocks of content will always consistently fit into the specific amount of space that's been allotted to them (enforced during entry of the content with the field's "maximum length" setting). On more professional sites, a short "synopsis" of each item of content is generally preferable to an auto-generated chunk of text cropped off of the beginning of the full content's page, which is Drupal's default behavior. Having a separate teaser_title is more optional, but if you choose to have one, will allow you to set a different or shorter version of the title to more easily fit into the confines of the home page, while still allowing you to have a full length title for the actual page. Setting up dedicated text fields in CCK for the teaser and title helps to accomplish all of these purposes.

If you prefer to go "all out" with your Article content type, here are some additional field options to choose from (including these just for your reference/ideas - they are not used in the lesson):

  • article_date (text or date field - if this is an online version of a printed article, this could hold the date the article was actually published - rather than the date the content was added to Drupal)
  • sub_title (text field - a short sub-title, as is often seen on articles)
  • author_name (text field - as this is probably a different name than the admin account publishing the content)
  • article_image (imagefield - the main image for the article... using Imagecache module, it would be scaled and cropped to make the teaser image, the primary image at the top of the article page, and also could be used to create thumbnail images to display in other contexts throughout the site)

When your Article content type is fully completed, your editor/staff will just need to click Create Content -> Article, and be presented with exactly all of the fields they need to fill out and images to upload to completely and correctly produce an article (with no coding - other than maybe light HTML for the article formatting itself unless you give them a WYSIWYG editor).

Setting Up a Node Queue

I'm assuming you want to be able to select various articles/pages from the site to feature in the middle row of the home page, in a specific order (the top one being the Cover Story). The way to do that is to create a View that has its order controlled by a Node Queue. To make your Node Queue, go to admin/content/nodequeue/add/nodequeue . Enter a title (e.g. home_articles_queue), Queue size of 4, and for Type choose Article (assuming you've made the CCK type). You might also like to check "Reverse in admin view", as this will cause queue items to drop from the bottom of the list rather than the top as new items are added, which may or may not make better sense to you (if you do this, you'll also probably want to adjust the NodeQueue: Queue Position sort criteria option to "Descending" in the View you'll make in the step below). Node Queue also adds a new tab to pages of the content type you selected in the previous step (Article), and you can click that tab from any page and add the page into the queue. You can then reorder the queue as you like by going to admin/content/nodequeue and clicking on the View option of the queue you want to adjust (and you can also use the search field to add additional content directly to the Node Queue).

Making a View, sorted by Node Queue

Next comes the View that is ordered according to the Node Queue. You can make your own View and add the Node Queue "Filter" and "Sorting" options, or you can use the default nodequeue View that is generated for each nodequeue as a starting template to customize. Go to admin/build/views and look down in the "Default Views" area for a View called "nodequeue_1". Click the Add link to the far right and you'll call up a Views page containing the default options for that View. Change the name some something else (e.g. home_articles), uncheck Provide Page View. Scroll down to the Block options - ensure List View is selected, remove the title, set the # to 4, and uncheck More link. Next add the needed fields from your Article content type (e.g. at least the teaser-image, or other fields if you decide to make those as text/images/css). For Filters, add Node: Published (set to yes), and Node: Type (set to Article). When you're finished, save the View.

Making your Views accessible to Panels module

To add a View to Panels you first need to specifically tell Panels which Views you want to make available for it to use. To do this, go to: admin/panels/views, choose the name of the View you just created above from the selection menu, and press Create panel view. Copy and paste the View's name into the Panel view title field - you can leave all the other settings as default - scroll down and submit the page.

Pulling everything together for your home page with Panels

  1. With Panels 2 module installed, go to admin/panels/panel-page/add and click on "Flexible". In your case you "could" just use the Single column layout, but the Flexible layout is ideal since you'll be able to easily change and adapt the layout in the future if you need to.
  2. Type home for both the Panel name and Path, and press Save and Proceed.
  3. If you prefer your XHTML to be as lean as possible, you should make use of Panels' ability to stack multiple content items inside a single Pane of the panel (this is especially simple in a single column layout like you have). When you have a more complex layout this may not be possible, but in your case it is. So if you'd like, go with Option 1 below for that, or else Option 2 for separate rows (more divs).
  4. Option 1: Set the Rows option to 1. Change the column title for Row 1 to Home Articles. Ignore Rows 2 and 3 (setting the Rows option above to 1 will cause these extra rows to be deleted when you save this page). Click Save and Proceed.
  5. Option 2: Leave Row 1 as is. For Row 2 set: 100, 1, empty, empty ... and change the name to just Middle. Leave Row 3 as is (you'll now have a layout with 3 rows in a single column). Click Save and Proceed.
  6. Nothing needed in the next two screens right now, so press Save and Proceed twice to get to the Content page.
  7. Note: for the following steps of adding content to the Panel, I suggest that for each you add a custom CSS ID when given the option (e.g. home-top, home-middle, home-bottom). This will make it easy as pie to style each Panel pane with easily recognizable names in your CSS.
  8. Depending on your choice of Option 1 or 2 above, you now see 1 row (Option1) or 3 rows (Option 2) where you can add content using the + icon. In the Top row, choose to make New Custom Content (which is just basic content added directly into the Panel as opposed to using other preexisting data from the site), and paste in the welcome text and HTML for the home page in the Body.
  9. In the Middle row, this is where to add the Nodequeue-controlled-View mentioned earlier. It should be listed when you click the Add content + button, since we made it available to Panels module earlier.
  10. The bottom pane could just be another New Custom Content item if you like, with the image/link HTML pasted in... or you could get more fancy and have another CCK type to hold this image and the correct link to the latest, plus a single item View that always will show the latest item. Another alternative is to embed a node in a Panel, which you might do if you want simple HTML/image but need someone to be able to edit it without allowing them access to Panels module - make a single Page node (or other CCK type), add the content to it, and drop the node into Panels following the steps on the above-referenced link (now a person can update the content of that node and not need to use Panels to do it).

Make any node into the home page

You can create a node of any type (e.g. Page, Story, or a custom type), add the content to it that you'd like to include on your home page, and then set it as the home page with the setting at: admin/settings/site-information

Benefits of this technique

Drawbacks of this technique

Creating a page-front.tpl.php template file

The page.tpl.php file is where you place "highest level" HTML structure of your site (e.g. the <html>, <body>, etc tags). You can create a separate "overridden" version of your page.tpl.php file to design a slightly modified or even completely different template for your home page - this is done by making a file in your theme's directory called page-front.tpl.php (read more about page-front.tpl.php).

Benefits of this technique

  • Quick and easy

Drawbacks of this technique

  • This method has a drawback of forcing you to maintain/synchronize changes to multiple versions of your main template (if possible, I recommend using only page.tpl.php for the single main/primary template of your site, and using the more granular templates to customize the sub-elements that appear inside that... e.g. different versions of node.tpl.php for different Content Types with node-nameoftype.tpl.php diles, Views templates, block.tpl.php, etc). Using page-front.tpl.php would be a good option if you had a substantially different theme between the front and inner pages of your site (which from a usability standpoint is usually a bad idea), so you'd have two templates anyhow - but if the overall XHTML template/framework is consistent throughout your site, it's advisable to keep only one copy of it for you to have to worry about. You can also make significant changes between your home page and sub-pages, with no changes to the underlying HTML, using just CSS - especially if you assign a unique Class / ID to every page's <body> tag.

Creating "home" regions to use in your page.tpl.php template file

You can design/code your whole home page's content within the same main template file that the rest of your site's pages use (page.tpl.php), by wrapping the following bit of PHP code around all the code/content that is meant to be shown only for the home page:

If Drupal sees that the front page is currently being viewed ($is_front = true), it will display the contained code - otherwise it will completely skip it as if it didn't exist:

<?php if ($is_front) : ?>
... everything that's for the front page including hard coded HTML and text and/or addition Drupal regions you could define in template.php (such as a new region called "home" and assign any Views blocks you make for use on the home page to this region at admin/build/block) ...
<?php endif; ?>

You can even embed one or more Views directly in the template file here if you'd like.

Learn more about making new custom regions (regions in Drupal 5 and regions in Drupal 6), and placing blocks into those regions.

Reference: HowTo build your home page with regions/blocks

Benefits of this technique

Drawbacks of this technique

Creating a home page using CCK

One interesting method of making a home page that offers a mix of easy editing of static fields, plus the ability to embed blocks and other dynamic content, is by making your front page using CCK. This might be a good choice if what you're after is an easily editable set of pre-defined fields (which would, for instance, make it easy for your non-tech-savvy client to edit basic static information without coding anything) with additional dynamic content drawn in through embedded Regions/blocks or Views.

Tips on setting up a "Home" content type

  1. Create a new Content Type at Administer > Content management > Content types and clicking the "Add content type" link.
  2. To best follow along with this guide, set the Name to Home, and Type to home.
  3. If your home page will be more advanced, making use of custom fields, you may want to disable the Body field and just use custom fields. To do this simply delete the text Body from the Body field label setting. If the label is empty, the Body field will not be included.
  4. Click on the "Workflow Settings" fieldset and uncheck Promoted to front page and set the Attachments option to Disabled.
  5. Click on the "Comment settings" fieldset and set the Default comment setting to Disabled.
  6. By default, Content Types have a "Submitted by" line printed at the top. Most likely you want to get rid of this though in the case of your home page. To do so, go to Administer > Site building > Themes > Configure (admin/build/themes/settings) and under the Display post information on option, uncheck Home. Scroll to the bottom of the page and click "Submit configuration".
  7. In most themes the $title variable is in the page.tpl.php file. On your home page you may not want to display the title though. If you don't want the title on the home page, the you can set it to never display on the home page of the site:
    • Open page.tpl.php and find the line that says:
      <h1 class="title"><?php print $title; ?></h1> (or something similar, containing $title).
    • Adjust it similar to this:
      <?php if (!$is_front) : ?>
        <h1 class="title"><?php print $title; ?></h1>
      <?php endif; ?>

Set up permissions

You can set up permissions so that only the admin (user 1) ever sees "Home" as an available content type on the Create Content page. Of course you only want "one" Home page, so it doesn't make sense to be shown the option to make more Home pages.

  1. Go to Administer > User management > Permissions (admin/user/permissions) and uncheck "create home content" and "delete any home content" and "delete own home content" for every Role. Only the admin user will ever see the option to create the initial Home content node.
  2. For any Role that is allowed to edit the Home page, enable the "edit any home content" option. The admin user will still see the option to make new Home pages, however you should not use the admin account on a day-to-day basis (create a "site admin" role instead), so you should rarely if ever see this option.

[note: will migrate the below section about embedding Blocks, Regions, and Views into template files to a separate dedicated article, and reference it from this page]

Embedding dynamic content into node-home.tpl.php

There are a variety of ways to easily embed dynamic content into your node-home.tpl.php file.

Embedding a Block

The following uses the default Search block as an example, to illustrate the technique for embedding any Block:

<?php
  $block
= module_invoke('search', 'block', 'view', 0);
  print
$block['subject'];
  print
$block['content'];
?>

There are just 2 parts to the above code that you need to customize in order to display any particular block, which are highlighted in the sample below:
$block = module_invoke('search', 'block', 'view', 0);

  1. Blocks are uniquely identified by the combination of "module name", "block id" (relative to module), and "theme name".
  2. Go to Administer > Site building > Blocks (admin/build/block) and hover your mouse pointer over the "configure" link for the block you want. You will see the "module name" and "block id" at the end of the URL.
  3. So in the case of the Search block in the above example, the URL is:
    example.com/admin/build/block/configure/search/0 ... the "module name"
    example.com/admin/build/block/configure/search/0 ... the "block id"

Embedding a custom Region

You can embed any default or custom Region (populated with as many Blocks as you wish, which you can control and arrange at Administer > Site building > Blocks).

When you add custom Regions to your theme you have to include the default regions as well or they will no longer be used (you can, however leave out any that you don't want to keep). Add as many custom Regions as you wish. The following is for Drupal 6.

First add the Region(s) to your ThemeName.info file:

regions[left] = Left sidebar
regions[right] = Right sidebar
regions[content] = Content
regions[header] = Header
regions[footer] = Footer
regions[home_custom] = Custom home region name

Then you can use the following code in node-home.tpl.php:

<?php print theme('blocks', 'home_custom'); ?>

Embedding a View

You can embed a View if it has a Block display using the Region method above. However it's also very easy to embed a View directly into the node-home.tpl.php file. (I need to check if this is true, but I believe a benefit of directly embedding a View instead of defining extra Regions is that it has better performance for your site). Here is info on embedding Views with Drupal 5. The following illustrates how to embed a View using Views 2 with Drupal 6 (more advanced options are also available):

<?php
  $view
= views_get_view('viewname');
  print
$view->preview('default');
?>

Where viewname is the name of your View, and default can be changed to the page_# or block_# of any Display in your View. For instance, to embed the first Block Display defined in the View, you could use block_1.

Example of a node-home.tpl.php file

The following is an example extracted from the node-home.tpl.php of absolutecross.com, which is currently being redeveloped in Drupal. It is made up of 3 custom text fields, and will soon add 2 embedded Views as well:

<div id="home_left">
  <?php print $node->field_home_welcome[0]['view'] ?>
  <?php print $node->field_home_featured_content[0]['view'] ?>
</div>

<div id="home_right">
  <?php print $node->field_home_featured_sites[0]['view'] ?>
</div>

Benefits of this technique

  • Allows you to easily theme your home page using a theme file such as node-home.tpl.php. Having a dedicated template file is more straight-forward to understand and keep organized compared to embedding your home page's code into the main page.tpl.php template.
  • Allows you to define a variety of fields for input of static content (such as a welcome message or images).
  • Gives you a convenient "Edit" link at the top of the Home page to easily access and edit the static field's content.
  • When you do edit the content of the fields, you are able to use Drupal's "node revisions" ability to save backup copies of the content of the fields.
  • Easy to embed dynamic content into the template (Blocks in Regions, Views, etc).

Drawbacks of this technique

  • Requires CCK module to be installed if you want to make use of the ability to have added fields (not really a drawback, since almost everyone needs CCK!). However you can still make a "Home" content type using just Drupal core.

Create a single "View" as your home page, with Views module

Benefits of this technique

Drawbacks of this technique