Drupal 7 theme structure

Jul 11, 2011
by Ivan

I decided to create an explanatory graphic that ilustrate the different theming portions of Drupal 7 and how to access and modify them. This is not a theming tutorial but a quick guide to see the different parts of a Drupal theme.

Notes:

 

  1. Page.tpl.php is basically where your main layout is. If you are starting from an HTML file, you can do the same as me and rename it to page.tpl.php and start populating the necessary elements. You can see which elements here.

    This page needs to contain everything that goes inside the body (you shouldn't add the <body> tags here).

  2. In Drupal 7 everything that holds content is a region, even the region that holds the "content" block.

  3. Node.tpl.php is the themed representation of a content entry and when listing content this file will be called multiple times, one after another.

  4. A block is just a piece of content that can be plain HTML or be generated from a module. (Like the Login block)

  5. A region is what holds multiple blocks. These are the defined in the .info file and called in page.tpl.php

Worth mentioning:

  • When creating the theme.info file, starting from Drupal 7 you need a region called "content" or the theme will show up as incompatible in Appearance settings.

  • I'm not including all the TPL files but the ones I use the most.

Core TPL Files

Here's a list of the core TPL files source code. It's always good to go back to them to see what you have available on each template file.

There are many more TPL files but these are the most used ones.

Creating a basic theme

First of all pick a name like "mytheme2011" and create a folder in:

/sites/all/themes/mytheme2011

Then inside, create the file mytheme2011.info and add the files you will be using. Here's an example for a simple site

name = "MyTheme 2011"
description = " First version of it"
version = "1.0"
core = "7.x"
engine = "phptemplate"
stylesheets[all][] = "css/html5reset.css"
stylesheets[all][] = "style.css"

scripts[] = "scripts/main.js"

regions[top] = Top
regions[right] = Right
regions[content] = Content
regions[footer] = Footer

Now you should be good to go. Go ahead and create page.tpl.php and start populating the content. Pro Tip: Include important variables like $messages as it is your way of debuging.

Like a said, this is not intended as a theming tutorial but as a quick guide for starting a new theme. Leave a comment if you would like to see something added to it.

Posted in
Drupal