Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Creating regions and rendering page variables

From: Drupal 7: Creating and Editing Custom Themes

Video: Creating regions and rendering page variables

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.

Creating regions and rendering page variables

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.

Show transcript

This video is part of

Image for Drupal 7: Creating and Editing Custom Themes
Drupal 7: Creating and Editing Custom Themes

42 video lessons · 11801 viewers

Chaz Chumley
Author

 
Expand all | Collapse all
  1. 5m 58s
    1. Welcome
      1m 3s
    2. Using the exercise files
      2m 4s
    3. Viewing the finished project
      2m 51s
  2. 23m 21s
    1. Installing Drupal 7 (Mac or Windows)
      7m 23s
    2. Using a development environment
      3m 36s
    3. Installing contributed modules
      3m 43s
    4. Using the Administration Menu module
      3m 55s
    5. Using the Backup and Migrate module
      4m 44s
  3. 15m 35s
    1. Using the Devel and Theme Developer modules
      7m 23s
    2. Using Firefox, Firebug, and Web Developer extensions
      4m 55s
    3. Using the Block Class module
      3m 17s
  4. 9m 42s
    1. Exploring the Appearance interface
      3m 20s
    2. Choosing global and theme-specific settings
      2m 55s
    3. Installing prebuilt themes
      3m 27s
  5. 10m 40s
    1. Anatomy of a theme
      2m 57s
    2. Structure of a theme
      1m 52s
    3. Understanding templates and variables
      4m 11s
    4. Exploring the theme registry
      1m 40s
  6. 27m 23s
    1. Exploring the Bartik themes folder, file structure, and .info file
      5m 45s
    2. Exploring how CSS references work in Drupal
      10m 49s
    3. Exploring how script references work in Drupal
      5m 7s
    4. Exploring regions and how they are referenced in a theme
      5m 42s
  7. 11m 5s
    1. Using the Backup Migrate module to create content for a web site
      2m 33s
    2. Creating a theming roadmap
      3m 10s
    3. Creating a theme folder, theme structure, and a .info file and enabling a theme
      5m 22s
  8. 54m 5s
    1. Customizing HTML templates and variables
      5m 29s
    2. Customizing page templates and variables
      13m 43s
    3. Creating regions and rendering page variables
      11m 36s
    4. Customizing region templates and variables
      53s
    5. Customizing node templates and variables
      4m 49s
    6. Customizing block templates and variables
      12m 14s
    7. Customizing view templates and variables
      5m 21s
  9. 13m 36s
    1. Removing unnecessary modules
      2m 46s
    2. Optimizing the CSS and JavaScript
      2m 45s
    3. Enabling caching
      4m 43s
    4. Exploring the performance settings
      3m 22s
  10. 44m 19s
    1. Recreating HanselAndPetal content, files, and the .info file
      14m 0s
    2. Adding an HTML template and modifying page templates
      11m 25s
    3. Converting node templates and page variables
      10m 30s
    4. Converting block templates and page variables
      3m 41s
    5. Converting miscellaneous templates and cleaning up CSS
      4m 43s
  11. 1m 11s
    1. Goodbye
      1m 11s

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ .

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed Drupal 7: Creating and Editing Custom Themes.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member ?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferences from the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.