Join Morten Rand-Hendriksen for an in-depth discussion in this video Styling the default header, part of WordPress: Building Themes from Scratch Using Underscores (2016).
- The very first thing people see when they come to your site is the header, and that's what we'll be working on in this chapter. The header typically displays the site title, the site description, a home link, and the main menu. In this chapter we'll work on the overall display of the header, and in the next chapter we'll work specifically just on the menu. In this theme, I've made a very opinionated design decision. You see, I don't particularly like headers, they take up a lot of space, especially on mobile devices. So, in this theme, you will only see the full header as you see it here when you're on the homepage.
On every other page, you will see a reduced header that just displays the site icon up here in the left-hand corner, and then displays the menu button either on the bottom on small screens or the menu across the top here on wide screens. But that's jumping a bit ahead. The first thing we need to do is make sure the header looks and behaves the way it does in the design. Right now the header in our theme just looks like the rest of the content, that needs to change. And we'll start that, as we always do, in the browser. Using the developer tools, I'll select any of the elements within the header, and inspect the overall semantic structure to find out which components I need to style.
So here you see the header is contained within a header, it has the ID masthead, and the class site-header, and then the contents of the header are contained within a div, with the class site-branding. So if I wanted to add a black background to the header and then center align all the content, I have to work with site-header and site-branding. If you look at the table of contents in style.css, you'll notice there is no section for the header currently, so we need to add it somewhere. I'm going to add it after the clearings, that's just because I think that's where it belongs, you can add it wherever you want.
And then I need to find the place where I want to put it, so I'm going to go search for widgets, which is the next area. And then I'll insert a new section here, so I'll say header... And then we can start. Like I said, we're going to use the site-header. Class to set the background color to black. And then we'll use the site-branding class to text-align: center.
Back in the browser, we now have a black header with the text aligned to the center. Now we can start working with the actual displayed content that will be the title and the tagline, and if we look at the markup, you'll see that in underscores, this is very semantically laid out, so we start with the site-header, I have the site-branding, and inside the site-branding container we have an h1 with a class site-title, and a paragraph with a class site-description, but there's something really important to notice here. We are currently on the front page, and the site title is wrapped inside an h1.
That's because when you come to the front page, the first header should be the site title. However, if I navigate to a single post and then look at the same site title, you'll notice that it's now a paragraph instead. That's because the h1, the first h1 that you'll see on the page is now the post title instead. That means when we style the site title, we have to make sure we don't rely on the inherited styles from the h1. Currently, the h1 is what makes the site title bold, it's what gives it the font family, and what makes it so big.
Back in style.css, I'll set up a rule for site title. Here I'll start with margins to give it some breathing space. 1.7em to the top, 1em on left and right, and zero on the bottom. Then I'll set up the font family. Fira Sans. Sans serif. The font size. 2.4ems, this is the same size as the h1s have. Then font weight.
Bold. Line height. 1.3ems. Color. White. And finally, text transform. Uppercase to make it all uppercase. Save that and reload the browser, and now you see the font looks the same on the front page as it does on a single page. But there's a bit of a problem. My site title is too wide for the container, so what ends up happening is it spills off to the right-hand side and forces us to scroll left and right to see the whole thing.
That simply ain't gonna work. So I need to go in here and add in a little CSS trick. Word-break: break-word. The word-break property will say if the container is too small for the text that's inside, take individual words and break them up. And yes, for a word like Popperscores, that will look terrible, but in most cases, site titles don't have very long words. However, we can fix this with a media query. Simply go in and say @media screen and (max-width; 30em), .site-title, font-size: 2em.
Reload. Now popperscores is fitting. And when we scale up, the font gets bigger. Easy peasy. There's still a bit of work to do, though. The link is currently purple, it has an underline, and there's no hover state. So we'll go in and add that in. Site-title a for the anchor. Text-decoration: none. And color: inherit. So that way the anchor is inheriting the color of the main site title class, which is white.
Reload, the link is now white and has no underline. Then we need to add in a hover class and a focus class. Site-title a:hover. Site-title a:focus. Text-decoration: underline. Now, you'll notice here I'm using both a hover pseudo class and a focus pseudo class, and I'll do that throughout the course. Anytime I use a hover class, I will also use a focus class, because hover is becoming graceful degradation.
More and more people are using touch devices, and on touch devices, you don't have hover, you simply have touch. The focus pseudo class is added in addition because if you use text-to-speech browsers, or you use keyboard navigation or some other input method, the focus class will kick in, and people will be able to see things highlighted when they focus on them. So I'll save this, reload the page again, and now if I use the Tab key on my keyboard, you'll see it when I focus on the site title, it gets an underline. So now we're done with the site title, but if we look here you'll remember there's also a site description, although currently the site description is hidden because it has the same color as the background.
So, back in the style sheet, we'll make up some styles for site description as well. Site-description. Margin: 2em 2em and 3em. Font-size: 110 percent. And color: white. Save and reload. And now we have the site description. Now you may wonder why I set the font size to 110%, but it's still very small. That's because that's 110% of 16 pixels, which is the default font size for the entire page.
So now the header looks almost correct. However, if we go back to the design, you'll notice that underneath the site title, I have this short line, and you'll also notice that the line is not as wide as either the site title or the site description. That means we can't simply add a border on the bottom of the site title or a border on the top of the site description, we have to do something else. So here I'm going to do a little CSS trick. Under site-title here, I'll setup. Site-title::after.
So I'll inject some CSS content directly after the site title div. I'll display that content as a block level element so it displays on its own line. The content is going to be nothing. I'll give the content the margin of .7ems from the top. Auto on left and right, so it's always in the center, and zero on the bottom. Then I'll set the width of the content to 3ems. I'll set a border bottom to solid one pixel, and white.
And finally, I'll set an opacity of .5. Save that, and reload the page, and now a line appears after the site title that I can control with the width property, and that does not add any extra content to my page. CSS magic at work for you. Once I've finished styling this content, I have to make sure it looks good on all screen widths, and you can see this looks quite decent on all screen widths, and that means we can move on to the next step.
- Installing WordPress, Underscores, plugins, and NetBeans
- Creating a modular, mobile-first WordPress theme
- Setting up the basic theme
- Building a custom header
- Designing responsive, accessible menus
- Configuring the Single Post Template plugin
- Generating featured images
- Styling the comments area, search results, and widget areas
- Working with static pages
- Adding features to the Customizer
- Customizing the backend
Skill Level Advanced
Q: This course was updated on 05/13/2016. What changed?
A: We updated one tutorial, "Create a home button with the custom-logo feature," to make it compatible with WordPress 4.5.