Creating A Drupal 7 Sub Theme - Daily Dose of Drupal episode 60

welcome to another daily dose of Drupal this is episode number 60 as always I'm Shane you can follow me on twitter at sm thomas 3 you can also go to code crown EECOM 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 it'll give you a lot of the information that we're going to cover today but it'll also go into a lot of the details that we're not going to have time to go over so what is a sub theme well if you're familiar with Drupal at all you'll know that you can change the theme of your drupal website so by going into the appearance section on Drupal 7 you can switch from a Bartek theme to this 7 theme these are both core themes in Drupal you can see that 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 reorient have to write every piece of code you can just 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 a sub theme may actually be the best starting spot for you if you're learning theme development there are a lot of base themes that are very popular on drupal.org such as Zen which is one that I've used frequently Omega and it's just a bunch of other ones you can find if you look at the popular themes their top 5 or 10 or mostly sub or a lot of them at least are themes that are used mainly as base themes well we're going to do today is we're just going to take the Drupal 7 bar tech theme which comes with core Drupal 7 and create a very simple sub theme and just go over what some of the some of the things you can do with sub 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 root here I'm going to go into the themes directory this is the Bartek theme I'll be using some information from here but I'm going to go into my site's directory and I'm using a multi-site but this would often be sites all themes and I'm going to create a folder I'm going to call this code karate bark tick inside here I'm going to go ahead and create a file called code karate bark ticket info and as you can see I already opened up the bark ticket info file I'm also going to go 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 it over and we'll we're not going to use all of it will be getting rid of a good chunk of it well it just as a good starting point I'm going to name it code karate bark tick call it code karate bark tick sub-theme won't worry about the package or the version 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 Korb arctic theme I'm going to go ahead and keep all these regions I'm going to get rid of this shortcut link but I'm 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 files use these 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 clear the cache it's good rule of thumb to do if you adding new themes or changing anything in your themes dot info file I'm going to come into the appearance and you'll notice I now have code karate bark tick there's no screenshot so I'm going to I could add my own but I'm going to just copy the one from Arctic the logo and the screenshot copy it over paste it in should we look at a little better now I'm going to go ahead and enable this code Crotty bark tick and set it to default but before I do if you click on settings for the Bartik theme you'll notice there is this color module integration I'm not going to go over that today but I may add 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 it this is right now just an info file it's using all of the code from the spark tech theme the settings are a little different so it doesn't have the color module integration as I mentioned before but go to the homepage and looks a little different than what it should we clear the cache here and make sure that everything is oh I miss the most important part about creating a sub theme in order to create the 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 and JavaScript files from the base theme there's a little line that you need to cut add to your down info file and obviously as you can tell this is very important it's the line that says base theme and what is the base theme in this case if you look it's bark ticket info so the base theme is called bark deck now 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 you can of course override a lot of things within the theme let's say for instance I want to declare and use my own style sheet you'll notice in the bark tech theme there's a style dot CSS file let's say we wanted to go ahead and not use that style that CSS file 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 this adds a style that CSS stylesheet drop it in save the file clear the cache and I will refresh the page and notice things are looking a little less organized because that's the style that CSS style sheet is now gone in favor of our now blank style that CSS style sheet in our sub-theme so we could go ahead and open that CSS file up at our own styles to it in Rio the page as we want you can do the same thing with JavaScript files there's a new JavaScript files in the theme you can of course add as many other style sheets or JavaScript files as you want another another thing that you're going to need to do often is override a template file you'll notice if you come into 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 dot PHP this page template file controls the general outlook of where 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 the templates folder but I would recommend it and paste it in now we can actually modify this page that TPL file in our sub theme without changing the base theme at all and because we overrode there we added 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 Bartek it'll still use all the other Bartok template files but in this case the page that 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 a main menu I'm going to go ahead and just to show you that it's working I'm just going to delete the main menu section right out of the page template your page that TPL dot PHP file if i refresh you'll notice it's still there I've got to go 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 you're going to want to do is create a template dot PHP file you'll notice in the Bartek theme and in all basically all themes there's going to be a template dot PHP file this is used to create theme functions / or override theme 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 if 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 dot PHP file that you create if it's a pre process function it handles it a little bit differently it's going to first run it through the base theme the pre process function on the base theme and after it runs it through the pre process function on the base theme it will run it through the pre process function on the sub-theme so if you use the in this case bark tech pre process HTML if I created a template dot PHP file in my sub theme named it code karate bark dick pre process HTML this function would run first followed by the code the code karate barked ik pre process HTML in my sub-themes template dot PHP so depending on if it's a theme function or if it's a if it's a pre process function its handles slightly differently and of course that's all documented here in this document as well as a diagram showing that you can have multiple sub themes so you could have a sub theme based off a base theme and then a sub theme based off that sub theme so just keep in mind this makes it incredibly flexible it makes make sure you don't have to rewrite the wheel each time you can create one based game that has 90% of most the site's you're going to create if you're creating multiple sites and then you can use that as a starting point to make sure you don't have to rewrite the same CSS and same JavaScript across multiple web sites so just a way to make it more efficient and make it easier to build out themes in 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 code karate comm newsletter thanks for watching

Channel: Code Karate

Views: 12,666

Rating: 4.9333334 out of 5

Keywords: Daily Dose of Drupal, DDoD, Drupal, Theming, Sub Theme

Id: xB7qjZlVKQo

Length: 12min 36sec (756 seconds)

Published: Tue Dec 04 2012