The basics of Drupal theming

Drupal core has a templating system built-in by default, so even without a theme, a basic page would still be outputted.  This makes it different than other CMSes like Wordpress or Joomla!

Note: The following information is for Drupal 7, though Drupal 8 is similar.

At it most basic, all a theme really needs is an .info file. An info file can include information such as:

  • Name of theme
  • Screenshot
  • Description
  • Stylesheets
  • Scripts
  • Theme regions

An info file can also define regions for a theme. If you don't define regions, Drupal will use the default regions. Note that if you define regions, you must define a content region.

You can create comments in the info file by beginning a line with a semi-colon.

As .info files are stored in cache, anytime you make changes to it, you need to clear all caches for the changes to take effect.

Regions in the info file are displayed in order so make sure they are in correct order e.g. header top, footer bottom

You can have as many regions as you want in your .info file, you are not restricted to what Drupal has.

You can also add features to the info file. If you don't add them, Drupal will just use the default features.

The logo and site name are built-in to Drupal settings, and are configured inside Drupal’s configuration screens.

A theme contains a number of different filetypes:

.info - declare styles and regions

.css files - define the appearance of the theme

Template files - controls the structure of the HTML

template.php - use functions to override output.

 

Drupal has a number of important template files:

html.php.php

  • Constructs web page output
  • Contains what is between the head tags on a page.
  • Calls page.tpl.php

page.tpl.php

  • Contains contents that are between wrapper div tags.

Inside the page.tpl.php file where regions are called, they pull in the region.tpl.php file.

  • Allows us to easily change the styling of a region.
  • A custom search region might have its own file such as region—search.tpl.php

If we assign blocks to a region, Drupal pulls in block.tpl.php

node.tpl.php - called to display content for any page

field.tpl.php - fields that are included in a node are completely customizable.

comment-wrapper.tpl.php - brought into node.tpl.php

Drupal has a long list of template files, and many modules add their own ones too.

Drupal uses a system of overrides - a cascading order. Drupal will always use the most specific template it finds. Drupal core first calls its own .tpl.php files, then custom ones that you define.  Drupal modules apply their own .tpl.php files and overfits any css calls in core tpl.php files.

Never hack a core file or theme, so updates can be applied easily. Instead, make changes in your own them files.

Your theme has its own .tpl.php files that are called last and over-write any calls into core tpl.php files. So your theme has the final say.

An important concept to understand is renderable arrays. Drupal delays rendering for as long as possible, allowing the theme layer more control over what gets printed, where and when.

Notes about Javascript in Drupal:

  • Javascript added at the theme level are loaded after core and module js.
  • Theme js files are automatically added to all pages
  • All script files must be specified

An alternative is to add scripts to the template file using drupal_add_library()