Drupal 7: Creating and Editing Custom Themes
Illustration by John Hersey

Converting node templates and page variables


From:

Drupal 7: Creating and Editing Custom Themes

with Chaz Chumley

Video: Converting node templates and page variables

As we continue to convert Drupal 6 node templates, we will take a look at what is changed since Drupal 7, including template suggestions, page variables, the content array, and how to hide and render individual fields and variables so that we can control the exact HTML output needed for theming. If we compare our current version to our Drupal 6 version, we can see that there are a couple of different things that we need to change. First of all, the no display in the middle actually has a heading that does not have a background image.
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 36s
    1. Using the Devel and Theme Developer modules
      7m 23s
    2. Using Firefox, Firebug, and Web Developer extensions
      4m 56s
    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 your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
please wait ...
Watch the Online Video Course Drupal 7: Creating and Editing Custom Themes
3h 36m Intermediate Jan 12, 2012

Viewers: in countries Watching now:

Drupal 7: Creating and Editing Custom Themes shows the tools and techniques needed to build custom web sites with Drupal. Author Chaz Chumley introduces Drupal theme administration and takes a look at basic theming concepts, such as templates, regions, and variables. The course explores how Drupal default themes are configured and structured and how to install and edit a theme. The course also explores the tools a designer needs to create a Drupal 7 theme, using HTML, CSS, PHP, and Drupal templates, or migrate an existing Drupal 6 theme to Drupal 7. Exercise files are included with this course.

Topics include:
  • Installing Drupal 7 on Mac or Windows
  • Using the Devel and Theme Developer modules
  • Understanding templates and variables
  • Choosing global and theme specific settings
  • Exploring how CSS and JavaScript references work in Drupal
  • Creating a theme roadmap
  • Creating the theme folder, structure, and .info file
  • Customizing HTML templates and variables
  • Creating template regions and rendering page variables
  • Optimizing site CSS and JavaScript
  • Understanding performance considerations such as caching
  • Migrating themes from Drupal 6 to Drupal 7
Subject:
Web
Software:
Drupal
Author:
Chaz Chumley

Converting node templates and page variables

As we continue to convert Drupal 6 node templates, we will take a look at what is changed since Drupal 7, including template suggestions, page variables, the content array, and how to hide and render individual fields and variables so that we can control the exact HTML output needed for theming. If we compare our current version to our Drupal 6 version, we can see that there are a couple of different things that we need to change. First of all, the no display in the middle actually has a heading that does not have a background image.

Also if we scroll down and we take a look at exactly how the Read more, Add new comment is being displayed, the Drupal 6 version has a Shares this link and this is something new in Drupal 7. The way that the comments are rendered, we no longer actually get to have a combination of comments with the Add new comment, instead the way that it's rendered is actually with the Add new comment and if I scroll down a little bit, you'll actually see the comment count alongside the Add new comment.

Those are all things that we are going to need to address. Go ahead and browse over to your Editor, open up the hanselpetal6>sites>all>themes>hanselandpetal folder and let's take a look at the node.tpl.php. What we want to do is actually look at exactly what we need to change in here. For instance, items like picture have been changed to user picture and the page title actually has a title prefix and a title suffix to allow modules to display content around it.

Submitted has actually been replaced with display_submitted and if we actually scroll down to content, remember there's now a content array that allows you to be able to display different node items that are part of that array and those variables can be hidden and shown later within a template. The other thing not so noticeable is that clear-block has actually been replaced with clear-fix. So let's take a look at the best practices for migrating this over to our Drupal 7 instance.

Scroll down to your hanselpetal7>sites>all>themes> hanselandpetal>templates folder. What we wan to do is actually take a copy of the Drupal 6 version and paste it into our templates folder, lets do that now. Now that we have that in there, let's go and open up that version, let's compare that to the default modules>node. tpl template that Drupal 7 utilizes.

The first thing I want to do is replace the documentation. So I am going to highlight it, including the opening div copy it, go to my template for the Drupal 6 version and replace the code in the window. The next thing I want to do is replace picture with user picture. So once again copy and paste.

If we'll look at how the title is being displayed, we notice that the title prefix and title suffix is not part of this. So let's go back over to our node.tpl from our Drupal 7 version and simply copy the section of code and replace our version. Now let's take a look at the meta div. Inside here I have $submitted and $terms. If we take a look at what the equivalent is in Drupal 7, we can see that if display_submitted is the new conditional statement.

