Join Joseph Lowery for an in-depth discussion in this video Setting up the header, part of Dreamweaver CS6 and WordPress 3.8: Core Concepts.
In the previous lesson we changed the background and page width to match our site. Now we're going to work our way from the top down starting with the header. I have both the blog comp.html file which is found in the _source folder, as well as the index.php file from our WordPress blog folder open. And I'm now in Live View in both documents. As you've seen, WordPress is very big on dynamically building the page by including its constituent parts.
The header is one such part and typically includes any pre-html code, the opening HTML tag, the entire head tag, the opening body tag, and any header area prior to the main content. All of this code is contained in the header.php file. To preserve our parent theme we're going to copy the header.php file from the Custom Theme folder to our Roux Theme folder. So I'll go to my Files panel and drill down to hp content > Themes, expand Custom, locate the header.php file, do a Cmd+C or Ctrl+C to copy that, and then select my Roux Theme folder and paste it in.
Now, I'm also going to need some images that are used in my Blog Comp and I'm going to pull those from the _images folder. And the two that I'm looking for, well, actually there's more than two. These various blog headers that we see here, blog header 01, blog header 02 and blog header 03, we'll be using these throughout the course. In addition, I also want to pick up diagonal pattern.png. With those four files selected I'll copy them, and because this is in an _images folder I am going to replicate that in the Roux folder.
So first I'll go to Roux, right click, New Folder, _images and then paste in my copied files. Perfect. Now, Dreamweaver's pretty good about reading in new files, but one thing I've found is that there are some times you need to give it a helping hand. So if I go to my index.php file, and I show all file types. Let's go all the way to the end here. So I happen to know that header.php is right towards the end.
And if I roll over the file, you can take a look at the tool tip. Let me do that again to bring it up. And you see towards the end, it's in the custom header.php file. And that is not what we want. Unfortunately, refreshing the page, as you can see after I just click Refresh, and then let's go back to that header file here, doesn't really make a change. So what you need to do is to close index.php and then reopen it and this will help Dreamweaver identify the right files.
So I'll close index.php and then go to File > Open Recent > index.php > Discover My Files, and let's make sure that we've got just the header files here. So I'm going to go ahead and use my custom filter. And this time let's bring in style.css; header.php, see what we get. Okay. So, now I still have my two stylesheets, one from Roux, one from custom.
But I only have the one header.php file, and as you can see by looking at the tooltip, it's in the Roux folder. Perfect, so let's switch to that. And now I'm ready to bring in the code from the comp. I'll go back to the comp, go to the source code, code view and I'm going to scroll up to the top. Now I like to start at the very top of the file just to see what's there, but realize that you don't need to copy what's in the head of the file because your new header.php will already have that covered.
Really all what you need is just what's in the header, so I'll go ahead and select that, and copy, and then head on over to index.php. Let's go into code view to make that a little bit easier. And we'll go past the head tag and right where it has header now, let's select that and we'll replace it. Now we'll come back to the code so we can fix the links in just a minute. But for now, we're going to concentrate on the styles.
Let me save my header.php page. And if we take a look in design in Live View, you can see that the styles are just presented as a standard list. So in my blog comp however, back in Design view, everything is horizontal. Let's inspect the nav section so we can see what styles are being used. Let me collapse the Files panel over here, so over in the nav I'm going to go up just a little bit, looks like we've got a .page header nav.
That seems to be the start of it, so I will click once to lock down my Inspect view, and then right click on page header nav, go to code. And there's a whole section of nav styles. Perfect. So we're going to copy this entire set of rules. I'll even include the comment just to make life easier on myself. And let's go down to the end of this section. All right. That goes to there. I'll copy that. And then make sure I'm in my Roux style sheet.
And paste those in. So when we click back into Design View, you can see that the styles are applied and we're much closer to where we need to go. Well now that you've got the Header set up, you're ready to bring in some custom web fonts.
- Setting up WordPress locally
- Establishing your Dreamweaver CS6 site
- Adding and editing posts and pages
- Customizing WordPress themes
- Building responsive layouts
- Extending WordPress editable pages
- Using and styling WordPress plugins
- Integrating Spry functionality
- Publishing your WordPress site with Dreamweaver
- Personalizing and enhancing WordPress
Skill Level Intermediate
Author update on April 4, 2014:
WordPress 3.8.2 is now available from wordpress.org. The update focuses on security issues and should not impact this course in any way. A much bigger release, 3.9, is currently a release candidate and will likely go live later in April. I'm currently evaluating what impact v3.9 will have on this course.