WordPress Theme Development Tools

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: XAMPP 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 XAMPP.

If you’re running a Mac, you’ll want to download MAMP. It’s what I use and it does the trick.

Developing on a remote server

If you would prefer to develop on a remote server (such as at HostGator, Blue Host, etc), you’ll need to access your site with an FTP client. For more help with FTP, visit the WordPress Codex page on the subject: http://codex.wordpress.org/FTP_Clients

Don’t have an FTP client? You’ll need to install one. Here are some free possibilities:

After you’ve downloaded and installed an FTP client, you need to connect to your website through it. Refer to your chosen client’s documentation to learn how to do this.

Once connected to your site, you’re ready to install WordPress!

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 XAMPP, follow these instructions for installing WordPress on your local test server.

If you’re using MAMP, follow these instructions for installing WordPress on your local test server.

If you’re using a remote server, follow these instructions for uploading WordPress to a remote host.

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 of 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 with 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.

Add some “real” content, too!

In addition to dummy content, it’s also a good idea to have real content. Actual, live content that’s not just “Lorem Ipsum” or “Little Blind Text” repeated over and over. Grab some of your real content — from your blog if you have one, or from a document on your computer — and create some posts out of them. Less predictable than the standard dummy fare, real content paints a far more accurate picture of how your theme will function in a live environment (for a related read, check out Don’t let Lorem Ipsum decide the fonts used in your WordPress Themes by our own Takashi Irie).

Development Guidelines

If you’re interested in developing with current best practices, the Theme Review Guidelines Codex page is a great place to start.

Essential plugins

You’ll want to grab a copy of the Developer Plugin, brought to you by Code Wranglers at Automattic. Upon activation, it’ll suggest a ton of additional plugins that you can install at the click of a button to help you optimize your WordPress development environment and test your WordPress themes for best coding practices. Check out our brief overview of the Developer Plugin for more information.

The Monster Widget, written by our very own Michael Fields, is another must-have plugin for theme developers. By dragging just one monster widget onto your sidebar, you can test all of the WordPress core widgets in your theme at once!

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 right-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. You’ll also be able to view every single style rule that is affecting that particular element. You can turn style rules off and on to see the effect. You can even add or modify rules and see the changes in real time.

Firefox versions 10 and higher have a built-in web inspector that, like Firebug, also lets you click on an element to view a window with the source code. This web inspector, while useful, does not fully replace the features and power of Firebug.

Safari and Chrome

If Firefox is not your cup of tea, Safari and Google Chrome are worthy alternatives. Both contain built-in development tools similar to Firebug. You can read more about Safari’s web development tools here, and here is documentation about the development tools in Chrome.

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. To get up to speed on HTML 5, take a look at the Element Index from HTML5 Doctor. Reading through these 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 the The ThemeShaper WordPress Theme Tutorial: 2nd Edition that will show you how to create a powerful WordPress Theme from scratch. Read it from the beginning and code yourself up something awesome.

  1. WordPress Theme Tutorial Introduction
  2. Developing Theme Sense
  3. Theme Development Tools
  4. Creating a Theme HTML Structure
  5. Template and Directory Structure
  6. Setting Up Your Theme Functions
  7. Secure Your WordPress Theme
  8. The Header Template
  9. The Index Template
  10. The Single Post, Post Attachment, & 404 Templates
  11. The Comments Template
  12. The Search Template & The Page Template
  13. The Archive Template
  14. The Sidebar Template & The Footer Template
  15. Reset-Rebuild Theme CSS & Define Your Layouts
  16. Custom Background & Custom Header
  17. Distributing Your WordPress Theme

25 thoughts on “WordPress Theme Development Tools

  1. Kate says:

    Yay! Another article in the series! Can’t wait till tomorrow to read the continuation :)
    Thank you, Ian, for taking the time to write about WordPress. I find there’s not much read on it and when I read your posts I get the concept perfectly :) Thank you for that!

    Best regards,
    Kate

  2. Thanks for this. I have xampp set up pretty much how you suggest. The one thing I would like to do, and perhaps you could add this into your tutorial, is install mail.

    I have Mercury installed but not activated. It seems I need to connect to an existing mail server (my ISP)? to test contact forms and autoresponders. Is it possible to have mail set up in this development environment to test forms etc. locally. A stand alone mail service?

  3. Pingback: WordPress Theme Development Tools

  4. Pingback: 1 in 5 of the biggest websites online use WordPress, many not just blogging … | Open Knowledge

  5. Al says:

    looking forward to the rest of the articles in this series, perhaps one thing you could explore as part of the series is to go beyond the standard content-sidebar layout and show us how you would use one of the other layouts available for use.
    I am not sure if it works out of the box or more CSS and functions code needs to added to style and use it appropriately. I have not checked out any other layout than the content-sidebar one.

    Al

  6. Pierre says:

    Wamp and company really sucks. Make you a lovely gift : install VirtualBox on your computer. And use as many virtual Linux servers as you want. With quite the exact configuration of your client or your provider.
    I ask myself how I could work before virtualizing…

  7. Pingback: Ferramentas de desenvolvimento de temas para WordPress | Shipe

  8. I use a Macbook Pro and have installed Xampp, not Mamp. I can’t import any dummy content as suggested as I’m being asked for ftp username etc. Would you have any suggestions?

  9. Pingback: WordPress development tools good list http themeshaper com... « WordPress Pushing the Limits - notes

  10. Brand-new to WP theme-ing, looking forward to mastering this tutorial. Just thought I’d mention a couple of typos on this page that I’d noticed.
    `It’s XAMPP, not XAMP;
    Where you mention CyberDuck, it says “for Mac and Winodows”`
    Anyways, thanks for the great write-up so far, and I’m sure what follows will be just as great!

  11. Hello,

    I’m curious as to why developing on a local server is considered the best way to develop. I develop everything on sub-directories of my personal website. I perceive the benefits of this method to be 1. more experience in the “wild” 2. I can send links to others to show things I’m working on and 3. I can pick up development on any of my computers, w/o needing to transfer files.

    Of course, if the benefits of local server development outweigh these, I’m eager to switch.

    Is privacy one of the benefits of local development? You could restrict file access to certain IPs using htaccess, but I can see that for top-secret projects, local servers can’t be beat.

    Finally, thank you for the excellent tutorial! I’m enjoying reading it.

    • Personally, I’d say that whichever environment you’d like to develop in is fine. With a local server you have the benefit of working offline at any time, but again, it’s up to you and your personal preferences. There are pros and cons to both. I like to start off my development locally because it’s faster, and then move it to a remote server to test it in the “wild” once I’m further along in the process.

  12. We all know that professional look and feel of our themes makes our webiste look different from others, security is always a priority or should be given priority because the themes to which we are dealing compliment our business.

  13. Michaek says:

    Great stuff!
    Thank your for your tipps.
    How exactly and where do you delete the dummy content fastest and completely without destroying your painstaking built theme?

Comments are closed.