Drupal front page - Removing the H1 title tag

Drupal FAQ: How do I remove the H1 title tag from the front page of a Drupal website?

I just ran into this problem on my new website, How I Sold My Business: A Personal Diary. Whenever you create a Drupal page you have to give it a title, but for the front page of a website that doesn't really make sense.

There are at least two ways to do this:

  1. Create a new Drupal template file for the front page
  2. Use CSS to hide the tag

As I write this today, the CSS approach seems smarter, but I actually used the Drupal approach on my website, so I'll describe it first.

1) A Drupal approach to hide the front page H1 title tag

The only good way I could find to do this using Drupal was to create a new template file within your theme for the front page. Here are the quick instructions for Drupal 6:

  1. In your Drupal theme directory, copy page.tpl.php to page-front.tpl.php
  2. Edit page-front.tpl.php to remove the desired H1 tag

As an example, I just went into my active/default theme directory, copied the page.tpl.php file as described, and then deleted these lines from my new page-front.tpl.php file:

// deleted these lines:

<?php if ($title): ?>
  <h1 class="title"><?php print $title; ?></h1>
<?php endif; ?>

This is one way to solve the problem, and it also makes sense if the front page of your website is drastically different from the rest of your website. But in my case my front page is basically the same as the rest of the website, and I probably should have just used CSS, as described next.

2) The CSS approach to hide the front page H1 title tag

As I think about it today, a better solution to this problem would probably have been to use the CSS hidden/display tag, something like this:

.front h1 {
  display:none;
}

That's obviously a much cleaner solution, and doesn't require the extra Drupal template file.

While I'm in the neighborhood, here's a link to the w3schools website that shows the difference between using the CSS "visibility:hidden" attribute and the "display:none" setting. (In short, display:none makes it seem like the element was never there in the first place, while visibility:hidden still leaves a gap where the element is located.)

Regardless of which approach you use to hide the title tag on the front page of your Drupal website, I hope this brief tutorial has been helpful.

I haven't gotten around to formatting the pages that you'll see just yet, but a cool thing about Drupal is that with the CCK and Views modules, you can very easily create and then display new "content types" on your websites.

For example, I just added the following content types to the devdaily website:

For the new Bookmarks content type, I've been wanting to create a bookmarks module without having to use someone else's public service. I was happy with Delicious, but once Yahoo messed that all up, I haven't been bookmarking anything.

I created the Source Code Snippets content type because I always see little snippets of code here and there that I grab and use in my own programs, and this gives me (a) a way to easily find them again, and (b) a way to give attribution to the original author.

For the Inspirational Quotes, every once in a while I see something I really like, and I usually end up copying and pasting it in an email to myself, then putting it in a special email folder. Now I can just show them here.

If you haven't used the CCK and Views modules before, they are very cool, a little bit of a "killer feature" for Drupal compared to other content management systems. You can do a lot of things with CCK and Views without having to do any Drupal/PHP programming, and while all my pages need to have their CSS styled properly, no programming was required to (a) create the data entry forms or (b) show the views that you can see with the links above.

If you can't find any good, free Drupal CCK and Views video tutorials on the internet, just leave a comment below, and I'll be glad to create some. They're fairly easy to use once you get past that initial "learning cliff" (as opposed to "learning curve").

This page is sponsored by Valley Programming - Boulder, Colorado Drupal consulting services

want to sponsor a page? learn more.