Join Joseph Lowery for an in-depth discussion in this video Changing a template header, part of Dreamweaver and WordPress: Building Sites.
- View Offline
While the same header across all pages in a web site is fairly common, sometimes you need to modify the header to make a particular site section really stand out. In this video, I'll show you how to change the code in the header.php file in Dreamweaver to accommodate any number of custom page templates. So let's open up header.php from our theme folder, tpa. I'll switch to Code view. As you can see, the header area has actually already been adapted once with an if-else clause.
So I'll scroll down a little bit here so you can see the entire body area. This is set up now so that if there is a page template named working_future.php, as you can see on line 31, it will insert two specific images: logo_working.png and working_name.gif. Otherwise, if it's not this specific page template, show us the default images: logo.png and tpa_name.gif.
Let's expand the conditional statement to check for another template, our new Explorers template. The easiest way to do that is to copy this if statement that we see here all the way down to, but not including, the closing PHP bracket. Then I'm going to just add a little bit of whitespace here so we can concentrate on the code we're working on, paste that right in the middle, and I'm going to change this else statement to an else-if statement, and we'll have it check the condition within the parentheses using a WordPress function called is_page_template, as you see employed in the if statement up above. And the name we're looking for here is the name of our template file, explorers.php.
Now let's change one of the images to identify our page more clearly. We'll keep the same logo, but let's change the underlying name, so instead of spelling out Trans Planet Airlines, it says explorers. So I'll change it from tpa_ name.gif to explorers.gif. Now I happened to know that this has a different height as well, so I'm going to change the height from 37 to 48. Okay, let's get it rid of our additional spaces here, save our page, and let's preview it.
So I'll move back to my index.php page and toggle in and out of Live view to make sure that we have the most recent version. There you can see my new Explorers navigation item. So I'll press the Ctrl key, Command key on the Mac, and click on that, and now you can see that our header has changed specific to this template. And we have TPA Explorers now. If I go back to any of the other pages, like Planets, you'll see different headers for those as well.
You can see that the default header is showing and if I click on the default header to go back to my homepage, it's there as well. So it's only when we go into Explorers that we get the custom header here. Of course you can do whatever you need to to transform your header to work with your custom page using this conditional technique. Just add your code in the proper if or else-if clause and you're good to go.
- Understanding development environment requirements
- Working with existing WordPress content
- Handling standard pages
- Managing full posts
- Coding a basic template
- Adding a custom sidebar
- Working with WordPress functions
- Inserting PHP code in posts
- Including a recordset
- Outputting data
- Linking to dynamic pages