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.
For our sample Practice Theme we will be creating 6 files.
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.
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.
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.
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.
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.
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
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>
In the next part we’ll add the contents of the body including the WordPress loop.