Update: We’ve created a second edition of this article, with updated code samples and coverage of the latest theme development techniques. Check it out at WordPress Theme Development Tools. It’s part of The ThemeShaper WordPress Theme Tutorial: 2nd Edition.
Before we get started building any WordPress Theme we’re going to need to get our development tools in place. In this post, we’ll run through the best of the best and build ourselves a cross-platform WordPress Theme test environment that would do a professional Theme developer proud.
A Local Test Server: XAMP or MAMP
The best place to develop your custom WordPress Theme is off the web, on your home computer. To do that though you’ll need to turn your computer into a “local server”, essentially approximating the program suite on a regular web server (Apache, MySQL and PHP). This means you can install WordPress on your home computer.
Installing these separate server programs can be technically challenging but luckily for us there are a couple of free programs that will install and manage all this for us.
If you’re on a Windows computer you’ll want to try out XAMP.
If you’re running a Mac you’ll want to download MAMP. It’s what I use and it does the trick.
Of course, we’ll need to download the latest version of WordPress and get it correctly installed on your local test server.
If you’re using XAMP follow these instruction for installing WordPress on your local test server.
If you’re using MAMP follow these instructions for installing WordPress on your local test server.
Your WordPress installation is going to need some sample, or dummy, content. Something to theme. In your WordPress admin navigate to
Tools > Import and choose WordPress from the list of options. Now we only need a WXR post data file to import.
There are a couple options:
Each of these test data sets has their pluses and minuses. One thing I like to do is import all the dummy content I can. Everything. That way nothing gets missed. When you think you’re done your theme, use the post navigation to browse through each post. Check out the archives for the month and year and category. With robust dummy content it’ll be easy to see if something’s amiss.
A Text Editor
You won’t need any special graphics software for creating WordPress Themes just a plain old text editor. But some are better than others, of course.
For the Mac, I recommend Text Wrangler.
Of course, you can use any browser for web development but the one I recommend is Firefox. Especially with the following 2 add-ons that will make your life a whole lot easier when it comes to developing with WordPress.
The Web Developer Add-on for Firefox adds a toolbar that gives you a whole host of options for inspecting and debugging your code, from disabling all CSS styles to validating local HTML (that’s the stuff happening on the browser screen of your test server).
The Firebug Add-on for Firefox is indispensable. With Firebug enabled you can click on any element in your browser window and see—in a window at the bottom of the screen—how it looks in the source code and how it’s being affected by CSS.
HTML and CSS
I won’t lie, a passing familiarity with basic HTML and CSS will help you out. I recommend reading through the HTML Dog HTML Beginner Tutorial and the HTML Dog CSS Beginner Tutorial . Reading through these two tutorials is completely optional but it won’t hurt and will help you grasp some basic concepts.
But what about PHP? Don’t you need to know PHP to create a WordPress Theme? Well, yes, you do. But I’ll be teaching you enough to be dangerous with a WordPress Theme as we go along. If you want to be a keener—always recommended—you can start reading through PHP 101: PHP for the Absolute Beginner. Again, completely optional. You’ll only need to pick up the basic concepts really.
How To Create a WordPress Theme
This post is part of a WordPress Themes Tutorial that will show you how to create a powerful WordPress Theme from scratch. Read it from the beginning and code yourself up something awesome.
- WordPress Theme Tutorial Introduction
- Theme Development Tools
- Creating a Theme HTML Structure
- Template and Directory Structure
- The Header Template
- The Index Template
- The Single Post, Post Attachment, & 404 Templates
- The Comments Template
- The Search Template & The Page Template
- The Archive, Author, Category & Tags Template
- The Sidebar Template
- Reset-Rebuild Theme CSS & Define Your Layouts