Monday , 20 November 2017
Home / Programming / WordPress / Themes / WordPress Template Header – WordPress Theme Tutorial
WordPress Template Header
WordPress Template Header

WordPress Template Header – WordPress Theme Tutorial

This tutorial is a part of the WordPress Theme tutorial series. If you would like to see the whole series and the order in which you should follow them, then click here.

Right now, we’ve got a blank template.  Let’s copy our code from the index.html file and paste it all into the index.php file. If you refresh your site, then you should see the site. You’ll notice that it’s broken and that’s OK. We’ll fix it in a bit. If you’ve ever created a website before, then you know it’s more efficient to separate your code into different files. Your header won’t most likely change. It’s your content that will. With that being said, WordPress provides a helpful function for our WordPress template header.

Creating the WordPress Template header

Don’t get this confused between the WordPress theme header and the WordPress template header. The theme header provides information about our theme. The proper name is actually file header. The template header contains the actual code of our design’s header like the logo, menu, and anything else placed at the top.

Create a new file called header.php. When creating the WordPress template header, you should consider how much of the code you would like appearing on all pages. In our case we want to copy all the code from line 1 to  the div tag with the content-wrap id. Cut and paste that code into the header.php file. Here’s the code just in case you missed it.

Now, how do you tell WordPress that this file will be our header? We can use the include or require functions, but there’s actually a better one. In your index.php file, replace the code we just coped with this.

The get_header() function is a function provided by WordPress. This function will automatically look for a file named header.php in your theme. So, what’s the difference? If we were to use include or require then we would have to define the path to the WordPress themes. Now, this doesn’t seem so hard, after all the WordPress themes are stored in wp-content/themes right? Not necessarily correct. Users are given the option to actually change the name of the folders and mix them around for their own custom feel.

The get_header() function will automatically detect any changes and grab the header.php file for you from your theme. If you have multiple WordPress template header files, you can use the get_header() function to grab any special headers. For example, let’s say you had different headers for a single blog post and a page. You can pass in the name of your WordPress template header to the get_header() function like this.

You must, however, name your WordPress template header files like so: header-single-post.php & header-page.php. WordPress will automatically prepend the phrase header- and append the .php extension for you. You just have to define the name.  If you leave this blank, WordPress will just assume you mean header.php.

Conclusion

By creating WordPress template header files, we’re actually making our site more efficient and our jobs much easier. We’ll be seeing less code and be able to find what we’re looking for much quicker. You’ll see the code downsize a lot as we along. More information about the get_header() function can be found here. Next, we’ll take care of the footer which is a fairly similar process to the WordPress template header. Download the files below if you need help.

About Jasko Koyn

Check Also

WordPress Theme Menu Support

WordPress Theme Menu Support

Having a dynamic theme is important. It allows the user to customize  your theme to …

Leave a Reply

Your email address will not be published. Required fields are marked *

ULTIMATE WORDPRESS DEVELOPMENT COURSE
Want to learn how to create your own custom WordPress plugins and themes? Check out my course!
Get 93% off my course. You'll also learn how to integrate WooCommerce and BuddyPress into your projects. This is a limited time offer
Yes, I would like to get 93% off your course!
No Thanks!
close-link