Over the last few weeks, we have explored Drupal themes and what is possible with them. While theming can be quite simple once you understand the basics, there are more advanced concepts to Drupal themes, and today we will be taking a short look at one of them. More specifically, today we are going to be taking a quick look at some of the optional sections of the info file.
In our first tutorial, we touched on some of the basic concepts in Drupal themes, including the heart of the theme, the info file. In that tutorial, only the most necessary parts were revealed, but today we are going to touch on some of the parts that are not required, but are still good to have. Before we get started, let’s review the file as it is right now:
description = The Theme used for Switch On The Code
;screenshot = zen-internals/screenshot.png
core = 7.x
engine = phptemplate
regions[top_nav] = Top Navigation
regions[content] = Content Area
regions[sidebar] = Sidebar
regions[bottom_nav] = Bottom Navigation
stylesheets[all][] = styles.css
;Theme Information
version = "0.1a"
core = "7.x"
project = "Switch On The Code"
Nothing too special, just a few regions, a stylesheet, and of course a name and description. All of this was explained in greater detail in part 1, so if you want to catch up, take a look at it.
Javascript Includes
The first addition we will be making is some script files, i.e. javascript files. The info file actually allows us to include javascript files. In Drupal 7, this is actually the only way to include javascript in the theme, so this is actually a fairly crucial aspect for more advanced themes. So with this addition, you info file might look something like this:
description = The Theme used for Switch On The Code
;screenshot = zen-internals/screenshot.png
core = 7.x
engine = phptemplate
regions[top_nav] = Top Navigation
regions[content] = Content Area
regions[sidebar] = Sidebar
regions[bottom_nav] = Bottom Navigation
stylesheets[all][] = styles.css
scripts[] = jquery-1.6.2.min.js
scripts[] = sotc.js
;Theme Information
version = "0.1a"
core = "7.x"
project = "Switch On The Code"
As you can see, it is fairly simple, in a way just like you add stylesheets. One important thing to note, however, is that you can always include your javascript files on the template pages themselves, or directly in your html template, which would be a global javascript include for every page. Using the info file is just one way to accomplish this.
Theme Features
In Drupal, there are certain featured that are offered to themes. These features in Drupal 7 include things such as a logo or a favicon. In the info file, you can turn these features on or off for your theme by listing them. If the feature is listed in the info file, then it will be available for Drupal users to take advantage of. Just remember, any feature you list, you must include it your theme in some way or another.
If we were to include every feature Drupal 7 has to offer themes, our new info would look like this:
description = The Theme used for Switch On The Code
;screenshot = zen-internals/screenshot.png
core = 7.x
engine = phptemplate
regions[top_nav] = Top Navigation
regions[content] = Content Area
regions[sidebar] = Sidebar
regions[bottom_nav] = Bottom Navigation
stylesheets[all][] = styles.css
scripts[] = jquery-1.6.2.min.js
scripts[] = sotc.js
features[] = logo
features[] = name
features[] = slogan
features[] = node_user_picture
features[] = comment_user_picture
features[] = favicon
features[] = main_menu
features[] = secondary_menu
;Theme Information
version = "0.1a"
core = "7.x"
project = "Switch On The Code"
Screenshot and PHP Version
Lastly, we have a few loose ends. First off, keen-eyed observers should have noticed that throughout the talk about our info file, there is a commented block that looks like ;screenshot = zen-internals/screenshot.png
, which you have probably figured out that it is a remnant from the theme I started this project with. However, the screenshot, while not vital, is important in depicting what the theme will look like when enabled. The reference in our info file is literally a path to the screenshot file, in relation to our theme’s root folder. So if we were to use a screenshot, we might use screenshot = sotc-theme.png
.
One last note on the info file would be the PHP version. While Drupal already has requirements for what PHP versions it supports, your theme could use features of newer versions of PHP. If this is the case, it is likely you will want to let Drupal know that your theme requires a newer version of PHP to work. To do this, you will use php = 5.3.0
, which tells Drupal your theme needs that version or higher of PHP to work correctly.
So if we add these last two snippets, we get:
description = The Theme used for Switch On The Code
screenshot = sotc-theme.png
core = 7.x
engine = phptemplate
regions[top_nav] = Top Navigation
regions[content] = Content Area
regions[sidebar] = Sidebar
regions[bottom_nav] = Bottom Navigation
stylesheets[all][] = styles.css
scripts[] = jquery-1.6.2.min.js
scripts[] = sotc.js
features[] = logo
features[] = name
features[] = slogan
features[] = node_user_picture
features[] = comment_user_picture
features[] = favicon
features[] = main_menu
features[] = secondary_menu
;Theme Information
version = "0.1a"
core = "7.x"
php = 5.3.0
project = "Switch On The Code"
So this is the info file in all its glory. There is little more to it. With that in mind, its time to wrap up this tutorial. I hope you learned a lot, and that this helps in your Drupal theme development. Just remember, when you need coding help, all you have to do is Switch On The Code.