Simplifying Your Page.tpl.php File
Whenever I start work on modifying an existing theme it’s always important for me to first understand how the whole thing is hanging together. Whilst most theme folders will, broadly, contain the same files (node.tpl.php, template.php etc.) the content within those files can be quite different, and taking a bit of time at the beginning of a project to understand what’s where can save you a lot more time in the long run.
Ordinarily, I will begin by looking at the page.tpl.php file. This file contains the main chunk of code which determines where stuff is going to end up on your web page, and how it will be structured. The problem is that this file can seem a bit confusing at times, and if you’re a little unsure about your PHP one look might just send you running ;) Unfortunately, this is particularly the case for the page.tpl.php file of Drupal’s default theme Garland, which is, at best, a little untidy.
As a way to help me more clearly understand how the whole thing is structured I duplicate the page.tpl.php file, rename it to something obvious like duplicate_page.tpl.php, and then strip out everything which is causing a mess.
So, for instance, taking the Garland page.tpl.php file as an example, removing all of the PHP and tidying things up a little leaves me with the following:
<!DOCTYPE>
<head>
<title></title>
</head>
<body>
<div id="header-region" class="clear-block"></div>
<div id="wrapper">
<div id="container" class="clear-block">
<div id="header">
<div id="logo-floater"></div>
</div>
<div id="sidebar-left" class="sidebar">
<div class="block block-theme"></div>
</div>
<div id="center">
<div id="squeeze">
<div class="right-corner">
<div class="left-corner">
<div id="footer"></div>
</div><!-- /.left-corner -->
</div><!-- /.right-corner -->
</div><!-- /#squeeze -->
</div><!-- /#center -->
<div id="sidebar-right" class="sidebar">
<div class="block block-theme"></div>
</div>
</div><!-- /#container -->
</div><!-- /#wrapper -->
</body>
</html>Much better :)
Remember, I’m not altering the real page.tpl.php file here! This is simply for my own reference so that I can see the entire structure at a glance, and then look at more detailed sections in the real page.tpl.php file if I need to.
2 comments
@ 12:05am
If its too complicated for me to keep the structure in my head then I make a wireframe. So, I have a good visual aid that shows me the main structure, ids, and classes at a glance. I use other programs also, but Fireworks is great for these kind of quick layouts.
@ 10:55am
Sean, that's a good idea. It can definitely help to have a clear visual of what's where in your structure. I know, for example, that Andy Clarke created a graphical representation of the CSS Zen Garden structure which I think a lot of people find very useful.
Comments are closed
If you want to ask a question or have something to add please contact me.