When working with a open source content management system like Drupal, you start off with a basic, no frills theme to work with. With the 6.x release, that is the DIV layout called Garland. While it is nice and all, you don't want to make your Drupal website look like everyone else's out there. This article will discuss how to create a Drupal custom home page to give your website a unique look and feel.

Lets start with a simple DIV layout that I created for one of my websites. Fire up your favorite text editor and copy and paste the following Drupal front page template into your editor:


<?php
/************************************************************************
File: page-front.tpl.php
Purpose: This is the front page template
Company: Kobashi Computing
Author: Kerry Kobashi
Date: December 16, 2008
************************************************************************/
?>
language) ?>" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">




<?php echo $closure; ?>




Save the file and name it page-front.tpl.php. Save it again as page.tpl.php also (you will learn about this later).

I won't post the CSS file (front.css) here as it is pretty standard rules for creating a fixed width layout and its really not the crux of the matter. The important thing is to create both files and place them in your Drupal themes directory.

Clearly, you can see this is a DIV based layout with a page container followed by menus, header, search box, anad a content container that includes a content block and sidebar and the footer.

There is a fair amount of PHP code in there, mostly Drupal global variables that are passed into the template. You can learn more about these variables in the Drupal theming handbook

As mentioned above, we saved the file as page.tpl.php too. For some unknown reason, Drupal doesn't seem to pick up on the filename page-front.tpl.php unless you have a page.tpl.php too. I scratched my head for hours on this and came across this issue. Hopefully there is a fix for this or some rationale of why this is so. But for the meantime you will have to deal with this problem.

You will have to edit page.tpl.php to your desired layout for all your web pages. This file is the master page template file and will dictate the default page look. You can override the look of special pages, for example like the blog page, by creating a page-blog.tpl.php in its place, so please be aware of that.

Now create a template.php file and place this in it:

function yourthemenamehere_preprocess_page(&$variables) {
$url = $_GET['q'];
if (empty($url) || $url == "node") { // front page is set at Site Config | Site Information 'node'
$variables['template_files'][] = "page-front";
return;
}
}


Make sure you change the function name so that it matches your theme name. What this does is get the url and then checks to see if its something like:

http://www.yoursite.com/node


and make the template engine use your page-front.tpl.php page.

So there you have it. You now have a way to truly customize your Drupal front page!