7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.8 The Header (Part 2)

Hey, welcome back. In the previous lesson I started writing the header.php file. So, let's go ahead and finish that one. So, let's see what we got so far. We have the head complete. Now, let's move on to the body. Now the body, I'm going to delete these two ending tags because they don't belong in the header.php. And on the body, I'm going to say ?php body_class. And this will apply certain classes to the body element depending on which page you're on. So for example, I refresh. If I inspect the body element, you can see we have body class home blog logged-in admin-bar customize-support, right. If I go into Testing, we have different classes. Single, single post, post ID 4, single format standard, and so on. So, it depends, and you can use these classes to style various aspects of your page. After this, we got to put the header. So, let's do header. And then I'll start with a header with the class of site-header and put role="banner" for accessibility purposes. The header will have two components, the logo and the navigation. Let's start with container which will center everything in a page. This is a bootstrap class and then an additional class of header contents, just in case you're going to need it to style something inside the header. Inside we're going to start with a div class row. And then a div with the class of col-xs-3 this will be used for the logo, plus a div with a class of col-xs-9. Inside the first div, we're going to say, div, and under div with a class of site logo and site and anchor tag. Now, the anchor tag should link to the homepage. So, we're going to put rel=home. It will not have any kind of text because it will display the image as a background image, but we'll do that in a future lesson. And on the href, I'm just gonna say PHP. I'm gonna use echo esc_url and inside we're gonna say home_url yeah like this. And this basically will return a link to the home URL and will also sanitize it. All right, so refresh, no errors. So that's very good. On the second column here, we're gonna have our nav bar. So, start with a nav with a class of site-navigation. Role is going to be navigation. And inside, we're gonna use a php function, and that is called wp_nav_menu. And wp_nav_menu will receive an array as an argument, and that array will say this. First of all, theme_location. This will refer to which menu should we use. And I'm just gonna say main-menu here. And if we go back to functions.php, main-menu is the slug of this navigation menu right here. So, theme_location is main menu and we're just gonna give another parameter. Menu_class will be equal to site-menu. And this is a class that will be added to the generated menu. Okay, save that, and we are done with the header. Next, the next thing that's common to all pages is the content area. So, I'm gonna say main content area. And in here I'm gonna start a div with a class of container. And I'm gonna start a div with a class of row. And these will be finished or they will be closed in the footer, right? So already you can see how this might work. In the header, we're opening up a few divs, and in the footer we're closing them. And in between is the content that's wrapped in the container and row classes. So, now if we check out the front page, we can see a menu here that's generated automatically. But menus can be controlled from WordPress. When you go to Appearance you should see a Menus option right here. But it isn't now so it means I must have made a mistake. So let's see, register_nav_menus. Array Main Menu 'alpha,' this is correct. Function alpha_setup and it loads after oh, sorry, after_setup_theme. I mixed it up there, my apologies. So after_setup_theme is the correct function to add the hook. So now, let's refresh. Appearance, and there it is, menus. If we go to Manage Locations, you're gonna see the main menu. And we can assign one of the menus that were created when we imported the theme unit test, all right? So you can see all the menus here, for starters. Yeah, we have all of these menus. So if we go to Locations, we can select a menu, for example, the Short menu. Save Changes and refresh. We can see a much shorter menu here, okay. And that's basically it for the header.php. Now, inside index we're taking care of this first part, so this is loading correctly. In the next lesson, I'll take care of the side bar and also the footer.

Back to the top