I am tired...

Create a WordPress Theme – Beginner’s Guide

Updated on October 2013 to reflect changes in WordPress theme standards.

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, let this tutorial be of help.

At the end of this tutorial, a finished product of our theme is available, complete with comments explaining the codes that are used.

Components of a WordPress Theme

The components of a WordPress theme is composed of three files at the very least. There are others but only these three are actually needed to make a very simple theme.

  • index.php
  • style.css
  • functions.php

For our sample Practice Theme we will be creating 6 files.

style.css
This file contains the CSS codes that adds style to our html structure. The style.css is also important because it holds basic information about the theme. It is where the theme’s Name, Author, Description, Version, Filter Tags and License are declared.

index.php
This file contains html and php codes that make up the structure of the WordPress theme. This is the main template file. It acts as the fallback template when other templates are not available. This is where the important WordPress loop is usually added.

header.php
The header.php contains important elements that are found on most websites. Stuff like the document type, language attribute, charset, website title, various links and metas and more. On most themes, it also contains the theme’s “header” and “main menu”. This file must contain the wp_head() action hook as that is used for WordPress functions and plugins. This file is called by the index.php and other templates by using the get_header() function.

footer.php
This file contains the footer part of your theme. It could contain links, theme info and sometimes footer widgets. This file is called by the index.php and other templates by using the get_footer() function.

comments.php
This file contains the comments section. It outputs the comment form and individual comments. This file is called by adding comments_template() on templates that usually display single posts or pages.

functions.php
This file contains your theme’s custom functionality. This is where you add various functions like registering menus, registering dynamic sidebars and enqueuing styles and scripts.

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. You can add responsive properties later on and easily too if your layout is simple enough.

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

Header | Menu | Content | Sidebar | Footer

WordPress theme design layout

Header.php

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

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

<head>
 <meta charset="<?php bloginfo( 'charset' ); ?>" />
 <title><?php wp_title( '|', true, 'right' ); ?></title>
 <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />

 <?php wp_head(); ?>
</head>
Always make sure to add wp_head(); just before the closing </head>. That action hook is needed to add and modify the contents of the header.php.

 

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

Create a WordPress Theme Part 2

Share This Post :

4 Comments

Add a Comment
  1. This is great, I’m going to get started on one ASAP!
    Thanks,

    Ian

Leave a Reply

Please write your comments in english. I delete anything that even remotely resembles spam.

Note: When posting code, enclose it in pre and code tags.
e.g. <pre><code> Add code here </code></pre>

ronangelo © 2012 - 2014 Frontier Theme
css.php