Create a WordPress Theme - Beginners Guide

So you decided to create a WordPress theme? What’s the simplest way to learn how to create a WordPress theme? The easiest way is to simply dissect the simplest WordPress theme you can find. There are a lot out there. You can start learning with this theme which is aptly named simplest.

But since you’re already here, I suggest you read on.

Components of a WordPress Theme

The components, or ingredients if you will, of a WordPress theme is composed of two files at the very least. There are others but only these two are needed to make a very simple theme. For our sample theme we will need an additional functions.php file.

index.php

style.css
functions.php (optional. needed to register the widgets)

Index.php

Index.php contains the PHP and HTML codes that make up the structure of the WordPress theme.

Style.css

Style.css contains the CSS codes that adds style to the structure.

Functions.php

Functions.php contains additional php codes if there are any.

Designing the Theme

The first step in creating a WordPress theme is to design how the planned theme will look like. Since were going to create a simple theme for our first try, we should plan a simple design with a fixed layout (save the responsive layout and the headaches that come with it for later).

A blogging style theme with a single sidebar to the right is a good start.

Header | Menu | Content | Sidebar | Footer

WordPress theme design layout

Index.php

Lets continue with the contents of the index.php. The first code to go in:

<!DOCTYPE html>
<html <?php language_attributes(); ?>>

<head>
 <meta charset="<?php bloginfo( 'charset' ); ?>" />
 <title><?php bloginfo( 'name' ); ?><?php wp_title( '-' ); ?></title>
 <link rel="stylesheet" href="<?php echo get_stylesheet_uri(); ?>" media="screen" />
 <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
 <?php if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); ?>

 <?php wp_head(); ?>
</head>

Always make sure to add <?php wp_head(); ?> just before the closing </head> a lot of plugins will need to use that hook to modify the contents of the <head>

In the next part we’ll add the contents of the body including the WordPress loop.