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.
WordPress
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.
Dummy Content
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 Windows, you can try Notepad++. It’s free and open-source, and comes recommended by Lifehacker.
For the Mac, I recommend Text Wrangler.
Firefox
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.
PHP
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
ThemeShaper 
83 responses
Nice tools, thanks sharing with this informative post.
i am trying out my best.great article about creating WP theme .i am using wordpress for creating my site.i use others wp theme .but i am going to create my own WP theme following those article and tools .
Very well done tutorial. Now I finally have a testing server installed on my computer – it’s exciting! Looking forward to continuing…
This is damn comprehensive! Thanks, you rock!
[…] Theme Development Tools […]
God Bless you for writing such a beautiful article. Just following the steps. Hope to make my own theme one day . 🙂
[…] Theme Development Tools […]
Very Nice tutorials for Web Developers.
I am known to all web desaigning language except PHP. So is it necessary to make a Word press theme
This installation worked fine for me and I was able to get into my WordPress local install using Safari without a problem. However I am having trouble using Firefox. I’m able to view the administrator’s page in Firefox but when I select “view site” I get the following error message:
The page isn’t redirecting properly
Firefox has detected that the server is redirecting the request for this address in a way that will never complete.
• This problem can sometimes be caused by disabled or refusing to accept cookies.
I do have cookies enabled. I did not have them enabled when I set up the local host via MAMP though. And I used Safari to set it up. However I do wish to use Firefox as per your suggestion but I’m baffled as to why I cannot “visit site”.
Any ideas or suggestions?
Hi Steve.
I worked out the solution to my problem, which was exactly the same as yours.
Under “Settings, General” the URL of my site was http://localhost:80/wordpress/
This was fine for Safari. But Firefox needed this to be changed to http://localhost/wordpress/.
Now it works in both.
Hope this helps
Dan
yet that is!!!
[…] system, something I wasn’t comfortable with when I started, I decided to use this tutorial to wholesale copy a basic framework. I then started editing the layout, styles, graphics, […]
The Sandbox Dummy Content (direct download link) is broken
my perfect web development platform:
Ubuntu Linux, Zend Server, MySQL, MySQL Workbench (i work with it in any mysql server i admin, i use vps hosting only), Eclipse PDT + Aptana with plugins for jQuery, Dojo, SVN, GIT and others, Gimp for image editing (99% of what you do in Photoshop can be done in Gimp, including working with recent PSDs, photoshop brushes), Inkscape for some svg design, Agave to have nice color schemes, Firefox with Firebug and firebug extensions (i have a drupal extension for firebug that helps a lot).
as i think most WordPress developers work in Windows environment and most Drupal developers work in LINUX, as a pro developer you can understand why Drupal is so organized, with many rules in development and WordPress is so chaotic… that’s why Drupal is more extensible and powerfull but it is much more dificult to be administrated by a beginner or intermediate user, because pro developers don’t care so much about beginners, where WordPress i think is a wonder for most of them (try to compare Drupal API documentation and Drupal Documentation – it’s separate, organized as a book and similar to PHP.net documentation hierarchy – and WordPress codex just not so well organized). I hope someday this changes ’cause i like to use WordPress for blogging (the purpose WordPress is builted for).
[…] list my tools of choice below, but definitely check out these posts on ThemeShaper by Ian Stewart and on WPTuts+ by Tom McFarlin that go into far more detail on WordPress-specific development […]