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

WordPress Theme 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.

Today, we’ll be discussing how to create the WordPress theme header for your theme and why it’s important to have this file.

As I stated earlier, we’ll be using a HTML template called Cool Blue. This template was created by StyleShout. I have modified the template a bit to better suit this tutorial. You can download the modified version here.

Creating the WordPress Theme Header

Go to your WordPress theme directory. You can find this at www.yoursite.com/wp-content/themes/. Create a new folder called coolblue and in this folder drag and drop all the contents of the coolblue template.

In order for your design to be considered an official WordPress theme, you only have to create 2 files. In your coolblue folder, create 2 files called index.php and style.css. Open up your style.css file and insert the following code.

Save your file and then go to the WordPress dashboard and go to Appearance > Themes. You’ll find all themes available to activate here. You should see your WordPress theme available to activate. Activate this theme and then head on over to your WordPress site. You should see a blank site. If you try to view the source code, you’ll see nothing as well. All WordPress requires is the index.php and style.css files. The index.php is allowed to be empty and the style.css file must have a WordPress theme header.

What is a WordPress theme header?

WordPress needs some information about your theme. The only thing it requires is the theme name. Notice that these headers are actually wrapped in CSS comments. WordPress takes care of reading the files.  By defining this 1 simple line of code, you’ve officially made your first WordPress theme. It’s nothing impressive, but it’s a start.

So, you may be wondering, why create these 2 files? The index.php file will be considered your main template file. You will have many templates files, but just in case you missed one, WordPress will automatically use index.php as the template file for your theme. This file, however, can be empty. WordPress gives you total control of what appears and what doesn’t. The style.css file will contain your headers and any CSS you like. However, we will not be inserting any CSS code into this file. It should only contain the header information. I like to be organized, so I keep my all my CSS files in the CSS folder. The header information must be in the style.css file.

With that being said, let’s update our style.css file to this.

As you can see, you can define more header information. Let’s go over each one.

  • Theme URI – The link to where users can find more information about your theme specifically.
  • Description – A brief and short description about your theme.
  • Version – The current version of this theme.
  • Author – The creator of this theme.
  • Author URI – The link to the creator of this theme.

I pretty much used the same URI for both the theme URI and the author URI. Since this theme is only for this tutorial, then I won’t bother having a different URI for this theme.

Reload the themes page in the dashboard and you should see the information updated to something like this.

WordPress Theme Header
WordPress Theme Header

Is there more header information I can create? Yes! Though, it’s totally up to you. You can just add the theme name if you like. It’s standard to define the name, links and descriptions for any theme.  If you would like more information about file headers, then click here.

Conclusion

We learned the basics of creating a theme. In the next couple of tutorials, we’ll be converting our HTML template into a WordPress theme. The WordPress theme header is very simple to create, but crucial to your theme. Without WordPress theme headers, WordPress won’t recognize your theme and/or you can end up with a broken site.

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