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.
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.
Find answers to the most frequently asked questions about Drupal 7: Creating and Editing Custom Themes .
Here are the FAQs that matched your search "" :
Sorry, there are no matches for your search "" —to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
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.