You’ll no doubt find that as the tutorials start rolling out here on WPConvent that I’ll tend to skip the basics. With that in mind, I’m documenting the bare bone basics of theme development in this post so I can refer to it, should I need to at a future data. Seasoned WordPress designers and developers who frequent this blog will no doubt scoff at the extremely basic nature of what I am discussing, but we were all there once.
Once thing I found when getting started with WordPress development is that there were a lot of tutorials out there for specific tasks but not really a good, solid all rounder for getting started day one. Sure, if you wanted to output your recent posts in your sidebar – you could quickly find the code to do it and a tutorial telling you how and where to place it. But how do you get the sidebar to function to begin with and what files do you actually need in order to get a theme up and running.
That is what I am hoping this article will address. So let’s get started.
This is the first file I start off with in any WordPress development project. It doesn’t do anything other than provide you with a nice fancy screenshot or logo image in the WordPress back end but it’s nice to make a theme folder and drop this in there. I see it as stamping your flag and initiating the build of the theme.
Self explanatory but this is the header file. It is where you’ll put all of the calls to stylesheets and so on along with the title of your blog and any meta descriptions you might want. All of the common page headings should go in your header.php file. The header.php file should be called in each of the index.php, single.php and page.php files.
This is the common file for the sidebar and like with the header and footer it is included in all of the main pages. You have essentially two options for how you want your sidebar to perform. You can create a function to make it “widgetized” which means you’ll be able to drag and drop elements into it via your widgets panel in WP or you can make it flat which means all the various output functions for recent posts, categories and articles etc are written directly into the sidebar itself.
index.php, single.php, page.php
I’ve put these three files together as they’re all essentially the same thing initially. They all contain “the loop” which actually outputs a list of posts, a specific post or a specific page. Whatever you define the content as via WP will determine which of these files are used. So if you want your homepage, single post and page outputs to look different you’d use these files to customize them.
All three are required files and should be created at the start. Most people just copy the loop code into index.php and then create duplicates of the file for single.php and page.php. This is enough to get started.
All of your themes styles will go in here. Or you can call an additional stylesheet in your header.php file if needed. But style.css must be present for the theme to function. In this file you can also declare a header which contains information about the theme such as the name, description, author info and release info. This is where the text you see associated with the theme via the WordPress back end is pulled from.
As the name suggests, this is where all of your functions go. This file can be blank if you have no functions but it is a required file. So make it anyway. The first function that usually goes in here is the one mentioned above for the widgetized sidebar but if you’re just getting started with development then you probably don’t need to do this day one.
The files above are enough to get a theme “working” but obviously each will need to be populated with the actual code to output the data. Then of course you’ll need actual page / post data to output and widgets to populate your sidebar etc. But in terms of getting started with a theme. The above files are all you really need.