What’s important for you to know is that we made a change to the front page template. In our front page template, we’ve got our header area with what we call our front page header and it has all this in it.
Change the Page Template
However, that did not actually affect the page template. And the page template still has the two column, the typical Agility header in it. Now this typical Agility header, we don’t want to use. We’re not going to use it anywhere on this site so we’re going to delete it.
And when we delete it, we can do one of two things. Remember, on our front page, last week we opened up our header area here and we dragged the front page header off and dropped it up here or the typical header. And that typical header is sitting down here waiting to potentially be used.
Change the Header for all the Templates
Well, what we’re going to do here on our page now is essentially the same thing. We’re going to take the header area, open it up, drag our typical header out and drag it back up here and scroll down to the front page header and drag it up here.
This is not really a good name for the front page header anymore so I’m going to change this name to typical header and I’m going to change this typical header’s name to toss header.
Let’s come back over to our front page template then, the name of that header has been changed so it’s now called typical header although it is the same thing. We just changed its handle, its name. And the one that we’re no longer using is shown as toss header here.
If we go to our home page and open up header area, the toss header is still in place. And in order to fix this template, we need to drag that over, come back down to our typical header, drag it back up and drop it in place. Hit save.
And so now we can come over to our home page and now it’s laid out like this. We can come to our regular page, it’s laid out like that. We can go to our front page, it’s laid out like this. However, if we go to a single page, it’s still broken because we didn’t change this single template.
So if we want to change a single template, we have to come back over here to home or over to single, expand this, drag toss header out, drag typical header in, save the template. Okay, reload it and there it is. So that is how those templates work.
Difference Between the HTML Structure and CSS (Packages) as they Apply to Templates
Now notice that the colors though still say the same and that’s because when you change a template, you’re changing its HTML structure. And that HTML structure just changes on that specific template. However, in CSS, CSS rules apply to all templates. And so when we added that background image to the Body, that added it to the body. This definition affected every Body on the website, every page with the Body would get that definition.
That’s sort of the difference between HTML and CSS is that the CSS defines styles that are applied sitewide whereas HTML gives you the opportunity to change areas individually for individual templates.
“How do I make sure that the right template is being used?”
Now somebody asked the question, “How do I make sure that the right template is being used?” And the answer is you don’t. You don’t make sure the right template is being used. WordPress automatically uses the right template. Most templates, you don’t have control over.
Once you’ve designed the template here, you don’t have control over when it’s used unless you’ve selected a custom template to be used because WordPress, by default, uses the right template for the right job. So unless you want to apply a custom template to something specific, you don’t really have to worry about whether or not the single template’s going to be applied correctly because WordPress automatically does that for you.