Master your Drupal Sub Theme
Tags:
Awhile back I posted a video on setting up a Drupal sub-theme. If you want, you can check out that video here. I think that the video does an alright job of explaining the steps you have to take to get a sub-theme to work properly. I don't however think it provides enough of the setting up a sub-theme "meat" needed to begin. The saying goes, the devil is in the details. Personally, I never liked that quote, but it is fitting here. Anyway, if you're looking to get a full in-depth guide to setting up a Drupal sub-theme, you, my friend, just need to keep scrolling.
Let's begin.
You want to place your base theme here as this is the folder that Drupal will look for your sites themes. If you want, you can download other base themes and move them inside the sites/all/themes folder. That's it, well at least for the Drupal base theme.
Which the STARTERKIT folder selected go ahead and cut and paste the folder within the themes folder. Yep, this is the same place you put the Zen base theme. So when you are done, you should have two folders under the themes folder, one for Zen, and one for STARTERKIT. It is super important that these both are on the same level. If they aren't on the same level, then Zen won't know how to reference the sub-theme you will create.
Still within the sub-theme, open up the theme-settings.php and template.php files. Within both of these files, you want to change EVERY instance of STARTERKIT to your theme name. For my example, I would replace STARTERKIT with codekarate. It's important that this matches EXACTLY to your theme name. A little hack is if you use the find and replace feature you can pretty quickly replace all of those instances.
To modify ANY template you HAVE TO HAVE the html.tpl.php file within your sub-themes template folder. If you don't, no changes will take effect. Also, by default if you don't copy a template from the base theme to your sub-theme Drupal will remain using the template in the base theme.
What is a sub-theme anyway?
This seems like the appropriate place to start. Drupal has two types of themes; you have a base theme and a sub-theme. A base theme (Zen for example) provides basic theme design and functionality. The work has already been done for you. Cha-ching! A sub-theme provides all the unique design and functionality. A sub-theme where you get to build the exact website of your dreams. If you're still confused, try thinking of it this way. Let's assume a base theme is the basic vanilla ice cream cone. A plain vanilla cone is still a cone. You could eat it up and leave happy, but what if you wanted to add some strawberry syrup? Adding the strawberry syrup is like adding the custom design to your site. So instead of having to create the entire cone (remember the vanilla was already provided) you just have to add the strawberry syrup or whatever you want to build the ice cream cone you desire. Drupal base themes and sub-themes work exactly like this. Using a base theme will provide you a lot of the design and functionality you need and then you can use a sub-theme to design the site exactly how you see fit.Are all base themes created equal?
This is kind of a hot topic with designers in the Drupal community. In my opinion, the answer is nope. Every designer has their personal preferences to which base theme to use. Some of the most popular base themes are Zen, Omega, Fusion, and Basic. Personally, I use Zen. Any theme can be made into a sub-theme. This makes choosing a base theme endless. If you're just getting started with designing in Drupal, it is best to spend some time working with a variety of theme to find which theme works best for your coding style. Here a few reasons why Zen works for me.- Widely supported and used (over 1.5 million downloads)
- Responsive out of the box
- Supports SASS
- Follows a concise file structure
- Easily customizable
Downloading and enabling Zen
Let's start with getting Drupal Zen installed. You will want to go here and download the newest recommended release of Zen. To download, simply click on the either the .zip folder or .tar.gz folder. Once the download is complete go ahead and extract (unzip) the folder. Note: I'm assuming you're using Drupal 7. If you're using a different version of Drupal things aren't going to work exactly the same. Next, we need to move the folder onto our site. If you don't currently have a site setup, you can follow along with this video on setting up a site using Blue Host. If you have a site created already use your FTP client and move the folder into the sites/all/themes folder.
You want to place your base theme here as this is the folder that Drupal will look for your sites themes. If you want, you can download other base themes and move them inside the sites/all/themes folder. That's it, well at least for the Drupal base theme.
I'll add a little sub-theme to my base theme, please
This is where things start to get exciting. By exciting, I mean that in the nerdiest of ways. With the base theme installed, go ahead and navigate to the folder labeled Zen. Within the Zen folder, you will see a folder labeled STARTERKIT. This folder is our sub-theme. One thing of note, Zen provides you a sub-theme some of base themes will not. This is just another reason Zen is a great option!
Which the STARTERKIT folder selected go ahead and cut and paste the folder within the themes folder. Yep, this is the same place you put the Zen base theme. So when you are done, you should have two folders under the themes folder, one for Zen, and one for STARTERKIT. It is super important that these both are on the same level. If they aren't on the same level, then Zen won't know how to reference the sub-theme you will create.
Getting into the sub-theme details
Things are progressing nicely. We now have our base theme and sub-themes installed and in the right locations. Now we are going to look at configuring the sub-theme. The first thing I like to do is rename the STARTERKIT folder to something a little more meaningful. You can name the folder however you want, but a few things to keep in mind is to avoid spaces and use a name that represents the site your building. For example, I like to use the company name the site is for. There are few files that will need some attention. The first file you want to look at is the STARTERKIT.info.txt file. An info file is a static file for defining and configuring a theme. Before we edit the contents of the file go ahead and rename the file. For consistency sake, I always name the info file the same name as my sub-theme. So if I named my sub-theme codekarate, my info file would be named codekarate.info. You can go ahead and get rid of the .txt extension also. There is more in the .info file then I am going to cover in this post. If you would like more information about the .info file, just make sure to let me know in the comments below. Within the .info file go ahead and change the name and the description to something that fits your sub-theme. For the description, it's could practice to include information as to what base theme this sub-theme is using. So for example you description might look like this: "A custom theme for [store], based off of Zen.". Take this for what it's worth, it's 100% preference. For now, that is all you need to change within the .info file.
Still within the sub-theme, open up the theme-settings.php and template.php files. Within both of these files, you want to change EVERY instance of STARTERKIT to your theme name. For my example, I would replace STARTERKIT with codekarate. It's important that this matches EXACTLY to your theme name. A little hack is if you use the find and replace feature you can pretty quickly replace all of those instances.
Customizing the look with templates
We've spent a lot of words to get to this point. Thankfully, you're so close to the finish line. Before you click off and start building, I want to show you one more thing. Zen works off of templates. These templates use HTML and PHP to control how the content is displayed on the site. There are templates for a variety of different sections of your site. Each of these templates controls the HTML structure and what pieces of content get displayed. They are super powerful. Here's the but. Since you are building your own custom sub-theme you don't want to just rely on the templates provided by the Zen base theme. You want the control, now let's take that control. Within the Zen folder, locate a folder called templates. Inside of this folder are all the templates that control the layout of your site. Go ahead and copy the html.tpl.php and page.tpl.php files and paste them within your sub-themes template folder.
To modify ANY template you HAVE TO HAVE the html.tpl.php file within your sub-themes template folder. If you don't, no changes will take effect. Also, by default if you don't copy a template from the base theme to your sub-theme Drupal will remain using the template in the base theme.