Are you ready to get started on the path to becoming a theme designer?

Good. I’ll assume you’ve already read through the introduction post of this series and prepared yourself. If not, go ahead and do that now.

In this tutorial, you will learn how to create your first WordPress theme.

Naming your theme

I’ll assume you’re already thinking up some crafty names for your first theme. The one thing you might not have thought of is that there are some rules for naming WordPress themes. Technically, you can name your theme anything. However, if you want to have it hosted on the WordPress theme repository, you’ll need to follow its guidelines on naming.

In short, don’t put these things in your theme name:

• The term “WordPress”.
• The term “Theme”.
• Version-specific or markup-related terms.
• Your name or site name.

Basically, don’t put things that are irrelevant to the actual theme. Be creative. Come up with something fun that represents your theme.

Throughout this series, we’ll be building a theme from start to finish. The name of the theme will be Super Mario. Why? Well, it’s just cool. And, we have to name it something.

Creating a theme folder

Before diving into any files or code, you need to have a theme folder. All theme files are kept within a single folder, so your theme will need one.

Since the name of the theme is “Super Mario,” the theme folder name should be super-mario.

As a sidenote, any theme folders or filenames you create should contain all lowercase letters and use hyphens if it has multiple words. This is the general standard used in WordPress file/folder naming.

Your theme folder should be placed within your wp-content/themes directory. The directory structure should be set up like the following.

• wp-content
  • themes
    • super-mario

Or, if you prefer, take a look at how this is set up in the following screenshot.

The style.css file

All WordPress themes require at least two files to work. The first of these files is style.css. This is the most important file because it houses your theme information.

So, the next step you should take is to create a new file called style.css with your preferred text editor. This file should be saved within your super-mario theme folder.

Using your text editor, type the below code into your style.css file.

/**
 * Theme Name: Super Mario
 * Theme URI: http://devpress.com
 * Description: An example theme description.
 * Author: Your Name
 * Author URI: http://devpress.com
 * Version: 0.1
 * Tags: threaded-comments, translation-ready, two-columns, fixed-width
 * License: GNU General Public License v2.0
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 */

This information is called the Theme File Header. Each new line in the file header is called a “header” and represents a distinct key/value pair.

• Theme Name: This is the name of your theme. Remember the rules you learned earlier on properly naming your theme.
• Theme URI: This is the URI to your theme’s page. If submitting your theme to the WordPress theme repository, make sure to follow the guidelines on credit links.
• Description: The description of your theme. Simple enough. Don’t write a novel here. Keep it short and descriptive.
• Author: Your name.
• Author URI: This should be a link to your personal or WordPress site. Again, make sure to follow the theme review guidelines on credit links if submitting to the repo.
• Tags: These are a way to label what features your theme has. WordPress.org has a standard set of allowed tags you can use.
• License: What license your theme is under. This is not currently a standard in WordPress but is required for repository-hosted themes.
• License URI: A link to a page where your theme’s license can be read in full.

Once you’ve gotten all of your theme information added, you can save your style.css file. You won’t need it for the remainder of this tutorial. Most likely, you’ll edit your theme info later as you figure out the features your theme will have.

The index.php template

I won’t cover templates in detail just yet. You’ll learn about them in another tutorial. However, you do need one template to have a real WordPress theme: index.php. This is the second required file for a WordPress theme to work.

Open your text editor and create a new file called index.php. Save this file in your super-mario folder. Don’t type anything in this file just yet. You’ll learn what to do with it later. For now, you’re done.

Congratulations!

You’ve just created your first WordPress theme! Of course, your theme doesn’t actually do anything yet. It doesn’t show blog posts, have nav menus, or display widgets. You’ve still got a long journey ahead of you.

Now, pat yourself on the back and relax. There’s lots more to come in the next tutorial.

Downloads

In each tutorial of this series that has code, I’ll provide a download link to the day’s lesson in theme form. This will be a a zipped theme folder with the current, combined code of the theme you’re learning to build.

So, go ahead and download a copy of today’s version of the theme.