Drupal Custom Templates

How to make Drupal Custom Templates for Content Types in Drupal 7

Drupal Custom Templates go a long way to help UI developers in Drupal, it gives an edge to easily create drupal custom pages with new templates and get the desired HTML output. You don't have to rely on any templates because it might not match up with the vision, requirement or content and expands the limits set by Drupal themes.

From the Beginning of time while doing Drupal theme development we prefer to use the own custom template to render page/block/ field/view. Overriding a template file is one of the common tasks for a front-end developer, but depending on the base theme used it’s not always clear how to go about doing it.

Most Drupal themes come with a minimum of 3 default template files: html.tpl.php, page.tpl.php and node.tpl.php. And many other template files used to control the display of more specific elements such as comments or individual fields. Each of these files can be overridden for a specific condition simply by creating a new drupal tpl file in the theme folder with the correct name. These file names are called “drupal template” and there is a standard set of these suggestions built into Drupal and listed in the documentation as Drupal Template Suggestions( drupal theme hook).

Page Template Per Content Type

The most common and overriding concept we used to follow is to not includ in the default list is the page.tpl.php override based on the content type being displayed. There is a node.tpl.php override based on the same condition which leads to confusion as to where the page override exists. On top of that, themes like Zen add this type of override to the Template Suggestions, which leads those using Zen to believe that this is part of the default list. Check the theme documentation to see if this override has been added to the Template Suggestions by the theme. If it hasn’t, you need to add it manually.

The process is straightforward. We can create additional Template Suggestions simply by adding them to the ‘theme_hook_suggestions array in our template.php file.

Open the template.php file in your theme for editing.
Look for a function called yourthemename_preprocess_page (replace the yourthemename with your theme’s name).
If this function already exists, you will need to add the if statement to the end of the function just before the closing bracket. Otherwise, you’ll need to create a new function to look like this:

function THEME_preprocess_page(&$variables) {
  if (isset($variables['node']->type)) {
   // If the content type's machine name is "my_machine_name" the file
   // name will be "page--my-machine-name.tpl.php".
   $variables['theme_hook_suggestions'][] = 'page__' . $variables['node']->type;

Now you can create a template file called page--content-type.tpl.php and all nodes with that type will use the new template file.

Filename Notes:

Use two dashes after the word ‘page’ in the filename.
If your content type is two or more words, replace the underscore ( _ ) with a short dash ( - ) in the content type machine name.

Using page--content-type.tpl.php we have the feasibility to create multiple layouts for each and every bundle. And on the same layout, you can add design/functionality of your choice.