 Alright everyone, welcome to DrupalCon. I hope you all have had a good morning so far. I hope you attended the keynote session. It should have been pretty enlightening, I hope. So my name is David Needham. I work for Chapter 3, and this is beginner theming. Can people in the back hear me okay with the mic? Do I speak up? Alright. Can we get the mic turned up a little bit? Thank you. Alright. So let me just start by introducing myself. Again, my name is David Needham. I work for Chapter 3. At Chapter 3, I am a Drupal themer and trainer, so that means I like to make websites look pretty, and then I like to go around telling people about how to make websites look pretty, and also just, you know, the basics of Drupal and stuff like that. So I have been working in Drupal for about four or five years or so, and theming was always kind of a mystery to me. It was kind of a hidden layer of Drupal. It wasn't very intuitive to start, and so I always like to do these sessions on beginner theming, because I feel like as someone who's been in it this long, I can give some perspective on exactly how to get started with theming, and then also, you know, why you care about doing things a particular way. So if you would like to follow along with the slides, you can. This is just a website on GitHub, so if you follow this here, you can go through and click along with me. I am going to be doing a demo near the end. You guys don't have to follow along with that if you don't want to. If you happen to have something available, feel free. So who is Chapter 3? Well, Chapter 3 is a company based out of San Francisco. We have been big into the community for long before I was involved in Chapter 3. We put on our help to organize Bad Camp this last year and this upcoming year as well. We hosted DrupalCon San Francisco in 2010. And the truth is, we're people who like to ride bicycles. The founders of Chapter 3, after they founded Chapter 3, went on and founded a bicycle company. And so you can see right on our website, it shows that we have 1.7 bicycles per person employed at Chapter 3, and that's growing all the time. We also often get, okay, well, you know, you're Chapter 3, who are your clients? Are you an academic? Is it a government? Well, the truth is we have clients from all over in all different sorts of fields. So we have technology, academic, there's all sorts of media publishing as well as nonprofit and government. So we at Chapter 3 like to cover the full spectrum of anything related to Drupal, all the way from the basically conceptual data, migration, data, planning, design, implementation, support, everything. So as I'm sure you can probably tell, I'm pretty excited about Drupal. I'm pretty passionate about theming. So I might talk a little bit fast. I might use buzz words or something that you may not recognize. If that happens, definitely feel free to shout out or whatever, get my attention, tell me to go back. We are going to have questions at the end. So if you do have questions specific to what we're talking about, definitely hold up, wait until the end if you can. So I get this question a lot. Usually outside of Drupal, but sometimes inside of Drupal too, it's like wait a minute, themer. What is that? You say it's your title, it's a themer. Well, a good way that I like to look at it is a themer. We'll take wireframes or comps, usually made in Photoshop or fireworks or something like that. Either designed by me, designed by our designers, designed by clients, who knows. And then we take some code, usually HTML, CSS. Sometimes PHP and jQuery. If you don't know PHP and jQuery, don't worry. It's not something you need to get started. We're going to be touching very, very, very briefly on some PHP today, but don't let that intimidate you. It's going to be very easy. So once you have the wireframes and you've put in some code, you sprinkle a little bit of theming magic on top, and you have a website that looks pretty close to the comp, fully functioning, and looking exactly how you expect it to. So the point of today is to kind of peek behind the curtain, look at what this theming magic is, look at to see how you create a theme from scratch and how you tell Drupal how your theme is going to work. So another question I get all the time is, what is a theme? Well, it might be kind of straightforward, but a theme is basically something that takes Drupal's default markup, Drupal's classes, Drupal's IDs, Drupal's functionality, and it makes it look pretty. That's the simplest way of putting it, really. When Drupal is rendering things to the page, there's this last point where it asks, okay, theme, is there anything that you want to do before this gets printed on the page? And the theme says, well, yeah, actually, I'd like to make this purple, I'd like to make that green and make it this size and print this here instead of there and do this and that. The theme is really the last call before the page gets printed. So in my opinion, the themeer, the person making the theme is actually the person who has the most power in this design, this Drupal implementation process. Because at the very end, it's up to the themeer to say, yes, this gets printed, no, that doesn't get printed. Also, there's this whole concept of sub-thieving in Drupal. This is an incredibly powerful tool in Drupal, and it's really great, especially for people starting out, but even experienced Drupal themeers such as myself use sub-themes. Essentially, if you follow along with the diagram here, Drupal spits out its markup, its code, its content, its classes and IDs and those things. And it says, okay, is there a theme? Yes, okay, great. What does the theme want to do with this stuff? And so it spits it down there and it says, oh, thank you, Drupal. Here's my extra markup. Here's my little bit of PHP, my jQuery. Here's my CSS styles. And then it checks and it says, oh, is there a sub-theme? If there is a sub-theme, the sub-theme says, hey, thanks, I want everything that you've done so far, but let's make these few little changes. So it's really, you know, if you're familiar with CSS, it's cascading style sheets. It's kind of processed a system of overrides. Well, Drupal theming is exactly the same way. It starts at the top, what Drupal spits out to you, and it gets overridden by the theme. And then if you have a sub-theme, it gets overridden by that. And you can have multiple layers of sub-themed as well. This could mean that you're starting with a theme that already sort of looks like what you want. You know, maybe you want to use the built-in, you know, Drupal 7 Bartik theme. You like it, but you really want to change one little thing about it. Well, you could use a sub-theme here to say, okay, well, use Bartik, but I want to make this change. It's just one little thing. It could also mean that you want to use maybe something like Zen or Omega. There's some themes that are designed specifically to be base themes. So they don't have much style around it. It doesn't define things like font size, font color, you know, how things should look. But it designs the, displays the layout for you. It keeps things organized. It gives you some tools to build upon. So if you are brand new to theming, which if you're here, I assume you probably are, using base themes are incredible. Again, just to recap what I said, Zen and Omega are the two most popular, but if you look on Drupal.org, you do a search for base themes, there's tons of base themes you can choose from. I'd also like to cover briefly some of my favorite theming tools. So starting at the very top there, Admin Menu. This is a module that I hope you've all been using. It's a great module that's been around for many, many years. It gives you that little black bar at the very top of your Drupal site. And Drupal 7 comes with a little black bar at the top already, it's called Toolbar. But unfortunately, it doesn't give you that drop-down functionality. And I feel like with Admin Menu, it's the same thing, but it gives you drop-downs. And it really makes it much more easy to get to exactly where you're going. So you can look through and you can find what you're looking for and you can click it instead of having to click around even more. There's also Firebug and Inspector. If you are used to front-end development, if you're used to using CSS and stuff, you've probably already heard of these. But basically, Firebug and the Inspector, if you're in Chrome or on other browsers, allows you to look at the markup, allows you to look at the styles, and then kind of change things dynamically to see exactly how things will look or why things are looking the way that they are right now. Also invaluable, incredibly powerful. Next is Style Guide. Style Guide is kind of an underappreciated module, I feel like, but basically it gives you a page on your Drupal site in the theme where you can find all of the default Drupal markup. So what this means is you can actually have a page. You may not have any content on your website yet, but it's a page that lists out what H1, H2, H3, through H6 tags look like. What does the Drupal form field? What does a Drupal field set look like? What does a vertical tab look like? What is all those things? It's all defined on one simple page. So if you have a friendly designer on your team, or if you're the designer, I find it extremely helpful to use Style Guide, along with, on that comp, a style sheet, a style guide there that lists out all these things kind of side-by-side. So you can see what an H1 will look like on your website, H2, what a list, things like that. And there's also Devel. Devel is often seen as more of a development, you know, module development tool, but it's also really great for theming as well. Again, if you're theming a website and it doesn't have any content yet, it can be really hard, it can be really frustrating. You're trying to theme a view, you know, a list of content, you're trying to theme what an individual page looks like. It's incredibly difficult. Well, Devel includes a module which will actually allow you to generate content kind of on the fly. So it's just simple, you know, basic filler content that will fill up your site so you can test out your views, so you can test out these other things, and then you can theme right away. As well, Devel also has a few helpful functions that we'll get into a little bit later. Last is Theme Developer. It used to be part of Devel, but they split it off. It's kind of like Firebug, but for Drupal, it's great for themers because you can click a button and then navigate around the page and look and see why exactly a particular thing is the way it is. You can look and see which function is generating this pager. Which template file is this particular title coming from? Things like that. It's really helpful. And as I said, we'll be covering all of these today in the demo, so that'll be fun. So I mentioned earlier I have a lot of passion for theming. I really enjoy theming, and I think it's a little lame whenever people are using a theme and they're kind of going along and they're demonstrating something like this and they call the theme something like example. Example theme, a demo, demo theme. I think that's kind of lame. I don't have any style to it. So quoting, or not quoting, but pulling from Shakespeare, from Romeo and Juliet, for the sake of this example today, my theme is going to be called rows. So anywhere that you see rows, you can insert the name of whatever theme you're building if you want to kind of follow along with that. Another really popular question that we get whenever we do these training sessions is where exactly does the theme go? Maybe you've downloaded a theme from Drupal.org or you're ready to start building your own theme. You might have looked at the root of your Drupal install and you see this very tempting folder called themes. You might think that you should put your themes in there, but that's actually not the case. Unfortunately, in Drupal 7 and previous, you actually have to put your theme inside of this file structure. So in your Drupal root, there should be a folder called sites, and then within that all, and then themes, and then within this folder where you're going to put all of your themes. If you're installing modules, it's kind of the same thing, it's sites all modules. This will save you a lot of hassle down the road when you go to update your version of Drupal, something like that. Unfortunately, this is fixed in the next version, Drupal 8, which is going to be out for a while, but it will be fixed for then. So I mentioned we're using rows, so rows is the name of the folder I called it. Within this file structure, we can see some common theme folders and files here. The most important one, the one that's only required, that's the only one that's required for Drupal, is rows.info, or it's the name of your theme.info. This file identifies the theme to Drupal. It tells Drupal some information, like the name, the description, the version number, things like that. And we're going to break that down in just a few minutes. Additionally, if you want to include some of these other files, you can. If you include a file called logo in here, it will actually make this the default logo when this theme is being used. Similarly, there's a screenshot where, if someone's picking a theme from the Appearances page, it will use this image as the screenshot of the theme. There's also template.php. We're going to be digging into this just a tiny bit, but this is where all the, some of the more advanced Drupal magic goes. This is where the PHP goes of your website. There's also some folders here. These are kind of arbitrary. You can name these folders whatever you want. You don't even have to use these if you don't want to, but I find it very helpful to have at least these three folders. There's one for images, which is where all of your various theme-related images will go. There's one for styles, which is where all of your style sheets will go. And then there's usually one for templates, which we'll talk about templates a little bit later, but it's where you put things like page.tpl.php, or node.tpl.php, or any other templates that you have. Also, if you're using jQuery or Java script, you might also have another folder for scripts, something like that. So, because rows.info is the most important file, let's just break that down and take a look at it to see what exactly we need to do to get it up and running. So I mentioned there's the name there. We're just calling it rows, that's cool. There's the core. This is the version of Drupal that this theme is made to run on. So 7.x means that this theme will run on any version of Drupal 7. If you needed to pick a very specific version of Drupal 7, or a previous version, you just change that. It's very simple. And then Drupal has some verification, validation in there when you're selecting the theme to not let people choose themes that don't work with their version. There's also another section in there that says engine PHP template. This is technically not required in Drupal 7. However, some people have reported that they get weird bugs when they don't do this. So as a rule, I always include engine equals PHP template. If you don't, it might still work just fine, but whatever. In your .info file, you also identify all of your style sheets. So for our previous example, I put the rose.css in styles, in styles folder. So for here, I'll say style sheets, all, and then styles slash rose.css. To break this down a little bit further, style sheets. So style sheets is saying, hey, here's all my style sheets. The all section there is actually the media type. So if you wanted a print style sheet, you would just change this to print. You could put that to screen, whatever you need to do for that. And then the next one is always blank. It's this weird array thing. It's better just to ask or not to ask about it and just always know that you have to. Also in the .info file, this is where you identify the regions that you're going to be using in this theme. If you're unfamiliar with regions, regions are where you put blocks. Blocks are little code snippets. You can put them all over your website. This is where you can create new regions, take out old regions, whatever you want to do. It's actually very, very easy to create new regions, and we'll be talking about that later, because I know that's a very popular topic as well. So here's just a few. There's header, very, very common. You essentially say the regions, and then in the brackets, you put the system name. It's lowercase, underscores only. Header equals, and then the human readable name. Header. The human readable name is what's going to show up on the blocks page in your Drupal administrative section. So this should be very plain, very simple for people to understand. There's also a help section. This is typically where messages will appear on your website. The error message is the warning messages, things like that. There's content. This is where all of your content is going to go. It's the main section of your page. There's also a sidebar first and sidebar second, which is commonly the left and right sidebar. And then there's footer. So out of these, there's only a few that are required. Content is definitely required. Belief help is also required. The other ones are optional. So if you don't want to header, just don't include a header region there. If you want to add another one, you're free to do that as well. And then at the bottom, there's some additional features that you can allow people to enable or disable. If you've ever been to the Appearances page in your Drupal 7 website and you click on Settings for a particular theme, you'll notice that there's usually a bunch of settings at the bottom. Yes, I would like a logo or no, I would not like a logo. Yes, the site name, no, I don't want a site name, things like that. Well, this is where you define if those options are available. So as a best practice, if you know that this particular theme does not account for things like a logo. It does not account for something like a slogan. You don't have it being printed on your page at all. It's a best practice to not include this feature. Because what will happen if you include it as a feature and you don't account for it, someone who uses your theme is going to probably try to enable it and it's not going to work and they're going to get confused. So always consider which features you include when you're building your theme. So now I'm going to move to the demonstration. Hopefully this is going to be a very peaceful Drupal theming presentation demonstration. So I set up just a Drupal 7 install here. It's very basic. It includes those modules I mentioned earlier. There's some very basic customization, but not very much of anything has been done. So let's get started just by digging right in. We're going to start creating our theme. So I need to open up my folder. I need to go to my website. This is the root of my Drupal install. I need to go into sites, all themes. And I'm going to create a folder which is going to be rose. It's just the name of my theme. And within that folder, I need a .info file. So I'm going to open up my code editor. I'm going to create a new file. I'm going to put it within my theme. I'm going to call it the theme name .info. And I'm just going to start putting in some of those fields that I mentioned earlier. So something like name, rose. If you want, you can have an optional description field you can put in. There's also core, which is going to be 7.x. There's engine. So far, so good. Something that you should know about Drupal theming. It's not always possible to memorize every single little thing. It's okay to cheat. It's okay to look and see what other themes are doing. It's okay to look and see what other modules are doing. This is kind of one of the greater things about Drupal as well. So if you get stuck, if you cannot memorize this, or you don't want to, feel free to look at another theme. Go into the Bartik theme. Go into some theme you've downloaded. Look and see what they did in this .info file or on PHP template or template.php or any of those other files. Feel free to go and take a peek. Feel free to copy their code if you need to. What else I need is style sheets. It's going to be all media types. I'm going to put that within a folder called styles. And it's going to be called rose.css. So I'm just going to save this so far. And actually, I need to put in some regions as well. Actually, I'm going to cheat as well. I'm going to include one for content and one for help. And that's all I'm going to put in there for now. So this is in there. It's in my sites all themes rose folder. I currently do not have a style sheets. I don't have a rose.css that exists in there. So let's create that real quick. I'm going to create a new folder for styles. I'm going to create a new file. And I'm going to call rose.css. And then inside of here is where I'm going to put all of my styles for this theme. And so then if we jump back to my website, if I go into the appearances page, and I scroll around, I see that I now have this new theme. It's just called rose, very simply. It has this description that I put in. There's no screenshot, which I mentioned, if you include the screenshot, then it will put in this screenshot there, but we're not going to worry about that. Just to see what Drupal looks like with absolutely no style, with nothing like that, let's enable and set default. Close the overlay. It'll refresh. And you see naked Drupal. It has no style. It's very ugly. It's not very cool. So that's all it took to make your theme. Very simple, right? I mean, you define the theme, Drupal says, oh, there's a theme. Let me make that an option. Here it is. So now that you have your theme working, you can start styling parts of it. So let me jump back to appearances, the appearances tab. Notice I am using the admin menu here at the top. It has dropdowns, so it makes it easy for me to jump straight to where I'm going. Next, I'm actually going to demonstrate the style guide. If I go to style guide, and then the name of my theme, uh-oh, and if I just scroll down, I can look and see basically all that markup that I had mentioned before. So I can see what a search box is going to look like. I can see what navigation is going to look like. I can see what, um, all of my status messages are going to look like. This is, by the way, one of the things you can sometimes check to see if your website's using Drupal, or if someone else's website's using Drupal, try to generate a status message and see if it looks like one of these, like the default Drupal markup. It also has things like links, emphasis, strong tags, all the way down, radios, checkboxes, on and on and on. So it's a page full of markup specific to this theme. So it doesn't matter that we don't have any content on our website yet. I can create this website from scratch. I can go to style guide. I can get probably about 70% done with the theme just by using this page. So you create the basic outline. You can style all the elements that are going to be on the page. And then you can hand it off to a site builder or a developer, or if that's you, you can start site building and developing modules and kind of give the website some depth, you know, give it some stuff to work with. And then after that's kind of in place and firm, you can go back and touch on the theme and kind of theme the specific parts. So just to demonstrate this, let me just take a look at some things in here. So I would like to change the status message. I really don't like that it's green. I would prefer that the status message was instead, let's say orange. No, actually that wouldn't work. Let's say purple. I would prefer that the status message is purple whenever that's that right there. So I'm going to use the Firebug. It's actually Firebug Light if you're using it in Chrome or you can use Inspector if you prefer that. And it's going to show me all of the markup on this page. It's also going to show me exactly what styles are affecting them. So I can... Okay, well I'm actually going to be honest. I've never done this in Chrome before using the Firebug Light. So let me jump over to Firefox. Okay, so I can see it right here. It is the message. So it has the class message and the class status. The other messages here also have the class status, but they have other classes for like warning and error. So it says here that the color for this is green. Well if I want to see what that's going to look like as purple, I can actually change this on the fly. This is another reason why Firebug is so wonderful. I'm just going to put in purple. See what that looks like. It's like well, you know, that's not very good. Maybe it's actually pretty good as green. So I'll leave that there. But maybe instead of purple, I'll make it bold. I really want people to see what it looks like. So let's change that to font weight bold. And yeah, I like that a lot. So if I jump back to my CSS now and see, okay, it's messages, status. And if I go back to my website, I refresh the page. You can see that it's now bold. So if I go to some other page, maybe I click save on something, I'll get this status message. It will be bold. So the theme really comes down to this process of making things match the comp. Or maybe if you build it yourself, making things match what you have in your mind. And you kind of have to do this iterative back and forth where you look at something on the page that you don't like. You look at something on the page that doesn't look the way you want it to be. And you see what you can target. You see what you can use to change the style for. Once you see that, once you see something you like that you can grab hold of, you go to your CSS, you go to your templates, and you start changing it. So I don't really like the way that this is going so far. I don't like the way that this theme looks. It's very basic. I really want to start with something a little bit more finished, a little bit more polished. So let's actually, I'm going to enable Bartik as a base theme. So if you guys are using Zen or Omega or if you want to use Bartik or whatever, this is exactly how you do that. Bartik is already enabled as a theme. It's not the default theme, so it's not being used shown on the page. So if I go into my .info file, I can actually declare it. So I'll just say base theme equals Bartik, save. And then if I go back to the website, refresh the page. Probably have to clear the cache. Whoa, it's freaked out about something. Refresh the page. Another thing you should know about theming is that you often have to clear the cache. Clearing the cache is usually, it's kind of like the process of restarting your computer if you need to kind of start over from fresh. A lot of things get cached in Drupal and this is a huge blessing. It's great because it means that these things don't have to get reloaded over and over and over again. But when you're theming, it can be kind of a pain. So if you're using admin, the admin menu at the top, you can actually just hover over this first one here, click flush all caches, and we'll go through and do it. Okay, so that didn't work. So let me go back to my .info file. And I'm going to cheat. It's okay, like I said. I still do it all the time now. I'm going to look at another .info file. I'm going to look at the .info file for it. And I see it, okay, so it uses a space instead of an underscore. So instead of base underscore theme, space theme, Bartik, flush the cache, and now, except for that missing image, my website looks exactly like Bartik. You're going to get a lot of error messages when you do this from the start, and I can tell you exactly why. So if you kind of break down what this says, their notices, their really errors, it says that it's not able to find particular regions in your theme. The reason is because the Bartik theme has tons and tons of regions. It has at least one in the header, and then there's the tripped edge, which is like the three in the bottom, and then there's four in the footer, and then an actual foot. It's a little obsessive. Anyway, so it's saying for each one of these, hey, I'm missing it, hey, I'm missing it, hey, I'm missing it. And that's because it's using all the default files from Bartik, but it's using your subthemes .info file. So in my .info file, I said, hey, I have these two regions. I have these 15 other regions until there's this inconsistency. So to enable to get this to behave in order to get it to be okay, what I'm going to do is actually go into the Bartik theme. I'm going to grab the regions that it's using for these here, and I'm going to put them in my .info file. So if I go back, I'm going to go to Bartik. Bartik is a core theme. It came with Drupal 7 out of the box. So it is in the themes folder, which is at the root of your Drupal install. That's where all the core themes are. If I go in there, if I look in the .info file, I should see all of the regions. I'm just going to copy them, put them in my .info file, and if I go back to my websites, if I clear the cache, okay, much better. So far, so good. It looks sort of like what I want. It was still the missing image, but it's pretty close. So say for this example, we have some content. It looks okay. It's sort of what we want, but sort of not what we want. Maybe we want to change something like, we already changed the status message, so it made it a little bit better, but maybe we really want this home, this here, this bread crumb, to appear in the header. It's something pretty simple. It shouldn't be that hard to do. It's something like a bread crumb. We can move it from one place to the other. We could do that in CSS. We could say position absolute and move it around and stuff, but that's not great to do. So another great thing about Drupal theming is that there's a series of template files. So these template files outline exactly what gets printed where on the page. So this means we can actually take a look at what Bartik is doing. We can see where it's putting the bread crumbs here, and then all we have to do with our theme is to copy it into our theme, make the change we need to make. It'll say, okay, let's use Bartik. Great. Any changes? Yes, here's a change. Let's use that one. And then it'll move it for us. So let's just walk through that step by step. First, I need to go into Bartik. I need to find page.tpl.php. Now, how do I know that it's page.tpl? Well, I've been doing it long enough that I know, but what if I didn't know? How would I figure that out? This is where that develop theme module comes in. Develop theme is very helpful, but unfortunately, it's still very buggy. So I never leave it enabled. I enable it, I use it, and then I immediately go and disable it. It's a little funky. So now that I have this theme developer, you should notice I have this little checkbox in the lower corner. This is theme or info. If I click on that, I get this pop up, I want the breadcrumb. So I click on that, and it says, hey, this is being generated by theme breadcrumb in page.tpl.php. Pretty awesome. So, I could either go back to my theme, I could go to Bartik, I can go and look for page.tpl.php. I can find it, copy it. Or if I want, I can just click on this link right here. Again, it's pretty handy. Click on that. And if I click on the array here, I can see everything that's being printed within that. Let's just ignore that. Let's go back to the Bartik theme. We're going to look into templates. We're going to find page.tpl.php. And we are going to move that. I'm just going to copy it and paste it into our theme. Sites, all themes, rows, templates. Again, remember, folders are kind of arbitrary. You don't have to follow a specific folder pattern within the theme. Paste this here. So, great. Back to my website. Notice, it does say that it's using the page.tpl.php that's within themes, Bartik templates. So, it shows you exactly where this file is at. And if I close this and I flush my hash, and if I use themer info on this again, you can see it's now using my page.tpl.php. So, it says, sites, all themes, rows, templates, page.tpl. So, now that it's been overwritten, now that the file is kind of my themes to play with, I can open that up and I can change anything I want and it will use my version instead of Bartik's version. So, let's close this, go back to my theme, and I just need to find where the breadcrumbs are at. So, let's look down for bread. I'm just going to take this whole thing right here. I'm going to move it into the header. Above the main menu, that should be fine. I'll put that there. I'll click save. If I go back to my website and it's appeared. It's clear the cache just in case. I love it when this happens, by the way. I love when something doesn't quite work the way I expect it to because it gives everyone a chance to see what I use to troubleshoot. You know what, let me turn off theme or info, or theme developer real quick, just to see if maybe that's causing it to mess up. Okay. Let's look through with Firebug. Let's see if I can find where the breadcrumb is being printed. Here it is. Interesting. Oh, here it is. It was hidden. That's horrible. It's kind of where I want it to be. I want it to be below the title. Let me jump back and change that real quick. Let's see. Move this. It is below the title. Remember I said this is kind of an iterative process. You go back and forth and you change something and then you go back and change something. I'm just kind of see, kind of massaging it to work exactly how you expect it to. Maybe it needs to be below this menu for it to work. That's probably right. Put it. That's not going to work right either. Let's put it right here. It's going to break your tabs. Okay. This is something you have to play with over and over again. You can use this for many, many different things. You can look at a particular node. You can look at this content we created. You can use the theme developer little targeting thing to find a very particular thing. Maybe it's a field on a particular content type and you can say, oh, where do I need to go to change that? Once you have that information, you copy that into your theme. You go and you change it. You move stuff around however you want it to be. Maybe you add additional classes, whatever you need to make something look the way you want it to. So there's something else I want to get into. I mentioned before that there's a little bit of PHP in this presentation. Actually, before we get to that, let me demonstrate develop generate real quick. So develop again is that development module helps you kind of troubleshoot things and figure out exactly how things are running and development side of things. If you go into, once you enable that module and you enable the develop generate module which comes with develop, you should have a new menu in here called development and then create stuff. In this case, we don't have any content on our website. If you visit the front page, we should see that it's there's the site name, but there's no front page content. So let me just go and generate some front page content. I'll generate some articles just to put some stuff in there. Go into development, generate content. You're presented with this page. I don't want to create basic pages. I just want to see articles. There's the option here to delete all content before you do it. So this is great if you're like adding fields and you need to regenerate the content before you continue. You can use this to repopulate everything. This is also great if you are done with the testing process and you're ready to start putting in actual content. You can tell it, let's create zero and delete all content. So it'll delete all that content for you in one step without having to worry too much about it. I want it to create maybe 20 articles for me as far back as one month ago. You can generate comments. This is amazing. It means you can start theming and start planning for comments before you actually have real comments in your website. It's another thing that's commonly forgotten. Maybe 10. If you want to add a URL alias for those, you can. If you're using internationalization, maybe multiple languages for content, you can have it be generated in your website. It's going to go through. It's going to create each node for us. If you close, refresh, you can see it did it. It even inserts images and files. If you have images that need to be tested at certain image styles and thumbnails and big ones and stuff, you can do that with this as well. Let me just jump in real quick. I'll go into one of these. I'll look and see. There's comments. I don't have to wait for that. Incredibly useful. Very, very great. Not to scare anyone away. Let's dig into the PHP now. You might have noticed back on the page.tpl, there is some PHP in here. It's supposed to be intuitive PHP. You're supposed to be able to see something and say, this is the main menu. This is the header region. This is the site slogan. It's supposed to be kind of intuitive, so it's a little simple. But as a rule, you're not really supposed to put very complicated PHP into your tpl files. The reason is that someone who doesn't know any PHP at all whatsoever will come in here and maybe they'll be intimidated by this, but if they see your complicated PHP, they're going to get completely disoriented and kind of locked down. They don't really want to continue. If I want to create some custom PHP, some complicated code, all I have to do is put that into my template.php file. We don't have that on our theme yet, so I'm going to create one. Call it template.php. For this particular thing, I'm just going to demonstrate how to create a variable. It's pretty simple actually. Most things on here are just variables, printing the site name, the title, the slogan. Let's create our own custom variable. To do this, because it is this kind of overflow cascading thing, we need to pre-process, it's a term in Drupal and theming, we need to pre-process the page. We need to say, hey, before this page is rendered, let's inject our variable. Let's make that an option for people to print. I'm just going to write a function here. You guys can watch and definitely use this as an example if you need to. First is just the name of the theme. Whatever the theme name of yours is, for your example, you put that here. Then pre-process page. Then I'm going to pass it a variable. It's a little confusing at first. If you need help to figure out exactly what you should see in here, you can jump to api.drupal.org. It's a great resource for figuring out what these functions do, what they're there for, how you can tap into them. I can just type in it's supposed to auto-populate, but it doesn't always do that, unfortunately. I can see here, here's that function that I was writing. It's a template, so it's the name of the theme underscore pre-process, underscore page, and then var variables. Then it gives you some examples of what that should look like in there. Let me actually jump back to here. Let me go back to my thing here. I'm going to use another great thing. One of the great tools about the DEVAL module is this function called dsm. It sets a message to whatever you put in here. I save this, go back to my website, flush the cache. It did not like my template.php. You're absolutely right. Thank you. Noob mistake. Okay. I forgot to wrap it in PHP tags. This is a PHP file, so it does have that in there. I need to also do function there. Okay. Let's test that again. Flush the cache, and I get a staff message that says it works. This is great for troubleshooting your website exactly if it's working the way you expect it to, if it's printing what you expect it to. It's also great because say there's something obscure like this vars variable. What's in that variable? What's available? If I type in here vars, and then I come back here and I refresh. Another great thing about this is you use this Krumo, which is this great way of showing what an array looks like. So if you didn't use Krumo or if you didn't have this part of DSM in here, it would be this long line of text that has just array, array, array, and all these different things. It's really confusing. But this actually breaks it down very, very simply. So I can look into the variables, I can look into page, and I can see all the variables for the regions here. Great. I can look down even further. I can see there is the site name, there's probably one in here for breadcrumbs. Everything's available to us here. If we want to create a new variable, it's very, very simple. Go back here. Let's just go vars, we'll create a new variable name, so it's like my new variable. So my new variable, and then if I DSM, go back to my site, let's see it works. Okay, great. So now that I've pre-processed the page, now that I've created this variable, all I have to do is go back to my page.tpl, because remember this is a pre-processed page, so I go into page.tpl, maybe at the very top. I'm just going to do a PHP print my new variable. And let's just wrap that in H1, just to make it nice and big. So if I go back to my page, flush the cache, it works. So this is a very, very simple example of pre-process, but this is great because you can do things like build a user block that checks to see, okay, is the person logged in? If they are logged in, say, welcome user, you know, with the username, click here to log out, click here to see your account. If they're not logged in, you could have it say click here to log in, create a new account, something like that. So you can kind of create variables that have this complex code in there to kind of generate that markup for you and kind of do it dynamically on the fly. So I think that's actually just about all the time we have, but I think I can take a couple questions if someone wants to come up to the mic. Yeah, yeah. So let me actually just jump to the last slide. This presentation is logged on the Chapter 3 website. If you go to is.gd slash Denver theming, you'll find the Chapter 3 theming page for this presentation with all the resources that this is actually being screen captured as well, which will be posted later. So if you want to refer back to this, you can watch that on the website. There's also kind of a funny story. I actually missed one of these sessions I was supposed to do for the Pacific Northwest Drupal Summit. Anyway, I had troubles I couldn't present and so I promised them a blog post that basically covered everything that we just talked about. That blog post can be summed up in the series I'm now writing called Level Up Your Themeer, which goes through the different levels of themeers and how to kind of move yourself from one level to the next, how to do things that a level two themeer would do, things like that. So if you need more information in a written with graphics and stuff format, feel free to follow along there. Also if you jump to if you go to the Denver website and you there should be a link at the top to provide feedback I'd greatly appreciate feedback for this session and I know they would as well just to let us know how we're doing. And I also included some resources at the top, which go through the slides that I covered today the series and all those other things. So there's that. Also quick shout out to Brian McMurray and Steven Merrill from Treehouse. They created this awesome presentation generating software which runs on Jekyll and Prezi to create this kind of on the fly website presentation thing. If you need more information on that, definitely go check that out and there's info on the website there too. Yes, question. You mean the page.tpl.php? This one here? Template.php? Yeah. So the question was did I just put all the variables into this here? This function works by passing an array through here. All the variables are summed up in this vars variable here. If I wanted to print out if I wanted to see all the variables I can do that from here. If I wanted to change the existing variable I could also declare that here and change it. But I just wanted to add a new one. So I said within this variable within all that list of variables that already exist let's add my own custom one. Right, you could add as many variables as you want. You just keep going down the list. Like I said you can redefine existing ones. Yes. I would bet that there is a limit based on performance. But I've seen at least two deep, three deep. Yeah. Right. So just to recap the question was can you create multiple levels of sub themes? Yes. Actually the omega theme is a great base theme for that. The omega theme itself comes with a base theme that's called alpha. And so alpha is a very, very stripped down version of omega. Omega uses alpha which is included there too. Omega itself is actually a sub theme which you're using as a base theme. So that's already one layer. You can just keep going. You can create as many layers of that as you need to. Yes. When one page looks different. Yeah. Right. So the question was what if you need to make one or more pages look completely different from any other page? There's this great module called theme key which if you need to look drastically different like if you need to use a different theme for a particular page of your website theme key will let you say on this page use this theme. If you just want to target a very specific page Drupal gives you tons and tons of classes actually straight in the body tag. So if you jump in here let me look at firebug if I go up to the body I can see it's looking in so this is the front page. It says front. If I go to one of my other pages and I go to the body tag I see it's not front. It's not the sidebars. It's using the page content type and it's page node one. So this is the first content the first node that I created on my website. It should do this for pretty much every piece of content you create so if you need to target something very specifically and say only on this page make the titles green. Something like that. You can do that by targeting it in the body. I think that's all the time I have for officially but if you guys have any more questions for me it's David at chapter3.com We at chapter3 have a policy where we can help people in the community with any questions they're having. So long as you post it on Drupal.org first so if you post a question on Drupal.org no one helps you or if you just want to send me an email with a link to that post and I would be happy to try to follow up with you and try to work through fixing whatever or whatever example you have. I hope you have a wonderful rest of Drupal.org.