Organizing your theme files in Drupal 7

When working on a large Drupal site, your theme can become quite complicated with dozens of templates or template overrides, images, css files, javascript files and even a massively large template.php file. Sometimes all these files will get dumped into the root of the folder making specific files difficult to find.

Here are some best practices when organizing your theme folder to make things easier to find.

CSS, Javascript and Images

Keep these files in separate folders like so:

theme-name/js/
theme-name/css/
theme-name/images/ 

or you may want to organize them into an assets folder like this:

theme-name/assets/js/
theme-name/assets/css/
theme-name/assets/images/ 

It is important to remember when do this that, in order for Drupal recognize the location of your templates, the core base file must first be present. For example, the node.tpl.php file, must be in your node/ folder before any other node type derivative templates will be recognized.

Template Files

Put all your template files into a templates directory, then further separate them by the base template type (ie. page, node, block, view). Here is how that might look.

theme-name/templates/page/page.tpl.php
theme-name/templates/page/page-front.tpl.php
theme-name/templates/node/node.tpl.php
theme-name/templates/node/node-blog.tpl.php
theme-name/templates/views/views-view.tpl.php
theme-name/templates/views/views-view-fields--directory.tpl.php
theme-name/templates/views/views-view-field--user-list.tpl.php
theme-name/templates/block/block.tpl.php
theme-name/templates/block/block-footer.tpl.php
theme-name/templates/block/block-login.tpl.php 
template.php

If your template.php file becomes a monstrosity, you may want to split it up into multiple files. You can do this by simply creating new files to move your code into and adding the necessary PHP require statement to the top of your template.php file.

Generally speaking we should have any site specific code in a theme template.php, if you do think about extracting that code into a custom module or feature.

Here is how you would change your template.php file.

require "template-overrides.php";
require "template-preprocess.php";
// Whatever code you want to stay in template.php 

And here is what your filesystem would look like.

theme-name/template.php
theme-name/template-overrides.php
theme-name/template-preprocess.php