New Series: Theming Basics in Drupal 7

We've just finished posting a new video series introducing you to Drupal Theming in Drupal 7. "Theming" describes the process of customizing the look and feel of your Drupal site, which involves working with Drupal's templating system at the basic level, and writing customized theming functions in PHP at the more advanced level.

What are the basics?

With Drupal theming, you typically get 80-90% of the way working with the templating system. The page.tpl.php and node.tpl.php files are two of the most popular destinations for Drupal themers, and so we'll be exploring this templating interface where HTML authoring and Drupal meet throughout this introductory series.

We're assuming that you have enough HTML and CSS expertise to be able to chop up a Photoshop design into the necessary component parts, and so we're jumping into how to use these web development constructs within Drupal's theming system. We'll be providing you with raw design files complete with HTML, CSS, JavaScript and all of your image assets so that you can follow along with the videos.

Template Files

When you're theming a site on your own, you may find it easier to actually start with Drupal's default template files, and then alter the desired HTML mark-up to your design. But we're going to be taking our HTML design files and replacing static content with dynamic variables so that you can gain some hands-on experience with working with these template files.

Print Statements

One of the big concepts that you'll learn about Drupal theming is how to work with printing out these dynamic bits of information through variables. When you look at a Drupal template file, you'll notice a mixture between HTML tags and PHP tags that have different types of print statements. You'll learn about the process of how to debug and scope out the different variables that are available in each template file, and how to work with them.

Page Rendering

One of the big changes in Drupal 7 theming is the page rendering system. Drupal loves nested arrays, and the reason for it is that the theming system allows the flexibility for both modules and themes to take a crack at what elements are appearing on the page and where. We'll go into more depth into hook_page_alter() functionality in the advanced theming series, but for now what you need to know about is when to use the render() function, along with the show() and hide() functions when you are printing out variables.

Debugging

One other important note is that if you're familiar with using the dsm() function in Drupal 6 for debugging purposes, then prepare to start using the kpr() function that the devel module provides since the new page rendering system in Drupal 7 has changed when dsm() works and when it doesn't. One major key to Drupal theming is knowing how to effectively use these debugging statements, and where to look in the sometimes labyrinthian nested arrays for the data that your trying to expose via your theme. This is another key competency that you'll learn throughout this series.

With this introductory video series on Theming Basics for Drupal 7, we'll provide an overview of what Drupal theming is, the common files we will work with, as well as the overall steps involved. We start off by defining and taking a look at the .info file and HTML template (tpl.php) files. We talk about regions, theme features, introduce the render() function, and explain dynamic templates. While we are teaching Drupal 7 theming, we also make sure to point out the important differences between Drupal 6 and 7.

Here's a list of the chapters featured in this series:

We're not done yet

We'll be releasing the second half of this theming series within the next couple of weeks. In basic theming you don't need to know a whole lot of PHP, but with the advanced theming series we'll be using a lot more sophisticated logic that comes with writing PHP code within the theme's template.php file. We'll be able to dynamically change the values of variables, add new variables, add conditional CSS files, create template suggestions that can be automatically loaded under certain conditions, override Drupal's default theme function behavior, theme forms, and some other techniques that will be easier to understand once you see it in action. In the end, Drupal's theming system allows you to have complete control over the mark-up of your Drupal site, and we're excited to help you learn some of these best practices for Drupal theming.