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.
* Theme Name: Cool Blue
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.
* Theme Name: Cool Blue
* Theme URI: http://www.jaskokyn.com
* Description: A simple WordPress theme.
* Version: 1.0
* Author: Jasko Koyn
* Author URI: http://www.jaskokyn.com
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.
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.
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.