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

Adding an HTML template and modifying page templates

From: Drupal 7: Creating and Editing Custom Themes

Video: Adding an HTML template and modifying page templates

Drupal 7 has added new templates and has changed the template suggestions, all of which we will discuss when we take a look at how to convert the existing Drupal 6 page.tpl templates. We will also discuss what page variables and Regions have been added and how to migrate from Drupal 6 to Drupal 7. Let's begin by browsing to your editor and within the hanselpetal6>sites>all>themes> hanselandpetal theme, what I want to do is locate the page-front page and page-node.tpl templates.

Adding an HTML template and modifying page templates

Drupal 7 has added new templates and has changed the template suggestions, all of which we will discuss when we take a look at how to convert the existing Drupal 6 page.tpl templates. We will also discuss what page variables and Regions have been added and how to migrate from Drupal 6 to Drupal 7. Let's begin by browsing to your editor and within the hanselpetal6>sites>all>themes> hanselandpetal theme, what I want to do is locate the page-front page and page-node.tpl templates.

Let's go and begin with a front page. So if I actually Copy this and Paste it into our hanselpetal7>sites>all>themes> hanselandpetal templates folder, which we still need to create, create that now, and let's go ahead and open this and take a look at exactly what the Drupal 6 version looks like and what we need to do in order to get this to work properly in Drupal 7.

First of all, we know some of the page variables have changed, as well as if we scroll down we know that the page.tpl no longer contains the HTML wrapper. So let's tackle this first. Let's scroll up to modules>system>html. tpl.php and just Copy this and Paste it into our templates folder. Now that I have the Drupal 7 HTML template controlling the wrapper, I can delete it from my page-front.tpl. php file. Let's do that now.

Highlight everything, including the opening body element, scroll to the bottom, and then delete the closing HTML and body element, and then hit Save. So that will take care of the HTML wrapper. The other thing I need to take a look at is the template suggestion name. We know in Drupal 7 that it's no longer page-, but instead it should be page--front. So close it real quick and then let's rename this, add the additional dash and hit OK.

Now that we have the HTML wrapper taken care of, the template suggestion name corrected, go ahead and open back up the file, and then let's replace the documentation here for the variables with the correct version. Scroll back up to our modules folder, open up the page.tpl, and let's Copy all the way down to the closing PHP tag, Copy it, open our other page back up, and replace it.

This way if we need to go back and reference any of the new variables we're not looking at old documentation. Go ahead and Save that, and then let's scroll down a little bit and take a look at exactly what we have. The first thing that I see that we need to address has to do with the search_box. And if I scroll down a little bit, one thing that you need to be aware of is that the search_box has actually been moved into its own block and can no longer be referenced the way that it currently is inside of Drupal 7.

Instead, we need to replace this with a snippet of code and a Drupal 7 function. If we scroll up to our Exercise folder and take a look at the 09_02>readme, and then scroll down to the bottom I have that snippet of code for us to copy and paste. Highlight it, Copy it, go back to the page--front and replace the search_box section with that snippet of code.

Go ahead and Save your page and let's take a look at this. What this is saying is go ahead and create a copy of the search block, put it into this variable so that I can then turn around and render it, and this is the new way of actually being able to include a search form inside of a template. Then the next thing that we need to take a look at has to do with the header region. It's no longer a variable, but instead needs to be rendered as part of the page variable.

So let's modify this so that it prints out correctly. We're going to replace the !empty with the $page variable, and instead of open and closed parens, those are actually going to be replaced with open and closed square brackets. Let's highlight the open and closed header paren and delete it, and then add square brackets and then single quotations and the region name of header. We then need to replace the print statement as well.

We can do that by highlighting the header variable, deleting it, and then typing out the following, render($ page) ['header'], and save. So now we successfully replace the header variable to print the header region. Next we need to take a look at the navigation. When it comes to navigation, primary links and secondary links no longer exist. In fact, they've been replaced with main menu and secondary menu.

For sake of typing, I'm actually going to open up the completed page-front.tpl.php file inside of the Exercise folder and Copy and Paste in the navigational elements that need to be in place for Drupal 7 to output it correctly. Open up the page--front.tpl.php, scroll down to where you will find the navigation section, and Copy the whole containing div along with the logic.

Tab back to the page--front template inside of your Drupal 7 instance, and highlight the div navigational area for both the primary and secondary links and replace it. Now, what we've done here is replaced them with a conditional logic. So instead of saying, if not empty primary links, we are saying if main menu exists, then go ahead and print them out. Now we need to take a look at the left and right regions.

Remember, we have replaced the left and right regions with Sidebar First and Sidebar Second. Let's go ahead and change the conditional logic so that it reflects properly. Then we need to render page sidebar_first. So we need to print and then render statement with open and close parens followed by the page variable, square brackets.

We can Copy the beginning of the conditional statement, scroll down to the empty right region, and Paste that in place, and then change this from sidebar_first to sidebar_second. We can also scroll back up and Copy the print render statement, scroll back down and replace the print right variable with this as well, and change it from sidebar_first to sidebar_second.

Hopefully you're starting to see a pattern here. For sake of typing, I'm actually going to open back up the page--front from the Exercise Files, highlight everything, Copy it, go back to my template, highlight everything, and Paste. I'm then going to Save this and we can do a quick look to see what's changed. Logo, site_name, and site_slogan have all remained the same, the search_box has been replaced with the module_invoke to pull in the search block_view, page header has been changed to render correctly, navigational elements have been changed to render correctly, sidebar_ first and sidebar_second have been changed to render correctly.

And if we scroll down to the content section, which was the only thing really left, we have the introduction of title_ prefix and title_suffix, along with the title, and then the rendering of the content followed by messages tab, help, and feed_icons. Now, if I Save this and then browse back over to Firefox and then click on the Performance tab and Clear all the cache, and then close the Performance interface, I should see my theme start to come into picture.

If I actually compare this to the home page on the hanselandpental6 theme, I should start to see some similarities. I still have a little bit here left to do. So let's browse back over to our editor and close the page--front template, along with any other open tabs that you may have, and let's concentrate now on the page.tpl.php.

Once again for sake of time, since hopefully you're seeing a pattern here develop, I'm actually going to scroll up to the top of the Exercise Files and Copy the page.tpl and the page--node--6. tpl and Paste those into my templates folder. I'm then going to browse back over to my Drupal instance, click on the Performance tab, Clear all the cache, close the Performance interface, and then quickly browse to our other pages; home, about us, services, and blog.

We have converted the previous theme's page.tpl into the new html.tpl and page.tpl templates, along with the different template suggestion naming conventions, modified the page variables and regions, removed deprecated variables, and added variables that have been moved into their own blocks and regions. Next, we will look at converting node templates to work with our migration from Drupal 6 to 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 · 11595 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 preferencesfrom 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.