Introduction to Theming Basics for Drupal 7
Drupal: 7
19m
- [robotic voice] Drupalize.Me. [drupalize.me - Learn Drupal]00s
- [♪♪] [Introduction to Drupal Theming - Theming for Drupal 7, Chapter 1 with Joe Shindelar]04s
- In this chapter we'd like to talk a little bit about what theming in Drupal really is.15s
- First off, the word theming is pronounced kind of like scheming20s
- and spelled just like it's shown on the screen.23s
- Spellcheckers tend to get a little bit confused by it, but that's really the way that we say it:26s
- theming.30s
- Theming in Drupal is made up of a number of different pieces.31s
- One of the things that you're doing is designing the appearance of your website.35s
- You might use tools like Photoshop or Fireworks 38s
- to mock up what the website is going to look like for your users.41s
- Another component of theming in Drupal is creating the CSS 46s
- to control the layout of your site.49s
- This isn't something that we're going to cover in this video series.51s
- However, creating the CSS is no different 55s
- than what you would do for creating a static HTML website57s
- or creating the CSS design for any other website.01m 00s
- The last part, and the part that we'll talk about the most in this video,01m 03s
- is changing the HTML to output by Drupal to fit the design.01m 07s
- When Drupal creates a page, it outputs a set of default HTML markup.01m 12s
- What we're going to talk about is how you as the themer 01m 16s
- can modify that HTML output by Drupal to conform to the HTML 01m 19s
- that you need for your designs.01m 23s
- There's 3 simple steps to creating a theme in Drupal,01m 27s
- and we'll talk about each one of those in depth.01m 31s
- The first step is to create an info file.01m 33s
- Info files are metadata that tell Drupal what your theme does and what its name is.01m 36s
- The second step are template files01m 41s
- or any file that ends in a .tpl.php extension.01m 44s
- And the third step, template.php, is a php file, optional for themes,01m 48s
- used to replace the variables inside of template files and override theme functions.01m 54s
- We won't be talking about the third step in this basic theming series.02m 00s
- However, in a coming advanced theming series we'll go more in depth on step #3.02m 04s
- Let's talk a little bit about the structure of a theme.02m 10s
- All of our themes--those that we download from Drupal.org or those that we create ourself--02m 14s
- live inside of the sites/all/themes directory02m 19s
- in a directory that is the name of your theme.02m 22s
- Themes are made up primarily of things that are part of traditional web design--02m 25s
- things like CSS files, JavaScript files, 02m 30s
- and images that make up all of the layout of the page.02m 33s
- All of these files live inside of your themes directory.02m 36s
- And in addition to that, you'll see some files that are specific to creating a theme in Drupal--02m 39s
- things like an info file, optional template files, and an optional template.php file.02m 44s
- Again, the .info file corresponds to step #1 in creating a theme,02m 53s
- telling Drupal what your theme can do.02m 58s
- Template files, like the page.tpl.php file, which are primarily HTML,03m 00s
- control the overall layout of your site, and the general HTML markup03m 06s
- correspond nicely to step #2.03m 10s
- And finally, template.php, which is used to set variables and override theme functions,03m 13s
- corresponds to our step #3.03m 17s
- Let's take a look at what you might see inside of an info file.03m 20s
- The primary thing that an info file does 03m 24s
- is announce the presence of your theme to Drupal.03m 27s
- Without a .info file, Drupal will not know that you've created a custom theme03m 29s
- and you will not be able to enable it.03m 33s
- Inside of your info file are a bunch of key value pair properties03m 36s
- that do things like tell Drupal the name and description of your theme,03m 39s
- define some of the CSS and JavaScript files that you might use,03m 42s
- and, in addition to that, tell Drupal about features that your theme might provide03m 46s
- and the regions that your theme makes available for placing blocks into.03m 49s
- A typical info file might look something like this--03m 54s
- again, key value pairs representing things like the name of your theme03m 57s
- and the description and so forth.04m 02s
- In Drupal 7 the only 3 required things in a .info file are these first 3:04m 05s
- the name, which provides a human readable name for your theme,04m 10s
- and a description, which is just a simple 1-sentence description of your theme.04m 14s
- These things are used on the appearance page when enabling a theme04m 18s
- to provide administrators with a friendly name and description for your theme.04m 22s
- In addition to that, you also need to specify the version of Drupal core04m 26s
- that your theme is compatible with.04m 29s
- In this case we're saying that our theme is compatible with Drupal 7.04m 32s
- One of the things that you'll commonly see in a .info file04m 36s
- are these style sheets and scripts lines.04m 40s
- This is our theme using the .info file in order to include JavaScript files04m 42s
- and CSS files on every single page throughout the site.04m 47s
- This is nice for things like CSS files which provide the main layout for the page04m 51s
- and that you want to be loaded on every single page.04m 55s
- Declaring style sheets and JavaScript files in a themes.info file04m 58s
- also ensures that Drupal is able to use CSS and JavaScript aggregation05m 03s
- to include your themes, JavaScript, and CSS files.05m 07s
- The syntax for including style sheets and scripts is similar to the name and description syntax.05m 12s
- However, in this case we use square brackets, similar to creating arrays in PHP.05m 16s
- This allows us to add multiple CSS files or multiple JavaScript files.05m 21s
- Finally, the style sheets line.05m 25s
- You can see the word all in the first set of square brackets.05m 28s
- This maps to the media attribute and the link tag used when including a style sheet on the page,05m 32s
- so you could, instead of using all, use words like print05m 37s
- and you would end up with a style sheet that had a media attribute of print05m 40s
- and would only be used when someone is printing the page.05m 43s
- In addition to adding style sheets and JavaScript files through your .info file,05m 46s
- you can also add style sheets and JavaScript in a template.php file.05m 51s
- You would do this in scenarios where you had certain style sheets05m 56s
- that you only wanted to load on certain pages throughout the site.05m 59s
- We'll talk more about that in another video.06m 02s
- In Drupal, themes are responsible for declaring all of the regions that are available06m 06s
- for an administrator to place blocks into.06m 12s
- Regions are declared inside of a .info file.06m 15s
- The syntax for creating regions inside of a .info file06m 18s
- is similar to creating an array in PHP.06m 22s
- You type the word regions 06m 25s
- and then inside of square brackets the machine readable name of a region.06m 27s
- And then the value is the human readable name of the region.06m 31s
- A couple of important things to note when creating regions in a Drupal theme.06m 36s
- First, regions are optional.06m 40s
- You don't actually need to add any regions in your theme.06m 42s
- If you don't add any regions, Drupal will assume a default set of regions.06m 45s
- The default set of regions include a sidebar_first, sidebar_second, content,06m 50s
- header, footer, highlighted, and help.06m 55s
- As soon as your theme declares 1 region, the defaults are ignored06m 58s
- and Drupal assumes that your theme will declare all of the necessary regions.07m 03s
- One important thing to point out for Drupal 7 themes07m 08s
- is that the content region is required in order for your theme to be enabled.07m 11s
- Once you've added regions to your theme, 07m 16s
- they become available for an administrator to place blocks into.07m 19s
- And it looks something like this.07m 22s
- You can see I've declared a sidebar_first region,07m 25s
- and on the block administration page I now have an option to add 07m 28s
- any blocks to that first sidebar, the human readable name there.07m 31s
- And I also have inside of my page template file in the page variable07m 36s
- the sidebar_first region, which will contain all of the blocks that are in that region07m 41s
- for that particular page.07m 46s
- Another thing that you may or may not see inside of a themes.info file07m 48s
- is the declaration of features.07m 53s
- Features allow you to create single boolean variables07m 55s
- and a checkbox that maps to those variables on the theme setting page.07m 58s
- You might create a variable for something like logo or slogan08m 02s
- that inside of your page template file or other template files08m 06s
- you can check and see, "Did the administrator of the site click the checkbox08m 09s
- "that corresponds to my logo feature?"08m 13s
- If so, I may want to print out some additional markup on the page.08m 15s
- If not, I may want to skip printing out that markup.08m 19s
- Again, if you don't provide any features in your theme,08m 23s
- Drupal assumes a default set of features.08m 27s
- Those defaults are logo, name, slogan, node_user_picture,08m 29s
- favicon, main_menu, and secondary_menu08m 34s
- and the corresponding checkboxes to turn those things on and off08m 38s
- when configuring settings for your theme.08m 41s
- Those are the most common things that you'll see inside of a .info file.08m 43s
- There are a few additional things, but we'll talk more about those08m 47s
- when we actually get to creating a .info file and editing some of those configuration variables.08m 50s
- The next thing that you'll take a look at with theming are template files.08m 56s
- Template files in Drupal are where the real theming work happens.09m 00s
- Template files, or any of these files that end in a .tpl.php extension,09m 05s
- contain mostly HTML and a little bit of PHP.09m 12s
- What they are are HTML files that contain simple print statements09m 17s
- to print out the dynamic content provided by Drupal wrapped in HTML09m 22s
- that creates the structural markup of your page or things like nodes, blocks,09m 27s
- or any element that's displayed on the page.09m 33s
- Template files control the overall layout and markup of your site.09m 36s
- The majority of things that you will do in theming take place inside of a template file.09m 40s
- Here's an example of how these template files work.09m 46s
- When looking at a page rendered by a Drupal theme,09m 50s
- it's actually made up of a number of different template files.09m 53s
- The wrapping portion of the page--things like the opening and closing div 09m 56s
- that may contain all of the different regions, the header and the footer and so forth--10m 01s
- live inside of a template file called page.tpl.php.10m 06s
- That template file is used once to theme the entire page.10m 10s
- The different components of the page, however, may be run through their own template files10m 14s
- before being printed out.10m 18s
- For example, in our mockup here we have 2 regions with blocks in them.10m 20s
- The one on the left shows all of the nodes on this front page,10m 25s
- and the one on the right shows a number of additional blocks,10m 28s
- presumably placed there by the administrator.10m 31s
- Each of those blocks is rendered inside of a region,10m 33s
- and that region has a corresponding region.tpl.php.10m 36s
- Inside of that region you have things like all of the nodes 10m 41s
- that make up the center content of the page.10m 44s
- Each one of those nodes, when it's printed to the page, uses the node.tpl.php file,10m 48s
- and each one of those blocks over on the right, those use a block.tpl.php file.10m 54s
- It's important to note that some of these template files--11m 00s
- things like node and block, for example--may be used more than once11m 03s
- when presenting a single page.11m 07s
- This makes it really easy to create markup for something like a node11m 09s
- and have it be reused for every single node every time it's printed out.11m 13s
- An example of a template file might look something like this.11m 18s
- This is the node template file from the Bartik theme that ships with Drupal 7.11m 22s
- You can see there's definitely some PHP in there,11m 28s
- but it's limited to primarily simple print statements11m 32s
- and a couple calls to this render function11m 34s
- and then a bunch of HTML that makes up the main markup 11m 37s
- for any node that's being displayed.11m 40s
- One of the things that you'll probably notice in this node.tpl.php file11m 44s
- is the use of the render function,11m 49s
- and also, later on, you'll see the hide and show functions.11m 51s
- As we dive in and start looking at template files in Drupal,11m 55s
- one of the things that you'll need to learn about are renderable arrays.11m 58s
- From the theming perspective, renderable arrays are a mechanism12m 01s
- that allows Drupal to delay the rendering of any content to HTML for as long as possible.12m 05s
- This means that Drupal tends to pass around pieces of content12m 10s
- like a node or a block and all of the different things that make up that node12m 14s
- as a large structured array that at the very last moment gets rendered into HTML12m 17s
- by using the render function.12m 22s
- This makes sure that both modules and themes have a large amount of flexibility12m 24s
- when it comes to adding and removing things from the page.12m 28s
- In order to really understand why Drupal 7 uses this concept of renderable arrays,12m 32s
- I think it makes sense to step back for a second 12m 36s
- and take a look at how things were done in Drupal 6.12m 38s
- In Drupal 6 you might have a node template file,12m 41s
- and in that node template file you have a simple variable named $content.12m 44s
- Your template file prints out that $content variable12m 48s
- which contains the body of the node and any additional CCK fields12m 51s
- or information that may have been added to the body of that node.12m 56s
- In our example here, you can see we're printing out 1 additional field on the page.12m 59s
- The problem with doing it this way is that if you wanted to manipulate the HTML13m 05s
- for that particular field or say, "Move that field to the bottom of the body,"13m 10s
- or "Place it somewhere else on the page," you would need to not print out the $content variable13m 15s
- inside of your node template file and instead print out each individual field13m 21s
- and the body of the node separately.13m 25s
- This works great until an administrator comes along and adds a new field to your content type.13m 28s
- Once they've done that, all of a sudden the field that they've added,13m 34s
- while it shows up in the form and administrators or editors can add content to it,13m 38s
- it won't actually show up on the page until the themer has come back13m 42s
- and added that field to the template file as well.13m 45s
- In order to get around this problem,13m 48s
- Drupal 7 introduced the renderable arrays.13m 51s
- Let's take another look at our node template file from Drupal 7 13m 54s
- and see how we might make use of this renderable arrays in our theme.13m 57s
- In Drupal 7 that $content variable that used to be just a simple string14m 02s
- is now an array of all of the elements that make up the actual content of the page.14m 08s
- And now instead of just printing out the content variable,14m 14s
- we actually need to use the render function to wrap the variable 14m 17s
- before printing it to the screen.14m 21s
- The render function will recurse through that content array14m 23s
- and take each of the elements inside of it and turn those into HTML.14m 26s
- The HTML is then returned, and we can print it out on the page.14m 30s
- In the example here, you can see that we're hiding the comments and links portion14m 34s
- of the content temporarily.14m 38s
- We're then calling print render content.14m 41s
- What this will do is take all of the pieces of that array, minus comments and links,14m 43s
- which we set to hide, and turn those into HTML and display them on the page.14m 48s
- Then later on in our template we go ahead and manually render the links portion14m 53s
- of the content variable and the comments portion of the content variable.14m 58s
- This gives us the flexibility to move individual elements outside of the main content15m 03s
- into different portions of the page or in the template file15m 08s
- but still render the entirety of the content variable.15m 12s
- This means that when an administrator comes and adds an additional field15m 16s
- to our content type in Drupal 7, that field will immediately start showing up where we've said15m 20s
- print render $content.15m 25s
- But we can still have control over individual fields and move those around15m 28s
- inside of our template file.15m 32s
- The important thing to remember here is the use of the render function.15m 35s
- There are a number of different variables inside of template files in Drupal 715m 40s
- that require being wrapped in the render function in order to turn their content into HTML15m 44s
- before printing it out inside of your template file.15m 49s
- Another thing that we'll talk about is the use of dynamic template files inside of Drupal.15m 53s
- This is a really powerful system that allows you to do something like, say,15m 58s
- take the node template file, which is responsible for printing out all of the nodes on your site,16m 02s
- and say that for any node of the type article I'd like to use a different template file.16m 07s
- In that scenario let's say you have 4 different node types on your site16m 14s
- and you want all of them to use the node template file, except for 1.16m 18s
- You want that one to be slightly different, your article template file,16m 22s
- because it has tags and images that you'd like to display in a different place on the page16m 24s
- using some different markup.16m 28s
- You can create a dynamic template file using the naming convention shown:16m 31s
- node hyphen, hyphen the node type machine readable name--in this case article--16m 36s
- followed by the .tpl.php extension.16m 41s
- This is identical to how we did this in Drupal 6 as well,16m 46s
- which had this concept of dynamic template files.16m 49s
- The primary difference between Drupal 6 and Drupal 7 in this case16m 52s
- is that Drupal 7 uses 2 hyphens to separate the base name 16m 55s
- from the more specific targeted name of your template file.16m 59s
- We'll also talk about where you can find all of these template files inside of Drupal17m 03s
- and how to override those in your theme.17m 08s
- Drupal, as we said, provides a set of default markup,17m 10s
- and it does so by providing default template files.17m 13s
- The user module, for example, provides a file named user-profile.tpl.php.17m 16s
- This contains the HTML markup for a user's profile page.17m 22s
- If you want to override that markup inside of your theme,17m 26s
- what you can do is copy that template file from Drupal core into your theme,17m 30s
- go ahead and make any changes to the copied version of the template file,17m 35s
- and then clear the cache so that Drupal finds your version of the template file17m 38s
- and starts making use of it.17m 42s
- It's important to remember to copy template files out of Drupal core into your theme17m 44s
- and not move them.17m 48s
- If you were to move the template file, it would no longer exist inside of Drupal core.17m 50s
- And if someone decided to switch to a different theme or disable your theme for some reason17m 54s
- and Drupal needed to use its default user profile template17m 59s
- and it no longer existed, this would cause errors on your site.18m 03s
- Drupal core provides a large number of template files,18m 07s
- and this list of template files will grow 18m 11s
- as you add more and more modules to your Drupal site.18m 13s
- Every module likely outputs content in some form or another,18m 16s
- and when it does so, it probably does it using a template file.18m 19s
- Throughout the course of this series, we'll talk about overriding 18m 23s
- and making use of a number of different template files,18m 26s
- some of the more common ones, like the page template file, 18m 30s
- block template file, nodes and so forth.18m 32s
- We won't necessarily get into all of them, but it's good to know that these exist.18m 35s
- What we've seen in this presentation are a number of the concepts 18m 40s
- that make up the first 2 steps in building a theme for Drupal:18m 42s
- step #1, info files, and step #2, template files.18m 46s
- Throughout the rest of this series, we'll be going through both of those steps18m 51s
- and all of these concepts in more depth.18m 54s
- We'll be overriding template files, creating info files, 18m 57s
- and building out an entire Drupal theme as we go.19m 00s
Lullabot has trained thousands of Drupal developers & guided the development of some of the largest Drupal websites.
