How to Customize or Move H1 Tag for Drupal Nodes

knooq-howto.png


Examples and screenshots referred to in this blog article relate to the Drupal 6 user interface.

Background Overview

Customising Drupal nodes to move or not show the H1 Heading Tag can be a bit confusing but it is one of the issues we have come across frequently. Changing the front page in Drupal is very straightforward, navigate to /admin/settings/site-information and set the particular front-page to one of your choice, for example node/1. However, the default stucture of Drupal means that moving or changing the H1 Heading Tag <h1></h1> on nodes, particularly front page nodes requires a few extra steps. The ability to change the location of the H1 Heading tag can be a necessity for website designers.

After promoting a node (such as a page) to the front of your website, you will see that the title of the node will appear there. However not everyone wants the title on the front page, particularly if you have Banners and Blocks or Views etc. There are quite a few options for overriding the front page in Drupal, but in this case we want to change the node content that is inserted into the front-page and not the front-page itself.

The default template file for pages is page.tpl.php which can be copied and renamed in order to override default layouts, such as the front page. By default you will be using the standard page.tpl.php file that comes with your theme. Or you may be using a custom page template file for your front page, called page-front.tpl.php as an override for the default page.tpl.php.

Either file sets the layout, HTML output and the regions etc., but in order to drill down to the title element of the node that you promoted to the front, you need to use node.tpl.php. The node.tpl.php file handles the presentation of all nodes within Drupal and is responsible for injecting the content into pages. So it only effects the $content variable within the structure of the page template page.tpl.php. Using this file however will alter all nodes throughout the web site, (assuming you have no other template files in use). However, the granularity of Drupal allows us to create another template file to hook into just a single content type such a page, a blog or an image etc. by creating a node-"CONTENT-TYPE".tpl.php file. Therefore in order to isolate just a very limited content type, i.e. a node with no title we can create a new content type. In this way, we leave the default content types alone and use the new one when we need to.

Solution

The first step in this solution is to create a new content type using a node-NEW-TYPE-tpl.php file which hooks into that new content type specifically. The NEW-TYPE in the file name matches the "Type" of the new content item. This is useful as the new content type remains available to be used elsewhere, should you need it.

Once this new content type is created, we edit its template file to remove the H1 Heading Tag. As H1 Heading tags are quite important to search engines, and for SEO, we make sure to insert a H1 tag into one of the views or blocks showing on the front page. In fact you can even insert it into your slogan or mission statement if you wish, just make sure you don't have multiple H1 tags on a page, as this is not great for SEO.

The first step is to navigate to  /admin/content/types/add in the address bar or if using the 'administrative menu' module go to 'Content Management' then 'Content Types' then 'Add Content Type' as shown here:

add-content-type-knooq.png

Here you will be asked to name the new content and to give it a machine readable name or "Type". In our example we have chosen Page No Title as the name and page_content as the "Type".

new content type screen

You can choose whatever you want, just remember the machine readable name under "Type", as this will be used in our new template file to override the contents of the node in question.

Create Node Template File

Next you need to copy your current theme's node template file node.tpl.php and rename it to node-"Type".tpl.php. using the machine readable name for the new content type. So in the example above the machine readable content "Type" we chose was page_content therefore our copy of node.tpl.php gets renamed to node-page_content.tpl.php. Note that there is a hyphen after the node"-" instead of a full-stop/period as contained in the original file.

Then edit this new node-page_content.tpl.php file and remove the following code which prints the H1 Heading Title:

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

Please note that in some themes such as the 'Garland' theme this code returns a H2 heading/title rather than H1, so the code to remove would be:

<?php if ($page == 0): ?>
  <h2><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a></h2>
<?php endif; ?>


That's it, you can test that this is working by creating a new node using this content type, you will be asked to input a node title when creating it, but this will not be returned in the page's HTML. You can set this new node as the front page as mentioned above, and Voila! no node title. This is quite useful when you have other teasers, views and blocks on the front page, indeed most websites don't have the traditional H1 Title in the old style anymore as it is more appropriate for a document layout. It's most likely inserted into another block or page element.

Also as mentioned above, you will need to have a <h1>MyTitle</h1> H1 tag somewhere. You can easily insert this, either by editing page-front.tpl.php or by inserting it into a view that resides on the front page, although it should be inserted somewhere that makes sense. Placing headings in the right locations is important for HTML structure and for SEO.

Check Security

Make sure that any template files you create are protected with the correct permissions. When altering or overriding node templates in Drupal you are performing customisation. Therefore you become responsible for the security of those files, which remain outside of the normal Drupal update run. As ever, if you're not sure about the effects of any changes, please learn the correct security procedures before making any changes. There are a lot of resources and security advice available on Drupal.

Home Blogs knooq.com's blog