Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
When we set up the functions.php file towards the beginning of the course, you may remember that I activate this feature, implement the custom feature, which in turn calls for a file in the include folder called CustomHeader. Now we're going to take a look at what that feature does and how we can work with it. The custom header feature in WordPress enables the site owner to interact with how the header is displayed. Specifically, she can use the Customizer option found under the WordPress tool bar to change the appearance of the Site Title and Tagline, and also the colors.
So if I go to Colors here, you can see my default text color is white, but I can change the text color of the header to anything I want, and when I do, it'll impact both the description and also the title. You just can't see it in the customizer right now. More importantly, though, you could also toggle the header text on and off by toggling this display header text option. And here you see we have a bit of a problem. Because, we added the box here, and we also added a bunch of margins and padding to the overall container.
So when you hide the header text, the header still appears with a box. What we actually want to happen is for the header to collapse completely so that we only see the menu. So here we have to do a bit of work. The first thing I have to do is understand exactly what is happening here. So I'm going to save the setting right now with the header text hidden, and go back to the front end of my site. And then I'm going to right-click on this box, and then go, Inspect element, to see what's actually going on. And here you see, we have the box titled box, and within it, the site title and tag line are actually still present.
They've just been hidden using some CSS. So here you see we have some custom CSS. This has site title and site description, position absolute, and it's clipped. So what we need to do is apply this CSS to the entire site branding box, so that the entire box collapses. And all of this is managed inside the custom header template. So let's go to includes and custom header and take a look at what this template that we activated actually does. If I scroll past the top here, you'll see it starts out with add_theme_support, custom-header.
And within this function we can define the customer header. So here we have things like the default text color. By default, it's set to black, so I'm going to change this to white. You also have the width and height of the header image. And we're going to work with that later. And then, when you scroll further down, you find this function, my_simone-header_style. And this is where that custom CSS gets injected. So here you see the styles that got injected when we hit the header text. This is actually activated by a really interesting conditional statement, the tests for the header text color.
Because by default the header text color is set to something. And what happens when you toggle that switch to height, you take the header text color away. And then, this piece of style will kick it so what we need to do here is change what is affected by the style. So instead of targeting site title and description, I'm going to target branding. You'll remember that site branding is the entire header so if I simply make this small change and save the file. And then go reload my browser.
You'll see the entire header disappears but on the mark up, site branding, title box, title, and description is still there. That's great and it's exactly what I want. But now I need to go back and check that this still works with the customizer. And when I go to the customizer and display the header text you see nothing happens. But if I save and publish, and then go back to my front page, the header reappears. That's because now that we made a change, we need to make the corresponding change in the code that controls the customizer as well.
And here, I could just change it to site branding, but if you look closely, you'll see there's this extra variable, called color: to. This is the variable that allows the customizer to apply new colors to the text. And I want that to still work, so instead of taking site title and description out, I'm going to add site branding here. And I'll save the customerize.JS file and then go back and open the Customizer in my browser. And now, when you go and toggle display header text on and off, you'll see the entire header will disappear and reappear exactly as we want it.
Get unlimited access to all courses for just $25/month.Become a member
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.