Creating A Drupal 7 Sub Theme

By shane
Tue, 2012-12-04 21:35
comments
Daily Dose of Drupal Episode #60

Share with Others

Update: If you are looking for a written article, check out Master your Drupal Sub Theme.

Drupal has a very flexible theme system that allows a developer to easily create a sub theme that is based off of another theme. This episode goes over creating a sub-theme in Drupal 7.

In this episode you will learn:

  • The basics of a Drupal 7 sub theme
  • How to create the info file of a Drupal 7 sub theme
  • How to override CSS or JS from the base theme in your Drupal 7 subtheme
  • How template files can be overriden in your Drupal 7 sub-theme

Welcome to the Daily Dose of Drupal, this is Episode Number 60. As always; I’m Shane and you can follow me on Twitter @smthomas3, you can also go to codekarate.com and sign up for the newsletter here on the left if you haven’t already.

Today we’re going to be talking about Theming and more specifically how to create a simple sub-theme. So we’re going to just breeze over the basics of Sub-Theming and how you can use it to start building a sub-theme for your Drupal website. There’s an article on drupal.org called Creating a Sub-Theme which is very helpful.

If you haven’t read it or if you’re looking to learn how to create a sub-theme go ahead and take a look at that and it’ll give you a lot of information that we’re going to cover today but it’ll also go to a lot of details that we’re not going to have time to go over.

So what is a Sub-Theme? Well if your familiar with Drupal, all you’ll know that you can change the theme of your Drupal website, so if I go into the Appearance section on Drupal 7 you can switch from a Bartik theme to this 7 theme, these are both core themes in Drupal, you can see that it of course changes the appearance of the entire website.

What a sub-theme allows you to do is it allows you to extend one of these themes so you don’t have to write every piece of code, you can use Implement and reuse the functionality that you need to build your own theme. So this can be useful for a lot of reasons, you know, saving time from having to rewrite the wheel every time.
So even though you may not be comfortable creating a theme from scratch, creating may actually need the best starting spot for you if you’re learning theme development. There are lots of based themes that are very popular on drupal.org such Zen which is one that I’ve used frequently, Omega and there’s a bunch of other ones you could find. If you look at the popular theme, the top five or ten are mostly self or a lot of them at least are themes that are used mainly as based themes.

What we’re going to do today is we’re just going to take the Drupal 7 Bartik Theme which comes with core Drupal 7 and created very simple sub-theme and just go over what some of the things you can do with some theming in Drupal 7.
So we’re going to get started; the first step is to create as you can see I have my Drupal right here, I’m going to go into the themes directory, this is the Bartik Theme. I’ll be using some information from here but I’m going to go into my sites directories and I’m using a multi-site but this will often be sites all themes and I’m going to create a folder, I’m going to call this Code Karate Bartik.

Inside here I’m going to go ahead and create a file called codekarate_bartik.info and as you can see I already opened up the bartik.info file, I’m also going to ahead and open up this new file I just created. What I’m going to do is I’m going to take most of this, I’m just going to copy this over and we’re not going to use all of it, we’ll be getting rid all of the chunk of it but just as a good starting point I’m going to name it codekarate_bartik subtheme, don’t worry about the package or the version, we’re going to get rid of all the style sheets here and what that will do is it’ll make sure I’m using the style sheets from the core Bartik theme, I’m going to go ahead and keep all these regions, I’m going to get rid of this shortcut link but what the regions do is you’re generally going to want to keep all the regions from the base theme, you can then add your own or modify them if necessary but since all the template file has use this regions it’s best to start with all the regions from the base theme and then you save it and that’s it.

We now have a working sub-theme, I’m going to go ahead and cleat the cache, it’s good for a little fun to do if you add in new themes or changing anything in your themes .info file, I’m going to come in to the appearance and you’ll notice I now have codekarate Bartik, there’s no screenshot so I’m going to … I could add my own but I’m going to just copy the one from Bartik, the logo and the screenshot, copy it over, paste it in, it be looking a little bit better now.

I’m going to go ahead enable this Code Karate Bartik and set it to default. But before we do; we click on Settings for the Bartik Theme, you’ll notice there is this color module iteration, I’m not going to go over that today but I may in a future episode go over how to add that to a module.

