WordPress Theme Development Tools

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.

  1. WordPress Theme Tutorial Introduction
  2. Theme Development Tools
  3. Creating a Theme HTML Structure
  4. Template and Directory Structure
  5. The Header Template
  6. The Index Template
  7. The Single Post, Post Attachment, & 404 Templates
  8. The Comments Template
  9. The Search Template & The Page Template
  10. The Archive, Author, Category & Tags Template
  11. The Sidebar Template
  12. Reset-Rebuild Theme CSS & Define Your Layouts

83 thoughts on “WordPress Theme Development Tools

  1. Great check list/guide to get started. If your looking to learn PHP then WordPress is a good project to work on as there are loads of tutorials out there and it will give you a real project to workon and so understand what bits of PHP do.

    Keep up the good work ThemeShaper, you rock! :)

  2. Pingback: links for 2009-06-23 | Links | WereWP

  3. Never seen Smultron before, looks pretty nice though. Worth noting that if you enjoy your foray into WordPress theme construction money spent on a really good editor is money well spent. My personal favourite for Mac is Coda for HTML/PHP and CSSEdit for CSS, and for PC, Notepad++ (free!) and I actually use the new Expression Web, stripped of all the rubbish toolbars for my CSS.

      • Michael says:

        Ian, in a post largely about installing MAMP I was surprised to see you are now using Espresso. To the best of my knowledge Espresso doesn’t play nicely (or at all) with MAMP, unlike Coda (and quite possibly a number of other editors).

        What is your workflow?

      • Dave says:

        Great info!

        Can I use WordPressMU/BuddyPress along with your theme? I am trying to build a social network website.

        Reading all your tutorials just did not yet get around to this one.

        Thanks

    • I too was smitten with Smultron, but I always go back to my roots – BBEdit :)

      Great work as ever, Ian!
      thanks

    • I’ll cast a second vote for Coda! Excellent editor, and if you’re not using MAMP, the FTP integration with Transmit is PERFECTION!

      On Windows, Notepad++ is really an essential for replacing good ole notepad. I’m always surprised by developers at work who use Notepad and have never heard of Notepad++. I don’t know how they make it through the day…

      Cheers,
      Byron

  4. Kieran says:

    Do you have any opinions on whether MAMP or the WordPress Bitnami stack (http://bitnami.org/stack/wordpress) is a better option for the local development environment?

    It seems like Bitnami has a very slight advantage of already including WordPress but there may be some usage issues down the road that I’m not aware of.

    • I hadn’t heard of Bitnami but MAMP is going to win when you’re troubleshooting with Google. There are a lot of tutorials, tips, and tricks for it out there.

  5. Enjoying this series, thanks for it. One question – in Mac OS X Leopard you can turn on web sharing and get a local server on your computer with Apache, PHP, and mySQL, correct? I’ve seen recommendations for MAMP before, and always wondered what the benefits to using it are as compared with the built in functionality in the OS. I’ve successfully run WordPress test installations using the OS web sharing on my macbook pro in the past, but always encountered problems when trying to import data, install plug-ins and themes via the WordPress admin, etc. Thoughts?

      • Kyle says:

        Hrmm, didn’t seem to do anything – I get the message essentially instantly after I click UPGRADE AUTOMATICALLY. Do you think the fact that I’ve got it setup as a virtualhost might be the root of the problem or should that work fine? PHP and Apache logs return nothing. Thanks for the quick reply.

  6. Craig Burgess says:

    Ian,
    be sure to check out The Uniform Server, http://www.uniformserver.com/ for Windows OS machines – it blows away XAMP for compactness and ease of use. I was a XAMP fan, but got tired of remembering all the different setup procedures, and the size if of it. This is under 10 mb last time I checked.

  7. I’ve been running a local testing version of WP from a flash drive for some time using MoWeS, which allows you to install WordPress along with your server setup (Apache2, MSQL5, PHP5, PHPMyAdmin) on a portable drive. Works like a charm!

  8. Greg Turner says:

    I stop at this step because I already have tomcat and mysql services running in the background on my PC. I am afraid that any turnkey install like XAMP would mess up what I already have running. If I could find more info about what’s involved in the install of wordpress, then perhaps I could manually install wordpress and integrate it with what I already have running. Any tips in this regard would be helpful. Thanks

  9. Got ‘em all. :)

    On Linux using the Gnome desktop, it comes with gphpedit for a text editor. Has line numbers, syntax highlighting, tabs, – pretty handy.

  10. Pingback: WordPress Theme Development Tools - PSD to HTML - PSD to Wordpress - PSD Conversion

    • In general, you should be able to go to Add and Remove Software and search for what you want. This type of software would be under Servers or something to that effect.

      In Fedora the command under root in the terminal is, “yum install httpd php-mysql mysql-server”. This installs Apache, PHP, PHP/MySQL linker, and MySQL. It shouldn’t be too different in Ubuntu. I know it uses “apt-get” instead of “yum” and it might refer to Apache as “apache2″ instead of “httpd”.

      If none of the above helps, or works, I’d search on a search engine. Then ask in the Ubuntu forums.

  11. Wonderful starting point. I will refer people to this tutorial series. I know you will take your time with the content and produce quality instructions.

    Also, thanks for the links to extra dummy content. I only had the wpcandy content – more is always useful!

  12. I have never heard anyone suggest Smultron before, I’ve been using it for years, but everyone always looks blankly at me when I mention it!

  13. Ian,
    I have used my localhost for some time for installs and changes before upload, so I have a database already. For whatever we are going to do can we just make another database and use it for our class.

    THANKS

    JIM

  14. I am currently working on the design of my blog, so this tutorial has come at the right time for me. This is exactly the kind of post that I need to dig into. I left web design for a very lone period and just starting to refresh the skills back. Thanks a dozens for posting this.

  15. This is great for me. I just started using WordPress and very interested in a personal design for it (I intentionnaly kept the default theme in order to show the evolution for my readers).
    I just have a question regarding the browser. What is your opinion on Safari 4? Do you think it can do the job with the new development fonctions?

    Tanks

  16. Sam says:

    Funny, I was thinking last week, no one ever talks about the mundane stuff like setting up a test environment, or how to move your finished theme from your test server to a production environment. This is the sort of stuff I end up spending hours on. Thanks for exploring the less thrilling aspects of theme development.

    AnandP asked about setting up a test server on ubuntu which is the test environment I use. Not easy to get started with but very productive after the learning curve. A Google search for “ubuntu tasksel lamp-server ” produces a good answer to the “how to” question.

  17. Pingback: WordPress Theme Development Tools | Free Wordpress Themes - CityScape

  18. Pingback: WordPress Theme Development Tools | New WP Themes - WordPress News

  19. Pingback: WordPress 主题开发工具 | 精品博客

  20. Pingback: 10款绝佳wordpress主题开发工具 | 博译论 | 分享网络热门与新知 关注网络应用与营销

    • Also prefering WAMP, really easy to install. Didn’t know Crimson editor, so I can’t compare with Notepad++ I use. Notepad++ includes ANSI/UTF8 conversion tools, really useful when adding i18n content to an ANSI file (e.g. in a WP theme).

  21. Wow great article. I hadn’t heard of XAMP before and it is perfect for working on my blog offline. Nothing like a good test environment to try out some ideas and learn wordpress/php.

  22. marcus says:

    Hi,
    I’m trying to set up Dev/Test and Production Environments for my wordpress website. I want to use the Test environment to try out new plug ins and upgrades before uploading to my production website.
    Can you recommend the best way of doing this?
    I’m using MAMP on my computer for the Test Environment but seem to require a lot of manual processes (ie., adding each plug-in separately)
    Best advice so far is http://www.dountsis.com/php/setup-a-development-environment-for-your-wordpress-site.php
    but i can’t get it working… any other ideas?

    • Well, once you get MAMP and WordPress setup you can add all the plugins through the WordPress admin. No downloading and unzipping required; it handles everything for you.

  23. Forgive my Newbie question, but I got lost at step 4 in the Installing WordPress to MAMP. Where is the MAMP document root? I thought this was saying to create a folder in my sites folder, but when I go to localhost/wordpress, it says “no tables found in database.” I’m stuck.

    Step 4: Downloading and Installing WordPress
    Now it’s time to download WordPress. Once you’ve downloaded and unzipped the WordPress download, open up the “wordpress” folder. Click and drag all of the files from the wordpress folder to your MAMP document root (I use /Users/USERNAME/Sites/wordpress/).

    Lastly, we’ve got to run WordPress’ famous 5-minute install. Visit your local site (localhost:port or localhost:port/wordpress), and enter the following information into the database setup form:

    database name: wordpress
    database host/server: localhost
    database user: root
    database password: root

  24. Pingback: WordPress Theme Development Tools | Weblog Tools Collection

  25. Pingback: WordPress Theme Development Tools | Wp Themes

  26. Awesome totally rocking i am already using Xmapp to tweak my themes locally.Will try how 2 create one using this one … thanks a ton ..

  27. I’m a huge fan of Notepad++ but one thing you need to pay attention to is that with updates, it sometimes saves UTF-8 files with leading Byte Order Mark entities in the file. PHP does not like this and can cause lots of frustration. So make sure that you turn it off.

    If you suspect that you’ve saved one of your theme files with BOM, you can check your files with this tool. For example,

    http://people.w3.org/rishida/utils/bomtester/index.php?filename=http://ashford.turtleinteractive.com/

  28. Gary says:

    I’ve just tried the first of three dummy content generators that I downloaded, out of the four that you’ve listed, and think I’ve run into a problem.

    My development WP system is fully up to date – v2.8.4. But all the content seems to have been output from earlier installations – two at v2.6 and the third possibly from v2.7. Since databases are automatically updated when you do an upgrade, is it not fair to assume that the data structure which is used to do an export might not match today’s version of WP? And that while the files might not cause any problems, they might actually cause major problems, corrupting databases if the importer isn’t smart enough to detect this discrepancy.

    Update – after allowing the importer to sit for five minutes or more (after clicking the [Upload file and import] button) without getting beyond step 1, I cancelled it. Fortunately, it doesn’t seem to have caused any damage. But neither did it check for version compatibility and say that it couldn’t process the file…

  29. I think one thing is not on that list and can be really usefull ,
    That is some virtual machine (even the free microsoft one) to support multiple installations of different versions of IE – e.g. IE5.5 IE6 IE7 etc.. on the same machine. smae could be done with all major browsers for compatibility check

  30. Alistair says:

    Just FYI – Smultron development is officially dead: http://smultron.sourceforge.net/

    His quote:

    First of all I’d like to thank you for your interest in my applications. But I have now come to a point where I don’t have the time to spend on the applications that they deserve so I have decided to not release any more versions for the foreseeable future.

  31. hi Ian thanks for your great tutor. I also heard that there is a dreamweaver addon/extention for creating/modifying WP theme, don’t know is it worth or not to buy it but from your tutor it seems no need to buy that :)

  32. Pingback: WordPress 主题开发工具 at Jolin Stone in Here

Comments are closed.