Drupal front page customization options

By Alvin Alexander on April 14, 2011

Drupal front page FAQ: How can I customize my Drupal front page?

In a previous blog entry I described how to make a Drupal node the front page of your wesbite. This is very often a nice, simple approach, but if the theme or format of your Drupal front page is significantly different than your interior pages, you may have to do something more than the simple approach I described in that earlier entry.

So, in this blog post I'll cover a couple of other ways to change the front page of your Drupal website.

Drupal custom front page - Option 1: Use blocks on just the front page

The first option is to use the approach I described in my earlier blog entry, and then add blocks to the Page that is now your front page. To add blocks to only your front page, all you have to do is go into your theme editor, and define the blocks that you want to appear on the front page.

To do this, just select a block, such as the User Login block, and place it where you want in your theme. Save that location, then go in and edit the block, and in the very last entry for the block, where you define which pages this block should appear on, use the custom tag "<front>" to indicate that you want this block only to appear on the front page of your website.

Drupal custom front page - Option 2: A completely custom front page

Now, if you really want the front page of your web site to look completely different than the rest of your site, another approach is more drastic, but very powerful, and also not too hard once you get the hang of it. This approach involves modifying your theme to create a special layout for your front page.

While this sounds hard, at a high-level, this is all you have to do:

  1. Within your theme, copy the file named page.tpl.php to page-front.tpl.php.
  2. Note that the name page-front.tpl.php conforms to Drupal's naming standards, so Drupal will realize you want this to be the theme page for your front page.
  3. Modify page-front.tpl.php to make your front page look the way you want it to. This page is really just a combination of HTML, CSS, PHP, and possibly JavaScript, so if you're comfortable working with these tools, this page can easily be modified.

Describing how to make changes to this file is beyond the scope of this article, but here's the important point to remember: You can change this file however you want, and it will only affect the front page of your website. All your other Drupal page's will be unaffected by these changes -- so have at it. Be as creative as you want. Shoot, you can even delete all the content in that page and replace it with straight HTML if you want.

Drupal version information

I hope this "Drupal front page" tip has been helpful. Please note that this article relates to Drupal version 6.x. Other Drupal versions may require different approaches to this problem.

HELP! if this article was helpful, please share it. (i can use all the links i can get. thanks, alvin)
tags: 

I love the simple explanation for Option 2!

Submitted by Anonymous (not verified) on September 17, 2009 - 7:34pm

Thank you for taking the time to make things clear! Most of the tutorials on Drupal.org are very confusing and assume an intermediate knowledge of PHP and everything else.

This bit was particularly helpful...

Note that the name page-front.tpl.php conforms to Drupal's naming standards, so Drupal will realize you want this to be the theme page for your front page.

However, i'm still a bit confused over point 3:

Modify page-front.tpl.php to make your front page look the way you want it to. This page is really just a combination of HTML, CSS, PHP, and possibly JavaScript, so if you're comfortable working with these tools, this page can easily be modified.

Isn't page.tpl.php just HTML and PHP and possibly js. The css is defined with foo.css isn't it?

The reason I ask is because I'd like to know how to style page_front.tpl.php. should I create another css file? if so how would I link it to page_front.ypl.php?

Sorry for the slew of questions. You may have guessed i'm new to this kind of stuff!

Thanks

Yes, you are correct,

Submitted by alvin on September 19, 2009 - 2:59pm

Yes, you are correct, I should have been more clear on that. When you create your own page-front.tpl.php file, it will more than likely be all HTML and PHP. Your CSS definitions should be in a separate file named something like "foo.css". Then you include those CSS definitions into your HTML page with a link tag, and then mark up your HTML using the CSS definitions you created.

If you happen to use JavaScript, it is similar to CSS in that regard. You should put almost all of your JavaScript in a separate file, include it in your HTML page, and then use your JavaScript functions as desired.

Note that I keep saying "one CSS file" or "one JavaScript" file, but in the more-complicated Drupal themes, they break their CSS out into several different files for organizational purposes. This isn't necessary, but I thought I'd mention it.

Thanks for clearing that up.

Submitted by Anonymous (not verified) on September 19, 2009 - 4:03pm

I have now managed to customise my front page with your help. for those who are new to this stuff and do:

  1. As suggested in option 2 copy page.tpl.php and rename page-front.tpl.php.
  2. rename the html tags which correspond to the parts of the page you want to change. e.g, change <div class"content-inner"> to <div class"front-content-inner">
  3. In the corresponding css file, (if your theme is called foo, then your css file should be foo.css) add the new page-front.tpl.php html tags and customise however you want.

As long as you use unique tags, no general theme styles will be changed. Thanks Alvin!!

Thanks for your additional

Submitted by alvin on September 19, 2009 - 8:09pm

Thanks for your additional comments -- very helpful!

Option 2

Submitted by Akrotiri (not verified) on June 29, 2011 - 12:21am

When you use page-front.tpl.php (option 2), are you still able to use blocks on that new front page? or is the new front page seperate from the rest of Drupal?

Sorry to ask a noob question.

Front page blocks

Submitted by alvin on July 7, 2011 - 4:07am

Yes, you can still have blocks on the front page. That's really a function of your theme, so as long as you're comfortable with editing your theme files, you can place blocks wherever you like.

Sorry, I know that's pretty vague, but I hope it helps a little.

Post new comment

The content of this field is kept private and will not be shown publicly.