The Ultimate WordPress Theme Tutorial (2)

WordPress Theme Development Tools

Posted on  by Ian Stewart

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 allthe 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 isFirefox. 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 throughPHP 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.