I wanna be a theme designer: Theme setup

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.

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.

Just one thought about theme naming though. There have been a couple of cases where themes with the same name as those found in wordpress.org/themes were overwritten on an auto-update.

With so many themes around, two with the same basic name is very possible. So I’m not sure leaving out your site or core name is the best approach as this is a way of distinguishing your super-mario from another!

By submitting a comment here you grant this site a perpetual license to reproduce your words and name/Web site in attribution.

Please use your real name or a pseudonym (i.e., pen name, alias, nom de plume) when commenting. If you add your site name, company name, or something completely random, I'll likely change it to whatever I want.