WordPress Theme Development – A Quick Walk Through

Given the ridiculously cheap price you can pick up a WordPress theme for, you’d think not many people would bother with WordPress theme development. But alas, it’s quite popular so I’ve decided to write this article to give you a run through of what you need to do should you wish to create a theme for yourself. Now, this isn’t going to be a technical step by step walkthrough by any means, it’s more of a brief overview to explain what’s what in terms of the theme structure whilst providing an insight into the files and folders you need to work with in order to get your theme to function properly.

Premium wordpress themes are all well and good, but not many people want their website to look the same as the next guy. Which is fine. Of course you don’t have to go completely out of the box and create a custom theme from scratch. You can use this run through to simply get an idea on how things work so you can even customise a theme someone else has created to suit your needs.

The Structure

The file structure of a WordPress theme is very easy to understand. Firstly, you need to locate the /wp-content/ folder. Everything you ever upload to WordPress such as themes, plugins and uploads via your site will go somewhere in here. As you may have guessed, the theme files should be stored in /wp-content/themes/. But you can’t just put your files in the /themes directory. You have to make a directory/folder within it. So if your theme is called MyTheme make a directory called MyTheme and place it there so you have /wp-content/themes/MyTheme – This is where you will put the images, stylesheets and php files related to your theme. Once you’ve created this directory you’ll see it show up in your theme selection options in your WordPress panel. You’ll need the files below though or you won’t be able to do anything with it! A blank folder is no good to anyone!

The Screenshot

This is one of my favourite things to create as it really kicks off the whole theme building process in my opinion. If you haven’t guessed, this is the image that shows up on the preview in your WordPress backend. To create one, literally make an image, name it screenshot.png and upload it to your theme folder. So using the above example, upload it to /MyTheme/. If you refresh you’ll then see your theme preview image in your WordPress admin panel but it won’t have any information with it yet, we’ll create that next in…

The CSS File

As you probably know, the css file is where the styles for your theme design will be stored. This is the same case when working in WordPress but it is also used to store important information about the theme itself. A great guide as to what should go in the css file can be found here. In short, it should contain the name ofo the theme, the version and information about the developer. Once you add this information you’ll see it show up in your WordPress admin panel back end.

The WordPress theme stylesheet should always be called style.css but you can import other stylesheet names from it or even call different css files with different naming conventions in the design itself as you usually would.

Header, Footer, Sidebar

These are your fundamental includes. Along with index.php you will need a sidebar.php, header.php and footer.php. These are probably self explanatory and what they contain will depend on your design. But, if you don’t at least have these files present in the theme directory then your theme will not function, at all. If you want custom designs for single posts and single pages you will also need files named single.php and page.php. If you don’t want a custom design these can literally be duplicates of index.php.

Additional Development

Due to the popularity of WordPress you can find tutorials on anything and everything. Whatever you can dream up, whatever you want your theme to do or output you can find a detailed tutorial for it. Someone somewhere will have covered it. Say you wanted to output a list of recently added posts for example, a tutorial like this will explain specifically how to do it to the point where you can literally copy and paste a few lines of code and it will be job done!

So there we have it. I guess you probably thought there was a lot more to it than that. Web developers will probably have you believe that but the reality is that you can get a basic theme up and running in less than a couple of hours with around 20 lines of code – hardly complex!

I hope you’ve found this walk through useful and even if you don’t end up creating your own theme from the ground up I hope you make use of your new found knowledge in the WordPress theme development arena!