As this course progresses we’ll be creating multiple templates. Keep in mind that the index template is just the default template. WordPress uses when there isn’t a suitable template to be found. Our theme should be consistent and so therefore the header footer and sidebar should look the same. Our templates can get pretty big if we just copy and paste our header and footers. It would also be a pain to have to edit each template every time you made a change to the header.
Luckily WordPress provides a solution by providing a couple of functions for including different sections of our template. Let’s create the required files first. First, we have to create a file called header not P P in our themes folder. It’s very important that you give the file this name as this is the name WordPress will search for when trying to include your header from the index template.
Let’s cut everything from the dog tag to the closing header tags and then paste it into the header file. Next, let’s create a photocopy HP file just like before we are forced to name it. This by WordPress from the index template. Cut everything from the bottom of the file to the opening tag of the footer comment. Then paste it into the footer file so this will leave us with the section tag with the ideas of content. All right now all we have to do is include our files at the very top of the index template. Call the function get header this function will look for a file called headed up HP and include it at the very bottom of the file. Call the function get footer just like the header function. This function will look for a file called footer dot HP.
I’m going to format the template so it’s easier to read once that’s done refresh the page and see if everything is working properly. If you see no errors then that means you did everything right. Let’s go over how these functions work. These two functions will look for files named header, not P P, and footer dot P HP within the themes directory respectively. I want you to be aware we’re not completely forced to name our files headed up P2P and footed up.
Let’s say we had a header called header dash V to 2.0 HP and we wanted to use this header for a post template specifically. Well all you have to do is pass in the name V2 and WordPress will then search for a file called header dash v chewed up HP. Don’t worry about free pending the word header or appending the extension dot the HP WordPress takes care of this for you. This way you can have various headers these same rules apply to the get footer function for this course will only have one header and footer so we don’t need to pass in anything to these functions.
All right we’re almost done here. I want to do one thing which is to allow any plugins or WordPress itself to add classes to the body tag. By doing this you can take advantage of knowing which features are active on the site with your CSX. Let’s explore how this is done. The first step is to open the header template and inside the body tag. Call the function body class this function will add an attribute called class and then output some classes.
I have some classes I’d like added which are the no dash transition and stretched classes let’s refresh the page and then let’s use the developer tool to see what’s going on. Right-click and select Inspect anywhere on the page. What you should be viewing is the elements tab. This tab allows you to view the HDMI all of the current pages in real-time meaning if any changes were made inside this template while the user is browsing then the HD PML will update accordingly and vice versa. If you take a look at the body class then you’ll notice that a few classes have been added that weren’t there before WordPress automatically loads these classes for you so you can apply appropriate CSX.
For example, the admin dashboard class should appear if you are logged in. However, if I log out then this class will disappear after logging out. You will see the admin dash bar class disappears. This is really great. As you can apply certain stylings to the page depending on the classes added to the body. I’m going to log back in as I stated from the beginning. I did not make any changes to my template to prepare it for WordPress. So even though these classes are loaded there aren’t any styles in my files that take advantage of these classes using these classes is completely optional even though we aren’t using these functions. There are plugins that do. This is an important point I want to make some features you add aren’t just for WordPress or yourself sometimes you’ll want to add features so plugins can extend how WordPress functions. I’m going to remove the body class function for a moment to refresh the page and you’ll notice our site is a little different from before.
If you take a look at the body tag then you’ll notice some classes still appear. WordPress has a fallback it will use some Javascript code to add some classes but most of the original classes are gone to prove this further. You can right-click and select view page source and you’ll notice the body tag has no classes applied. I’m going to revamp the body class function because of its usefulness. Let’s refresh the page one more time and all the CSF classes we had before should reappear. Just to recap what’s going on.
All we did was split up the index template we put the header and footer into their own respective templates. Then we modified the body tag so WordPress can generate some classes. I’m going to add a link to this function in the resource section of this lecture. We can now begin working on the sidebar.
