Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Installing Drupal 7 on Mac or Windows
- Using the Devel and Theme Developer modules
- Understanding templates and variables
- Choosing global and theme specific settings
- Creating a theme roadmap
- Creating the theme folder, structure, and .info file
- Customizing HTML templates and variables
- Creating template regions and rendering page variables
- Understanding performance considerations such as caching
- Migrating themes from Drupal 6 to Drupal 7
Skill Level Intermediate
While we've replaced our static navigation and page content with Drupal's dynamic menu and page variables, we've only touched the surface on theming. To begin replacing whole content areas in Drupal, we need to discuss regions; what regions are, how to create regions, and exactly how to tell Drupal what content to place in those regions so it can render them to the browser. If we take a look at the Structure> Blocks interface and scroll down to the Highlighted and Help section, we can see that regions are areas in the theme that are available for adding blocks of content to.
The regions available in the theme are defined within the .info file, and in Drupal 7 the Highlighted and Help regions have been added as default regions. Also in Drupal 7 the Content variable has become a full region and is now mandatory in all themes. This new requirement was set up so that when enabling new themes Drupal knows where to put the main page content by default. One last thing to note is that if no regions are added to your theme, then the default Drupal regions will be used.
Let's begin my browsing to your editor and expanding the sites>all>themes>samoca folder. Let's go ahead and open up the samoca.info file, and we can see that we currently have no regions defined. Let's go ahead and add the regions that our particular theme is going to need so that we have somewhere to assign content to. If we navigate to the Exercise Files for 07_03 and open up the readme file, we can copy and paste the regions that our particular theme are going to need.
Tab back over to samoca and simply paste in those regions. Now, let's take a quick look at these regions before we actually go and start replacing the page variables or assigning content to these regions. The regions that we're going to be dealing with are Featured. This is for the home page, along with the Content area, which is mandatory by Drupal 7. For the interior pages we have the Sidebar, and for all of the pages we have the Social Icons and the Footer.
Also, it is recommended to add a Page Top and Page Bottom region to comply with contributing modules that utilize these regions for their own use. Now that we've added that to the samoca. info file, let's go ahead and hit Save and browse back to your Drapal instance and Refresh the page. If we scroll down, remember, we're not going to see anything yet, and that's because we need to Flush the page cache. Once we Flush the page cache, we should now see those new regions appear.
If we go back to Structure>locks, we now see the Featured section, we see the Content, the Sidebar, Social Icons, and Footer section. Now, what we need to do here is actually assign the content to the proper regions. We'll start with the Featured region. The Featured region actually takes the View: Spotlight, View: Upcoming and Plan Your Visit block.
For the Content region, it takes Main page content, View: Current, View: Previous, View: Featured, and the Home Page Content Links. For the Sidebar region, we need to assign the View's Sidebar Exhibit, the Become A Volunteer, Talk to Us, and the Content Links.
The Social Icons region takes the Social Icons block. And finally the Footer region takes the Copyright. I'm going to go ahead and disable the Development module from the Footer by selecting None, and then I'm going to scroll down to the bottom and click Save blocks. One last thing I want to check is to make sure that these are in the correct order within each region. For instance, View: Spotlight should be first, followed by View: Upcoming and Plan Your Visit.
For the Content region, the order is Main page content, View: Current, View: Previous, View: Featured, and Home Page Content Links. For the Sidebar region, it should be View: Sidebar Exhibit, Become A Volunteer, Talk To Us, and Content Links. The rest of the blocks inside the regions are fine, so let's go ahead and Save this one more time. Go ahead and close the Blocks interface.
Now that we are confident that the proper blocks are assigned to the correct regions, we need to make sure that the page templates are printing those regions. We need to be able to see if the static content is actually being replaced with a dynamic content from Drupal. Let's begin this by browsing back to your editor, scrolling down to the sites>all>themes>samoca> templates folder and open up the page--front.tpl template.
If I scroll down a little bit, I need to take a look at first replacing the featured section content. So I want to highlight everything between the wrapping div and delete it, and I want to replace this with a print statement for the correct region. I can copy that from the readme file and paste that in place.
Now, what this is saying is go ahead and render the page variable with the Featured region. So we should see, once we save this, and by browsing back to our Drupal instance and Flushing the page cache, the static content being replaced with the dynamic content, which it has. You can see that we've lost some of the static styling that we saw and we're now showing the dynamic content. Let's browse back to our editor and continue this process.
For the content section, I need to delete the content between the wrapping div, paste in that render statement and change the word featured to be content. I'm going to Save that, browse back to Drupal, and scroll to the top and Flush the page cache. If I scroll down I should actually see the static content once again being replaced with the dynamic content.
Let's browse back to our editor and replace the content for the Social Icons, highlight the unordered list, paste in the print render statement and change the word featured to social. Save that. And then let's do this one more time for the footer, and then take a quick look to make sure that we've successfully replaced any static content with the dynamic content that should be rendered with the regions.
Save the page, browse back to Drupal, and Flush the page cache. Now if we take a look, the front page should be completely dynamic in nature, and it is. Now, let's repeat the process for our interior pages. Browse back to your editor, close page-- front.tpl.php and open up page.tpl.php.
Scroll down to the main content and replace the static content remaining with the print statement for the content region. Now, if I browse back to our Drupal instance and click on one of the interior pages, I now see some of the static content being replaced with the dynamic content. Browse back over to our editor and let's continue this process.
Locate the sidebar and replace its content with the print render statement for the sidebar. Repeat the process for the social-icons and the footer, save that page, browse back to Drupal and refresh. Now, you may be asking yourself, why didn't I have to Flush the page cache? Once the template is actually created, you don't have to get in the habit of Flushing the page cache, I would recommend it though so that you're not looking at a page and wondering why something hasn't happened.
By Flushing the page cache you're ensuring that you're getting that fresh copy of any dynamic content that Drupal should be outputting. If I go ahead and scroll down, I should see all dynamic content and if I go to the other pages, I should also see dynamic content being displayed. If I compare this with our static HTML mockup, I should begin to see a little bit closer relationship between how the themes look for the home page, for the collections page, the about us page, and finally the ask us page.
Rendering Drupal content is as simple as defining the proper regions within your .info file, arranging the block content to display in the correct region, and rendering the regions within your template to replace static HTML content. However, Drupal 7 introduced the new region template, which allows us some flexibility in theming the output of regions in Drupal 7.