I’m going to go ahead and enable this new theme that we created and set it as a default and as I mentioned before; this is right now just an info file it’s using all the code from this Bartik theme. The settings are a little different so it does have a color module integration as I mentioned before but if I go to the homepage it looks a little different than what it should, let me clear the cache here and make sure that everything is … oh I missed the most important part about creating a sub-theme.

In order to create a sub-theme you have to add one item to your info file to tell Drupal that it is going to use the style sheets and the templates in Java Script files from the base theme. There’s a little line that you need to add to your .info file and obviously as you can tell this is very important, it’s the line, this is base theme and what is the base theme? In this case; if you look its bartik.info so the base theme is called Bartik, let’s save this, clear the cache and now things should start looking a little bit better, as you can see it looks identical because it’s using the same code which makes sense.

If you can of course override in lots of things within the theme, let’s say for instance I want to declare and use my own style sheet and you’ll notice in the Bartik theme there’s a style .CSS file. Let’s say we wanted to go ahead and not use that style, that CSS file and we wanted to create our own.

Let’s create a CSS folder and we’ll create a style sheet that has the same name so it overrides that style sheet then we need to hop into our info file, copy the line that says adds a style, that CSS style sheet drop it in and save the file, clear the cache and I will refresh the page and you’ll notice things looking a little less organized because that style, that CSS style is now gone in favor of are now blank style that CSS style sheet in our sub-theme.

So we’ll go ahead and open up that CSS file up and add our own styles to it and reorganize the page as we want. You can do the same thing with Java Script files as in your Java Script files in the theme, you can off course add as many styles sheets or Java Script files as you want.

Another thing that you’re going to need do often is override a template file, you’ll notice you can come in to a theme; it’s built with a bunch of template files here. There’s a template file for any node page, there’s a template file for the page.tpl.php. This template file controls the general outlook of or the general structure of almost all pages on the Drupal website.

We’re going to go ahead and make a copy of that; go into our sub-theme, create a templates folder, you don’t necessarily have to put in on a templates folder but I would recommend it and paste it in.

Now we can actually modify this page.tpl file in our sub-theme without changing the base theme at all and because we overrode … there we edit our own template file this file takes precedence and will be the one used instead of the template file in the base theme which is Bartik and it still use the other Bartik template files but in this case the page in the TPL file that it uses will be the one from our sub-theme.

Just to show you an example of how it works you could of course do whatever you want here but right here is the main menu, I’m going to go ahead and just to show you that it’s working, it’s going to delete the main menu section right out of the page.template or change that tpl.php file, if I refresh you’ll notice that it’s still there, I’m going to clear the cache so it reads in my template file versus the original, refresh, now you can tell that the main navigation is gone.

The other thing that you’re going to want to do is create a template.php file, you’ll notice in the Bartik theme and basically all things there’s going to be a template.php file. This is used to create theme functions, override functions actually and also use for pre-process functions.

This works in a couple of different ways depending on what type of function you’re using, if it’s a theme function, it you override that theme function in your base theme it’s going to use that theme function from your base theme. So for instance you may want to override the way that all tables look on the site.

So there’s a theme function called Theme Table and you could override that in your template.php file that you created. If it’s a pre-process function it handles a little bit differently, it’s going to first run it through the base theme … the pre-process function of the base theme and after it runs it through the pre-process function of the base theme it will run it through the pre-process function on the sub-theme.

So if you use the … in this case Bartik pre-processed HTML I created a template.php file in my sub-theme, I named it Code Karate Bartik Pre-Process HTML, this function would run first, followed by the Code Karate Bartik Pre-Processed HTML in my sub-themes template.php.

So depending on if it’s a theme function or if it’s a pre-process function it’s slightly differently and of course that’s all documented here in this document as well as the diagram showing that you can have multiple sub-themes. You can have a sub-theme based on a base theme and a sub-theme based on that sub-theme.

So just keep in mind this makes an incredibly flexible and make sure you don’t have to rewrite the wheel each time, you can create one base theme that has 90% of most of the sites you’re going to create if you’re creating multiple sites and then you can use that as starting point to make sure you don’t have to rewrite the same CSS and same Java Script across multiple websites.

So just a way to make it more efficient and make it easier to build out themes at Drupal, go ahead and give it a try, start creating your own sub-themes and let me know if you have any questions. Thanks for watching the Daily Dose of Drupal, as always follow me on Twitter, find me on Google + and check out the codekarate.com newsletter. Thanks for watching.