In the overriding theme functions tutorial we touched on using a template.php file within your theme and hopefully you saw how powerful it can be for theming overriding, so I’ll show you a few tips and tricks I have learnt here and there.
1) Organise your code
Keep your template.php file neat and tidy by using structure, include files and commenting.
I know what it’s like when your theming your site you just want to add the code and check out the results. Before long you code is a mess with functions all over the place, no commenting and no structure and you don’t have a clue what any of it does. A few simple sets can help keep your code in a neat and organised manner.
Structure
Structure your template.php code into a manner that makes sense to you, something a simply as grouping similar functions in the same area of the code or grouping all your theme override function together in one place.
Include Files
If you find your template.php file is getting huge then consider using include files to help your organisation and structure. By this I mean putting some code from your template.php file into a separate file or files and then loading it in from your template.php file. An example might be putting all your functions that are related to users (ie. theme_username or custom profile functions) in one include file called user.inc, that way if you want to edit any user functions you know exactly where the functions are. This is a very similar approach to how Drupal core works, take a quick look in your “includes” folder to see what I mean. This technique of using include files does add small loading overheads but one or two includes won’t clog your site but don’t go mad. Commenting Ever written or borrowed a great bit of code and then gone back to it 6 months later and thought “what the hell does that do?”? Well it happens to all of us coders and it’s why it’s so important to spend a few extra minutes on your code commenting it so you know what does what and why. It’s also a great habit to get into for whatever type of coding you’re doing being it Drupal, custom PHP or Java. You don’t have to write an essay for your comments just a brief description of what the function does, any special notes your likely to forget and in some cases what parameters the function is expecting. If you’re just overriding theme modules you could just copy and paste the comment written in the module that provides the function. Here are a couple of examples of commenting in PHP (Drupal). Single line comment Block of comment No excusing for messy code now! 2) Separate your theme CSS files Drupal by standard will load your themes style.css file but can load in more CSS files at theme level using Drupals drupal_add_css function like so:
CSS aggregatorBy adding additional CSS files you can keep your Drupal styling (ie. tables, status messages and block style) separate from any custom CSS code you have written like for your layout and design CSS code and this keeps everything more manageable.
I normally have the following CSS files in my themes:
style.css – contain the default Drupal style
layout.css – contains all my CSS layout code
node-style.css – contains CSS code related to my node styling
Loading additional CSS files may slow your site a little so remember to turn on Drupals CSS aggregator once you put your site live.
3) Edit and existing theme
Drupals Creative Commons licence means you are free to take any of the themes in the Drupal theme repository and modify and then use them on your site.
So rather than writing themes from scratch find an existing theme similar to what you want to create and modify it.
Although you are free to this it always nice to credit the original theme creator on your site and don’t try and pass it off as your work, it’s just not on!
4) Use flexible column layouts
This is a great trick I learnt from the Garland theme that dynamically sets a class attribute on the HTML body tag in your page.tpl.php file based on whether your sidebars content any content or not. By setting the CSS class on the body tag you can hide columns depending if they do or don’t contain any content.
For example Drupal lets you assign blocks to regions on your site like your side columns. However imagine on one page of your site you want to hide all the columns so you change the block visibility in the blocks admin area, which should do it! Nope, the blocks are gone but the layout columns are still showing and this is how are template.php file can help by checking if your side bars have content or not.
Here are some example CSS classes you could assign to the body tag:
No-sidebars – neither sidebar has content so should be hidden
Sidebars – both sidebars contain content so should be shown
Left-sidebar – The left sidebar only contains content so should be shown
Tie this all together with some simple CSS code (see below) and you’ll have a dynamic and flexible CSS layout that adjusts itself to your content.
Lets take a look at how the Garlanc theme does this. There are three files involved in this; style.css for the CSS code, page.tpl.php for calling the worker function (phptemplate_body_class) and provides the HTML layout and lastly template.php of course which contains the worker function that decides what class to assign to the body tag.
page.tpl.php
>
style.css
/* With 3 columns, require a minimum width of 1000px to ensure there is enough horizontal space. / body.sidebars { min-width: 980px; } / With 2 columns, require a minimum width of 800px. */
body.sidebar-left, body.sidebar-right {
min-width: 780px;
}
/* So we move the #center container over the sidebars to compensate */
body.sidebar-left #center {
margin-left: -210px;
}
body.sidebar-right #center {
margin-right: -210px;
}
body.sidebars #center {
margin: 0 -210px;
}
/* And add blanks left and right for the sidebars to fill */
body.sidebar-left #squeeze {
margin-left: 210px;
}
body.sidebar-right #squeeze {
margin-right: 210px;
}
body.sidebars #squeeze {
margin: 0 210px;
}
template.php You could also use this technique for your homepage layout to hide or show elements of your site depending on whether a user is viewing your homepage or not. Using Drupal’s drupal_is_front_page function you could set the body class attribute to say “front” and then adjust your CSS accordingly. Here’s a quick bit of code you can add to your phptemplate_body_class function:
Ok that concludes my theming tips and tricks for this tutorial but I’m sure I’ll come up with more so keep checking back.
I these weren’t groundbreaking but they are things that I have found useful and that I actual use in my sites so I hopefully some of you will them useful!
Thanks for reading, please feel free to leave any comments below.