Viewers: in countries Watching now:
What we have right now is the standard implementation of a header image in a WordPress theme. The header image appears as an optional extra element that appears above the main content and has an independently clickable link. That means we can go to the Customizer and choose whether we want to display both the header image and the title. Or if we want to display only the header image. Or only the title and tagline. But my design calls for something a little bit different. In this situation where the header appears and the site title and tagline appear I want the header image to appear as a background element.
Behind the site title and tagline instead of as a separate element. That means in the current state, I need to hide the image, and then display it instead as a background element using CSS. This can be achieved with some clever conditional statements within our header.php file. This is how the header works right now. We're using a conditional statement to test whether the header image is available and if it is we display it as a separate element. And then, we display the site title and tag line separately.
What I need to do is change this conditional statement. So instead of just testing for the header image I also have to test to see whether or not the site title and tag line are hidden. And what I want to say is if the header image is available and the site title and tag line are hidden, then display the header image. If the site title and tag line are not hidden and the header image is available. I want to place the header image down here as an inline style and step. So first I'm going to toggle the header image off when we display both the header image and the slide tunnel and tag.
And I'm going to do that using that same conditional statement you saw before, that this has blank, double equals, get header, text color. So what we're doing here is saying. In the case of the header image being available. And the header text color set to blank, meaning we're hiding the site title. Then display the header image. If on the other hand, the header image is available and the header text color is available. Meaning we're also displaying the site title and description.
Then this image will not display. So now that we're hiding the image we need to add it into the site branding class. And here I'm going to add the image as an inline style. So I'll say style equals, and then background image. And I'll set it to a URL. And then I'll grab the URL up here. So this function here, header image, outputs the URL for the header image. So I'm going to place it right here. And I'll save the template and reload it. And now you see the header image has been swapped and moved behind the site title and tag line as a background element.
Now I need to add some style to make this look good, because right now you see exactly the scenario I mentioned previously. That the title and tagline are drowning out in the image. And you'll also see that the image is tiling. So, I'm going to go to my code snippets and scroll down. And here you see I've created two new styles. So, I'm going to copy these two rules out and go to style.css. Here we have header image and here I'm going to paste those two styles in. So the first style targets a class called header background image that we need to apply.
And what it does is stretches the background image so that it fits the whole screen. The second style, which is called header-background-image title box, puts a transparent background behind the title box. So now I need to add this head-background-image class to my header.php. So here we already a class. So the div site class branding and I'll add header background image. Then I'll go and reload my page. And you'll see now we have a nice transparent background behind the title and the image here appears stretched.
So as I resize the browser you'll see the image won't retain it's size but stretch to fit the whole browser. But now, if you look at the code. You'll see that regardless of whether or not the header image is available, we always display this extra class, and also the extra inline style. And that's not a really good way of doing it. Because there are many situations like the default situation, where there is no header image available. And in those cases, we should really only display this site branding class, and none of this extra styling.
So if you go back to the code snippets and scroll up, you'll see it right here, inside this in_header.php section. I've created a new conditional statement. If you copy out this conditional statement and replace the line that says class site branding with the conditional statement. And then shift it in. What we have here is a situation where we say, if we have the header image and we are currently displaying the header text color. Meaning the site, toggle and title is being displayed, then use this start of the divider.
The one that contains site branding, header background image and a call to the background image. If, on the other hand, we don't have a header image the just display a regular selector here that only has site branding. That way, when we have the header image and the site title, we get this layout. If I go into my customizer again and toggle the header image off. And Save and Publish. You'll see when I inspect my code here that site branding only has site branding and we don't have that extra inline style.
So now we have a fully customizable header that has three different options. We can display just the header image. Adjust the site title and tag line, or display the header image as a background element behind the site title and tag line.
There are currently no FAQs about WordPress: Building Themes from Scratch Using Underscores.
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.