FREELessons: 22Length: 2.8 hours

• Overview
• Transcript

# 3.7 The Header (Part 1)

In this lesson we'll start building the header, which is a common element for all pages.

## 5.Conclusion1 lesson, 01:31

### 3.7 The Header (Part 1)

Hey, welcome back. So, let's see what we've got so far. We have a list of posts. And each post is displaying properly. It has the title, it has the post meta, it has the content. So, we're looking good. But one key component that's missing here is the post navigation. Which means that those two links for older posts and newer posts. So, let's go ahead and add that one. So, I'm gonna jump back to my index.php and after the endwhile is complete, I'm gonna say this. This is a function that we're going to create inside functions PHP that will display those two links I was talking about. So, right here in the end, it's function number six and it's going to say display navigation to the next previous set of posts. We start with the usual check. If the function doesn't exist, alpha_paging_nav. Then, we're gonna create it ourselves. So function alpha_paging_nav. I'm gonna close the php tag here because I want to add some HTML. So I'm gonna say ul, and after this I'm gonna restart the php tag. And inside, we're gonna do this. Php, we're gonna say if ( get_previous_posts_link ). So, this is another way of saying if we have previous posts. Then I'm gonna do a list item with a class of next. And inside, I'm gonna say php get_previous_posts_link. And as a parameter, this can receive the title of the link. And, in my case, I'm gonna use a translatable string. I'm gonna say Newer Posts and an arrow, and then alpha as the text domain. And then we're gonna close the if, endif, inside a php tag of course, and then it's the next post link. So I'm gonna say, if get_next_posts_link. Then we're gonna have a list item with a class of previous. I know it's counterintuitive that we have next and previous here. And previous and next here. But that's the way it's gonna go. So next post link, and I'm gonna say here older posts. And a small arrow, and that's basically it. So let's try it. We have some extra markup here that is not needed. Php endif. So, this is not needed and this is not needed. Refresh. And there we go, older posts. And this goes to page number 2. And then we have newer posts, which goes to the homepage. Okay, cool. Coming back to our index page, here. There are three components missing from it. And they are components that are common to all pages. The header, the sidebar, and the footer. So, the header, you include it like this. Php get_header(). That's a function that will load header.php. Next, we have the sidebar. Php get_sidebar(). And this will load sidebar.php and then we have the footer. So, get_footer. And this will load footer.php. So, now if we refresh, notice we have the admin bar. It appeared on the top now. It wasn't there before. And we have a notice. It says that themes without header.php are deprecated. So, the next thing we gotta do is create our header.php. A notice that themes without footer.php are deprecated. What you see here are basically defaults, generated by WordPress. And the stuff you see here. This is the default sidebar. But we'll get to that very soon. First, let's take care of this header. So let's go to header, let's create it actually. Header.php. Php, header.php, and a small description. And then, basically, we're gonna have like traditional starting block for the header, because this will be common to all of the pages. So, it must contain the starting blocks for the HTML, the head, and the body of our page. So, I'm going to paste-in this HTML starting block and make a couple of changes to it. First of all, instead of lang="en". We're gonna replace this with php language_attributes. Next is the charset. So, instead of hardcoding one, I'm going to say php, bloginfo, charset. Now, bloginfo is a function that will return various information about your blog. In this case, we pass in the charset perimeter to return our actual charset. Next is the title. Now, for the title, we're gonna do something like this. We're gonna use the wp_title function, which accepts a number of parameters. First one, is the separator. And we're gonna use the pipe there. The next parameter is a boolean perimeter. Which tells WordPress whether to display the title or use it as a perimeter for another function, for example. In our case, we're just gonna put true because we wanna display the title. And the third perimeter is the location of the separator. So, in my case, I'm gonna put it to the right. And once the title is being shown, I'm gonna put in another php here. I'm gonna say bloginfo, name. So, the way this works. Let's refresh. If we go to a particular page. Template, Sticky, for example. Notice the page title will be Template, Sticky. That pipe separator, which on the right. And then WordPress 3.9, which is the name of our blog. What else? Meta, name, description. In here, I'm just gonna put php, bloginfo, description. So, we're getting the description from the blog. Name author, you can put your name here for example, but I'm just gonna delete it right now. Mobile specific meta, we need this. And then we have the Apple icons, and the favicon. Now, for the favicon, I'm gonna do php echo $favicon. And favicon is a variable that I'm gonna create right now. So, php$favicon will be equal to images /icons/favicon.png. And I'm doing it in a variable so that you can change it later on much easier. Let's do the same with the touch icon for mobile devices. So, right here, I'm gonna say get the favicon. And in here, I'm gonna say get the custom touch icon. So, the $touch_icon will be equal to IMAGES again. /icon/, it's gonna be called apple-touch-icon-152x152-precomposed.png. And this is an icon that will be used on the majority of the devices. So, echo$favicon and for the touch-icon we're gonna say, actually a single link, with the rel apple-touch-icon-precomposed. The size will be 152 x 152. And the href will be php echo \$touch_icon. Now, we gotta add those icons. And I've already prepared them. So, I'm gonna copy some images into the images folder. I'm gonna show you real quick. We have a logo here. And then we have a logo for retina devices. And then inside the icons, I have my pre-composed Apple touch icon. And then 16 by 16 favicon. Now, for the header PHP, in the head portion of the document, we gotta add this hook right here. We gotta do php wp_head. Now, this is a hook. It will load different things regarding the theme. It needs to be there. So, now refresh. And as you can see, by loading wb_head, we now have the correct padding on the top of our document. Now, if we take a look at the source. So, view page source. We can see that by adding wb_head, we have this inline style right here which adds some margin top to the HTML. So, our page is starting to take shape. Really cool. And the next thing we gotta do is add the page header. That's the common element to all pages. And the page header should contain the logo and the site navigation. That's coming up in the next lesson.

Back to the top