While we have previously looked at installing contributed themes and extending base themes using sub-themes, this recipe will outline the steps required to create a custom theme.
It is assumed that the sites/all/themes folder has already been created. This is the recommended location to place custom and contributed themes.
Creating a brand new custom theme is not unlike what we did in Chapter 2, Beyond the Basics, in creating a sub-theme for a core theme. The main difference is that there is no base theme and that files such as page.tpl.php will need to be explicitly defined.
- Create a folder with the new theme's name inside the
sites/all/themesfolder. In this example, we are going to call our thememytheme. - Create a file named
mytheme.infoand open it in an editor. - Add details about the theme as follows:
name = My theme description = My custom theme core = 6.x engine = phptemplate
- Save the file.
- Visit the theme administration page at
admin/build/themes(Home | Administer | Site building | Themes) and we should be able to see a new entry for our theme.
- Enable the theme by checking its Enabled checkbox.
- Also, set it as the default theme by selecting its Default radio button.
- Click the Save configuration button at the bottom of the page to save the changes.
Just as with other themes, Drupal scans the sites/all/themes folder looking for .info files which indicate the presence of a theme. Seeing mytheme.info, it parses the file and loads the details of the theme, and saves them in the database.
When the new theme is enabled, what we will see is largely unstyled content not unlike the following screenshot. The problem here is that we have not specified any CSS stylesheets to lay out the page. The only styles being loaded are those that are module-specific as opposed to theme-specific.
The styles being used in the preceding screenshot are as follows:
<link type="text/css" rel="stylesheet" media="all" href="/mysite/modules/node/node.css?u" /> <link type="text/css" rel="stylesheet" media="all" href="/mysite/modules/system/defaults.css?u" /> <link type="text/css" rel="stylesheet" media="all" href="/mysite/modules/system/system.css?u" /> <link type="text/css" rel="stylesheet" media="all" href="/mysite/modules/system/system.css?u" /> <link type="text/css" rel="stylesheet" media="all" href="/mysite/modules/system/system-menus.css?u" /> <link type="text/css" rel="stylesheet" media="all" href="/mysite/modules/user/user.css?u" />
As we can see, the only stylesheets in evidence are those belonging to core modules and none from our theme. In addition, Drupal has noticed that we do not have any template files in our theme, most notably, page.tpl.php. Therefore, it has loaded an inbuilt page template file from modules/system/page.tpl.php and used it instead. Similarly, it is using the node.tpl.php file from modules/node/ as the basis for each node's layout.
In other words, we have a lot of work ahead of us in getting things up and running especially if our eventual requirements are going to be complicated. As we will see in the next recipe, this is one of the reasons why most themers prefer to use a starter theme and hit the ground running.