WordPress Theming 101: Creating and Customizing Themes

OK, so you were told that WordPress would be great for your website. You did your research, followed the famous five-minute installation instructions, and got a site spun up pretty darn fast.

The problem is that you’re not in love with the way the default Twenty Nineteen theme looks. I mean, it’s pretty, but not right for your website. You want something else, but perhaps you’re not quite sure where to start customizing things. You were able to get WordPress installed and you’ve run a website before, but everything feel foreign now.

Welcome to the wonderful world of WordPress themes! Every WordPress site has at least one theme and it is what controls the overall look and feel of your website. There are plenty of ways to customize themes but perhaps you’re a little stuck on where to start.

That’s what we’re looking at in this post, so hold tight. Let’s take a journey through the ins and outs of WordPress themes and how you can customize them to suit your needs.

The basic anatomy of a WordPress theme

First things first: every WordPress site needs a theme. It’s what someone sees when they look at your site. If you can imagine WordPress as the back layer of your website that contains data and content, the theme is the slab of make-up on top that designs and lays out that information.

Themes live in the wp-content directory of your WordPress installation in a folder called, creatively, themes.

/wp-content
├── /plugins
├── /themes
│   ├── twentynineteen
│   ├── your-custom-theme
│   └── /uploads
└── /uploads

Now you know where a theme lives but what does a theme need? It’s not like theme folders can sit empty, right? This is where we need to provide the theme files, including files for the templates and styles for the design.

At the very least, a WordPress theme needs to have a style.css file and an index.php

  • index.php – The default template for your site.
  • style.css – A CSS file that contains the styles for your site. It also includes a block

Building off of our file tree, that looks like this:

/wp-content
├── /plugins
├── /themes
│   ├── twentynineteen
│   ├── your-custom-theme
│   │	  ├── index.php
│   │	  └── style.css
│   └── /uploads
└── /uploads

Templates? Styles? If you’re starting to gloss over, that’s because these terms may be new to you. That’s ok! They’re the crux of what makes a theme.

A template is the structure of the view. If you were to put a blank index.php file in your theme folder, then you would see nothing on the screen when visiting your site. That’s because there’s no content in there to look at.

All pages and posts on your site go through a template. If all you have is the index.php file, then they would all go through the template. If you have page.php and post.php files in your folder, then all pages and posts would go through those templates, respectively. There’s actually a bunch of possible templates you can include, from one-off pages to specific post categories and everything in between. The WordPress Theme Handbook has a thorough outline of them all.

Styles take the content in a template file and design to like a layer of paint on top of everything. Your style.css file can contain all of CSS for those styles.

/* Styling for posts */
.post-content {
  background: black;
  color: white;
}

It’s important to know these two files because they are the foundation for everything else. In fact, you’ll see them ff you open up the Twenty Nineteen theme or any other theme you install.

Building a WordPress theme from scratch

Well, you’re already sort of a pro at this. You know there needs to be two files in there and that they control the look and feel of the site.

What you may not know is that the style.css file contains key information that WordPress uses to recognize your theme. You’ll see something like this at the top of any WordPress style.css file:

/* Theme Name: My Custom Theme
  Theme URI: https://your-theme-website
  Author: Your Name
  Author URI: https://your-personal-website
  Description: A sentence or two about your theme.
  Version: 1.0
  License: GNU General Public License
*/

Not everything there is required, and there’s more you could include there. But this should give you an idea of what’s needed. The important thing is to include the theme name and a description. These will be what you see when navigating to AppearanceThemes when logging into the WordPress admin.

Creating your own theme is the most amount of work when it comes to creating a WordPress site. In some cases, you might even want to start with an existing theme and change the code and styles in those files to create your own custom theme. You’ll find that you get more familiar with the components of a theme as you open up files and make changes. At some point, you’ll be able to graduate to starting with a completely empty theme folder and make your own files.

Until then, here are a few good WordPress themes that serve as good starting points for creating your own theme.

And, hey, you can totally use Twenty Nineteen as a start theme if you’d like! And any WordPress theme for that matter. However, it might be better to build a child theme instead, which is what we’ll cover next.

Creating a WordPress child theme

A child theme is a way to customize an existing WordPress theme without touching the code of that theme. To create a child theme, you would create a new folder in the themes directory with the same name as the theme you are modifying, but with -child appended to the end.

For example, to create a child theme using Twenty Nineteen as the parent:

/wp-content
├── /plugins
├── /themes
│   ├── twentynineteen
│   └── twentynineteen-child
└── /uploads

To override any file of the parent theme, create a copy of the file and drop it in the child directory. So, to create a custom template for pages, you would create a copy of the page.php file, put in the child theme folder, and make changes to the code in the file. WordPress will know to use the child’s version of the file instead of the parent’s version as long as your child theme is selected as the active theme in the WordPress dashboard.

/wp-content
├── /plugins
├── /themes
│   ├── twentynineteen
│   │   └── page.php
│   ├── twentynineteen-child
│   │   └── page.php
│   └── /uploads
└── /uploads

The page.php file in the child theme folder above is the version that will be used.

And, yes, a child theme does require a style.css file just like any other theme. It also needs to include that block of content at the top of the file, but only two items are really required:

/*
 Theme Name:   Twenty Nineteen Child
 Template:     twentynineteen
*/

Now we need to link it up to the parent theme. We call this enqueing styles and it can be done in the child theme’s functions.php file:

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

You’re probably wondering what the heck a functions.php file is because we haven’t brought it up yet! It’s a file where you can keep PHP functions that affect the functionality of the theme. In this case, the functionality is telling the theme to load both the parent and child style.css files.

There’s still one other way to customize WordPress themes. It’s a little less common, but still something you may see now and then.

Overriding template directly in the theme

Some themes (and even plugins) let you override templates directly from the theme folder. It’s like creating a child theme without having to go through the child theme steps.

A good example of this is The Events Calendar, our plugin that adds a calendar to a WordPress site. You can override any template for The Events Calendar by adding your own version of it to a folder in the theme. In the case of The Events Calendar, that folder is called tribe-events. You create a tribe-events folder in your theme to override the main calendar styles. Then drop a tribe-styles.css file in there that contains your custom styles. The plugin is smart enough to know to use those styles in place of (or in additional to) the ones the plugin comes with by default.

This is a less common way of customizing themes. So less common that we’re using a plugin as an example. While some these do indeed provide this layer of customization, you might be better served using one of the other two methods. You’ll see this technique used a lot more in plugins than themes.

Using the Theme Customizer

We’d be remiss to leave out the most obvious, but perhaps most overlooked, way to customize WordPress themes: the WordPress Customizer. This is the screen in the WordPress admin that is located at AppearanceCustomize. The reason it’s often overlooked is because it’s largely up to the theme creator to integrate it. The Theme Customizer is a place where you can change settings for a theme, such as primary and second colors, the site name and description, and other common appearance options. The more a theme creator integrates it in the theme, the better, because it has the potential to be a one-stop shop to modify the look and feel of a site. But again, that depends on whether the theme you’re using makes extensive use of it.

Wrapping up

Whew, we covered a lot of ground in a little amount of space! Hopefully this guide gives you a better idea of what goes into a WordPress theme and how to create your own—whether that’s building one from scratch, or using existing themes as the foundation for yours.

That’s one of the beautiful things about WordPress. It gives us this clean separation between functionality and appearance so that we can make changes without altering any of core WordPress code. We have plenty of ways to extend WordPress and each way allows us different levels of control depending on how much we need to do.