Taming the beast (Drupal theming)

If you are new to Drupal 7 (theming) but have some basic PHP knowledge this blog is for you. We'll create a new Drupal theme and learn to style our theme.
Requirements:

You'll need a copy of Drupal 7 which can be found at https://drupal.org/project/drupal. I assume you already have a working local environment to manage your local site like MAMP http://www.mamp.info/en/index.html. Install Drupal as described in the Drupal docs https://drupal.org/documentation/install

Create a new theme

A quick way to start a new theme is by copying an existing theme such as bartik, which can be found in the folder /themes, and copy and rename the folder this to /sites/all/themes/YOURTHEMENAME. Let's call this theme vdmi for further reference. (You can pick any name you want of course.)

If you want to start from another theme you can also take a look at https://drupal.org/project/themes

Info file
When copied rename the bartik.info file (in the root folder of your new theme) to your new theme name: vdmi.info.

In this file set the variable name to:name = vdmi

template.php
In this file replace all bartik function instances with vdmi.

Activate your new theme
Now that we have a new theme we should activate it by visiting: admin/appearance. Enable your new theme as default theme.

Styling content

Add some content by going to node/add, add content and save the page.

Now that we have some content let's customize our theme. It's important to understand some of the logic behind Drupal. Drupal works with template files called *.tpl.php. This is where we can add or change our HTML.

Hierarchy
Here's a list of files showing the global hierarchy in Drupal:

html.tpl.php -doctype, head, meta tags, CSS and JS are inserted here. The most used variables in this file are: $head, $styles, $scripts, $page, $page_top and $page_bottom. Note: This file is not included in the bartik theme, if you need it copy it to your vdmi folder from /modules/system/html.tpl.php and clear Drupal's cache by visiting: /admin/config/development/performance
page.tpl.php - The main content of a page or content type can be found here. Some variables from this page are $page['content'], $messages. This is also where Drupal renders regions defined in the .info file. I.E. print render($page['region_name']);
node.tpl.php - All fields defined in a content type are rendered here. I.E. the body and custom fields. They can be found in the $content variable. To render a single field use print render($content['field_name']); in this file. To print all fields except one (for later use) use hide($content['field_name']); and then print render($content);

Note: I haven't addressed the block template. If you need it copy it from /modules/block/block.tpl.php into your theme and clear Drupal's cache at: /admin/config/development/performance.

Template.php

Most of the variables that are available in the above templates derive from a file called template.php.
This file can be found in /sites/all/themes/vdmi/template.php.
Template.php is mostly used to override existing (theme) functions from Drupal core and other modules.
Here's an example:

With Drupal you'll get an abundance of CSS files by default. Let's do some cleaning up. First we remove most CSS files from Drupal core by hooking into the system function hook_css_alter().

https://api.drupal.org/api/drupal/modules%21system%21system.api.php/func...

/** * Implements hook_css_alter(). */ function vdmi_css_alter(&$css) {   unset($css[drupal_get_path('module', 'system') . '/system.menus.css']);   unset($css[drupal_get_path('module', 'system') . '/system.messages.css']);   unset($css[drupal_get_path('module', 'system') . '/system.theme.css']);   unset($css[drupal_get_path('module', 'user') . '/user.css']);   unset($css[drupal_get_path('module', 'node') . '/node.css']);   unset($css[drupal_get_path('module', 'field') . '/theme/field.css']); }CSS

If we want to add a new CSS file create vdmi.css in the css folder in your custom theme.

We can let Drupal know about our custom CSS in two ways:

Add it to the vdmi.info file by inserting stylesheets[all][] = css/vdmi.css.
In our template.php by adding the css to the page variables like this:

function vdmi_preprocess_page(&$vars, $hook) {   drupal_add_css(drupal_get_path('theme', 'vdmi') . '/css/vdmi.css'); }

You need to clear Drupal's cache for changes to take effect.

Javascript

To add Javascript we can use something similar:

scripts[] = js/vdmi.js in vdmi.info
drupal_add_js(drupal_get_path('theme', 'vdmi') . '/js/vdmi.js'); in vdmi_preprocess_page function in template.php

When using jQuery you'll have to add the following code in your js file to initialize properly.

(function ($) {   Drupal.behaviors.vdmi = {     attach: function(context, settings) {       //your code here     }   } })(jQuery);Addressing specific pages or nodes

You'll probably want to theme different content types in a different way. This can easily been done with some custom templates. Assuming you've created a new content type 'news' in Drupal (admin/structure/types/add) you can use 2 templates for page and field theming.

Copy and rename page.tpl.php to page--news.tpl.php
Copy and rename node.tpl.php to node--news.tpl.php

You need to clear Drupal's cache for changes to take effect.

Changes you make in these templates only effect the news pages.

Take note of the comments in these files to get an idea what is possible and what's not.

Conclusion

There you have it. You should now have a basic foundation to work on. There's lot's of more detailed information on https://drupal.org.

Original Article:

Taming the beast (Drupal theming)