So let's copy that and replace the one in our templates folder. Let's also take a look at terms. If you notice we don't actually see terms anymore. The reason behind that is because terms have actually been moved into the content array and now display as links. So let's go ahead and bypass that for a second and then take a look at exactly how the content is being displayed. I am physically going to copy this div and then go back to our instance, I am going to remove terms, because remember terms are no longer part of Drupal 7 and then right above div class="content" I am going to paste in the new way that content is used inside of Drupal 7.

We can see that the class="content" is the same for our Drupal 7 and Drupal 6 instances, so I am going to simply remove or delete this particular block of code. The next thing we have is the share this link. This still uses the node_url so there's nothing to currently change here. However when we get down to print links, we no longer print the link's variable since its part of the content variable array.

And if I flip back over to my Drupal's 7 version, I can copy and then replace this print statement. If I've done everything correctly I should be able to the save this node.tpl, browse back over to my Drupal instance, click on the Performance tab and clear all the cache and then close the Performance interface. I now see the share this link and the Read more and Add new comment are also being displayed properly with the node.

If I continue to scroll down the page I can see that the layout is starting to take shape exactly the way I wanted. However when I get to a blog post that's currently being displayed, I'm seeing some information that I want to be able to hide. Let's compare the blog post in our Drupal 7 version to the Drupal 6. From here all I simply see is the share this link along with the Add new comment or comment count and the admin's blog for who it is that submitted this particular blog post.

I compare that to my Drupal 7 version, I'm seeing a little bit more information than what I really need. Let's actually browse back over to our Editor, close the node.tpl and then actually scroll up and take a look at the node-blog.tpl.php template from our Drupal 6 instance. I'm going to copy this and I am going to paste it into my templates folder. When I do, I also need to rename it, because remember based off Temple suggestions is no longer node-blog, but node--blog.

Go ahead and rename it now and for sake of time I'm actually getting going to open up this note--blog.tpl.php that I've copied in and then go up to my Exercise Files, open up the 09_03 folder and open up this version. I'm then going to copy and replace and then Save.

Now one thing that I want you to take a look at is all the code right smack in front of you that has to deal with the content array. In order for me to get the Drupal 7 version to display properly, I had to traverse the content array looking at the links, then the blog and then the links blog_username_blog, href simply just to get the hyperlink for the blog submitter, followed by the rendering of the content links, blog links, blog_username_blogs, title in order for it to be able to say admin blog.

The short story here is for you to specifically take a look at what the content array holds. You can do this by utilizing a tool such as theme developer and traverse through the content array to see all the information that is now at your disposal to be able to print out. This functionality actually gives us as a Drupal themer a lot more control of the information and the fine-tuning that you may need in order to display content that you previously would have had to do with some sort of advanced theming functions or pre-process or process functions in order to build out the information into a variable before you could actually print it.

If I actually save this and then browse back over to my Drupal instance, click on Performance and in Clear all cache and then close the Performance window and then scroll down, I can start to see that and now for my blog post if I have a comment it displays and if I do not, it shows Add new comment and prior to where we actually saw Add new comment and one comment side by side, those are now gone because I was able to pull that information out properly.

If you take a look at the Exercise Files, there are a couple more nodes that need to be replaced. I am going to actually going to let you do that and then in the next video we will take a look at exactly how those look side-by-side. So since we have now converted four different type of node templates modified the page variables and learned how to hide and render individual content variables to display the HTML exactly how we need it for our theming needs. We will next tackle block templates and the conversion process for Drupal 6 to Drupal 7.

Find answers to the most frequently asked questions about Drupal 7: Creating and Editing Custom Themes .


Expand all | Collapse all
please wait ...
Q: The Acquia Dev Desktop Control Panel won't open after I restart my system. Is this a bug? What can I do to fix it?
A: Some Mac users are having semi-serious difficulties with the Acquia Dev Desktop Control Panel repeatedly failing to open after routine system restart. See here and here for details.

Fortunately, a reasonable work-around for an otherwise crippling issue is running this shell command in Terminal:
 
sudo /Applications/acquia-drupal/Acquia\ Dev\ Desktop\ Control\
Panel.app/Contents/MacOS/AcquiaDevDesktopControlPanel
 
Acquia Dev Desktop Control Panel is not the only solution available. As an alternative, Mac users can switch to MAMP and Windows users can switch to WAMP, until this issue is resolved permanently.
 
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.

* Estimated file size

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 ?

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

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.