I have been reading a few articles recently, particularly information on WordPress development. In particular, themes. There appears to be a lot of articles on performing certain tasks and outputting specific data but a seldom few that provide an insight into theme development from the ground up. I know if I were considering creating a theme I’d want a brief, quick run down on the ins and outs and how to go about it. Far too many articles dive right in and if you’re not used to PHP programming, you’ll end up banging your head against the wall. Specific functions are all well and good but if you’re not really sure what you’re getting yourself into then you’re going to become lost – very quickly! During this article I’ll be explaining the basics of the WordPress theme development including the files you need to create and what does what. This should enable you to get started and create a VERY basic theme. From this you can then trawl the web for the various functions that will get your theme performing exactly how you want it to!
This article will not enabled you to build a theme specifically, but will give you an insight into what is needed in order to do so. But once you understand this, there are plenty of articles around the web to assist you. Here is one for displaying recent posts as an example. You’ll literally find thousands of these.
The Theme Directory
This is the location where all of your theme files will be stored. It can be found in /wp-content/themes/ – You will want to create sub directory within :
/wp-content/themes/ in order to store your files e.g. /wp-content/themes/yourtheme/
You will want to name it something memorable incase you end up working with multiple themes later but it isn’t hugely important. It doesn’t need to be the same name as the theme you’re creating, just something unique, memorable and something that you will know is your new custom theme.
Of course it is advisable to use your theme name, well, there is no reason not to. But keep in mind it’s a directory so you will not be able to use spaces etc. All the files you create below will need to be placed in this directory. This is the only directory you will need (for the time being).
The Stylesheet (style.css)
Most people create this file first but truth be told it doesn’t really matter what order you create the files in. This, assuming you’re familiar with CSS will store all of your styles that your theme uses. As well as that it also holds all the information surrounding your theme such as the name, version number, description and developer information.
WordPress automatically looks for style.css and the information contained within it (via comments) in order to display various bits of information about the theme itself in the WordPress control panel. You can find some example headers here – these are the basic ones which you can simply copy and paste into your style.css and modify to suit your theme. You will see all this data output in WordPress when you come to enable your new theme. If you don’t create a style.css you will get a missing stylesheet message.
This is more for the advanced users amongst you but for a very basic theme you really just want to create a dynamic sidebar here. You can find information on creating a dynamic sidebar here – what this will do is allow you to drag and drop widgets into your sidebar from within wordpress. Of course you don’t need to use this method, you can simply create a static navigation but given the simplicity it’s always good to use a dynamic sidebar where possible.
You will also add other functions in this file that you create (or steal) throughout the course of your theme development but the dynamic sidebar is usually the one that most people start off with.
The Loop – Index, Single, Page (.php)
These are your core wordpress files that are used to display all of your pages, posts and the homepage itself. Essentially, you can put the same piece of code on all these pages, what is known as “the loop”. Lots of people like to use different designs for their posts, pages and homepage and these files enable you to do just that.
You can also add things before and after the loop. The single and page loop will only output a single record, the specific page or post itself where as the index will loop through all your posts and output either an excerpt or the full content depending on what you specific. The amount of posts that are output can be set in the WordPress back end itself. You don’t need to limit the post count yourself manually in the code.
Header / Footer (.php)
These files contain your basic web page design, as the names suggest, your header and your footer. These are to be called via the header and footer functions in all of the above pages which output the loop.
This is the sidebar for your blog which will contain either your flat sidebar or the dynamic sidebar function as created above. Some people just leave this blank and put their sidebar code in their footer files but it is good practise to use sidebar.php.
This as the name suggests is a screenshot of your theme which is used to display when selecting which theme to use in your WordPress back end. Lots of people put a logo here for their theme or their company branding. Screenshots unfortunately are a thing of the past but WordPress still uses the screenshot.png naming convention.
So there you have it, the above 5 items are the base files (and directories) you’ll need in order to generate a very basic theme. Once you have the above, you can really start the development process and get into some of those specifics I mentioned earlier!