Anatomy of a WordPress Theme

posted: category: web-design


Anatomy of a WordPress Theme

Entry 2 The Anatomy of a WordPress Theme

In the first part of my journal, detailing my attempt at creating a WordPress theme, I covered the development tools that I am using to create this theme. Basically, all I am using is XAMPP for creating a local test environment and Eclipse for editing files. Once I got XAMPP setup, I installed the latest release of WordPress. If you are following along with my progress, then you know that I followed the tutorial provided by Six Revisions on how to setup a WordPress installation on XAMPP, including the installation of test data. The test data will give you a variety of posts and pages, so that your WordPress site will already be populated with data. If you have not already done so, be sure to check out the helpful installation tutorial at Six Revisions.

Creating the Theme Directory

Now that setup is complete, it is time to start developing a WordPress theme. Inside the directory where I setup XAMPP, I have my WordPress installation. Under the wp-content/themes/ directory, I created a folder called mytheme. This folder will contain all of the files for the theme that is being created. If you take a look in the wp-content/themes/ directory, you will notice that there are already a couple of themes inside. This is where WordPress stores all of themes you have downloaded to your WordPress installation.

The Core Files of a WordPress Theme

With the directory created, it is time to look over the core files that make up a WordPress theme. Technically, the only files that are absolutely needed to create a WordPress theme are index.php (for the site template) and style.css (for styling the theme). That would be the bare minimum; though, I am going to be created a few more files than that. Here is the list of files that I initially created to start developing my theme:

  • index.php
  • header.php
  • footer.php
  • sidebar.php
  • functions.php
  • style.css

grow your small business

learn more about the creation of a business blog


I started off by creating each of these files inside the mytheme directory. Right now, all of these files are blank, but I will shortly begin adding code to create the template of a website. That is really all we are doing with these files, creating a template that accesses the information inside the WordPress database for the site.

Setting up the Stylesheet

Before I start creating these templates, the first step is setting up the stylesheet. At the very top of style.css, there is some standard information that needs to be provided inside CSS comment brackets. WordPress uses this information for referring to your WordPress theme. It is here that WordPress grabs the theme name, author, version, tags, theme description, and other information. Without this info, WordPress will not recognize your theme. Here is an example of the information that should be placed inside the style.css file:

/*
Theme Name: My Theme
Theme URI: http://examplesite.com/example/
Author: Me
Author URI: http://examplesite.com/ 
Description: Describe your theme. This is a modern theme for WordPress using responsive design.
Version: 1.0
License: GNU General Public License v2 or later (Or you can copyright your work)
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Comma-separated tags that describe your theme
*/

That is just an example of what should be placed at the top of the style.css file. All of this information can be edited later; though, you need something for WordPress to recognize the theme so that you start messing with the template.

Creating the Template Files

With that out of the way, it is time to start creating the template for the WordPress theme. In the next entry, I will explain the starting structure for all of the core files. For now, I will provide the files with the starting structure for the template. This contains the basic information for a WordPress template so that you can start messing with styling and get a basic understanding of how the template grabs information from the MySQL database. Click on these links to view the source code and copy and paste into your created files, or download the zip file containing the actual PHP files.

If you have been following along, you can copy the code from these files, or download them and place them in your theme directory to start browsing at the structure of the template. That is it for now, got to get back to reading more about WordPress themes. Join me next time, as I break down these files and what all that coding means.

comments powered by Disqus

About the Author

Jeff K.

Jeff K.

Jeff is a web designer and graphic artist. In addition to web design, Jeff enjoys other forms of art, including pencil sketching and illustration.

If you are looking for affordable web design services for your business, Cloudy Mouse provides timely personalized service. Our focus is creating great looking responsive website designs for small businesses without breaking their bank.

Take a look at our Web Design Services and discover how we can get your business into the cloud.