A Beginner’s Guide To WordPress Theme Development

Welcome along to the first of WPShout‘s themed weeks! All this week we’ll be exploring the basics of WordPres theme development. Each day we’ll be exploring a different template file and by the end of the week we’ll have a solid understanding of WordPress theme development and you’ll also be able to download the whole series as a free eBook.

What to look forward to

We’ll be going through the basics of themes, with a different template file each day. The week will be as follows:

• Day 1: Introduction, the fundamentals of WordPress theme development
• Day 2: The index.php and style.css files: the most important parts of any theme.
• Day 3: The header.php, sidebar.php and footer.php files.
• Day 4: The single.php file: the file that handles posts.
• Day 5: The archive.php, home.php and functions.php files and a wrap up of all that has gone on. You will also be able to download the whole series as an eBook.

The admin stuff

Getting started with WordPress theming can be a daunting prospect, and before we start, I’ll say this now; I’m going to assume a good solid understanding of both CSS and HTML. Good places to gain this knowledge are CSS-Tricks and Nettuts+. We are going to go quite quickly in order to rattle through this in a week. If you need any further explanation, then leave a comment and I’ll be happy to help out.

A couple of things to sort out first – you’ll need to get yourself a code editor. If you’re using Windows, the free Notepad++ is an excellent tool to have and if you’re on a Mac then I’m sure there are plenty of great free editors, but the one that everyone raves about is called Coda (and it’s not free). If you’re serious about design then Coda will be worth it in the long term. The only other quick thing we need to do is install WordPress locally. Conveniently I posted how to do this just the other day; follow that tutorial for all the details.

The fundamentals of a WordPress theme

A WordPress theme is made up of a number of different files, and they all contain a seperate section of the page; the header will contain the title and navigation, then the index will contain the main content area (or on a post, the single file does the job). The sidebar, obviously contains the sidebar and the footer contains the footer and closes off the HTML. This all sounds very straightforward, but the important bit is how you can just have a single file, change it once and you will change your whole site. Change your footer and that change will be reflected sitewise, not just on a single page.

Expanding on this, a post page is made up of four files: the header.php file for the header, the single.php file for the post content, the sidebar.php file for the sidebar and the footer.php file for the footer. You can have the same header.php, sidebar.php and footer.php files for the whole site, and so when you make a change, this change comes immediately sitewide.

Throughout this week we’ll be looking at all the different the files that exist in WordPress, but before we do, it is very important you understand how it all fits together, which you should hopefully understand now. Tomorrow we’ll be looking at the two most important files of any theme: the index.php and style.css files. Make sure you’re subscribed to the RSS feed to catch it, and as I said to start off with, any questions, fire away!