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 few options:
- The Theme Development Checklist test data
- The Sandbox Dummy Content (direct download link)
- WPCandy Sample Content
- Self Conclusion’s Test Data
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 Smultron. It’s free, open-source, and—when you move to editing online WordPress Themes over FTP—works well with the popular FTP Client Cyberduck.
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
63 Comments
thnx, great & simple
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!
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.
Absolutely. I just started using Espresso, myself. Though I still use Smultron for it’s advanced Find and Replace. It’s a really powerful text editor.
Oh yes – Espresso is very nice too (but only works with 10.5+) – there are some helpful video tuts from Derek Renolds here: http://www.vimeo.com/derekr
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?
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
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.
I was expecting something a tad meatier actually.
My excitement is building up!!
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?
Basically Mamp gives you a super-handy interface for interacting with everything—all in one place—via a preference pane and start page.
Is it possible to do plugin/wordpress upgrades through MAMP? I always run into something like this:
Just wondering if it’s a MAMP limitation (upgrades work fine online), or something else I can look at.
Absolutely. You probably just need to upgrade your memory in MAMP. It’s in the PHP ini file.
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.
It could be the virtualhost setup.
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.
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!
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
If it works like MAMP it shouldn’t be a problem—but a check at the forum would probably be worthwhile.
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.
hi
Am running ubuntu, how do i do a local install of apache etc.
thanks
keep up the amazing work
ciao
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.
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!
This is exactly what I was looking for. Many thanks.
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!
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
You can keep on using that existing database if you like or go ahead and make another one.
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.
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
I haven’t fooled around much with the inspector in Safari but if you’re more comfortable using it, I’d go ahead.
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.
I prefer WAMP on Windows over XAMP and I use Crimson Editor.
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).
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.
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.
Thank you so much. Just what I needed.
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
Excellent Resource for a NewBie like me. Thanks a Lot
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 ..
Very nice and neatly written. Very good for a newbie to start off. Keep the good work up guys.
Regards,
Sam.
Please notice also that since yesterday, there is an additionnal tool for CSS with WP-LESS. I’ll roll out an update to make it embeddable by theme developpers.
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/
Very good resource. I’ve had many problems setting up PHP on Vista and most recently Windows 7, until I found XAMMP.
Thank You Much,
Very kind of you..
nice tips, great and simple
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…
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
Very Very Interesting Article. Thanks for helpful information.
Very Useful information for Web Developers. Nice sharing Informative blog.
Nice info, I am using easyphp as it is light. can you provide a ebook on wp theme editing ?
Just FYI – Smultron development is officially dead: http://smultron.sourceforge.net/
His quote:
One of the best tutorials on WordPress theme development on the Internet.
Thanks a lot.
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
awesome tools on word press themes.
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!
God Bless you for writing such a beautiful article. Just following the steps. Hope to make my own theme one day .
I’ve found Espresso working great with MAMP but right now I’m using Textmate.
11 Trackbacks
[...] WordPress Theme Development Tools A few days ago, I told you about Ian Stewart's initiative to renew WPDesigner's Wordpress theme tutorials, and teach us how to create a WordPress theme from scratch. Well, here is the first tutorial, it covers all you need before to actually start working on the theme. (tags: WordPress theme tutorial) Leave a Reply Click here to cancel reply. [...]
[...] Read the original here: WordPress Theme Development Tools [...]
[...] View original post here: WordPress Theme Development Tools [...]
[...] WordPress Theme Development Tools Share and [...]
[...] 原文：WordPress Theme Development Tools [...]
[...] partly via:themeshaper [...]
[...] WordPress Theme Development Tools.: ThemeShaper puts together a list of many of the ingredients required to develop your own WordPress themes including the test content that helps to test the demo the functionality of WordPress themes and tutorials to help beginners get started. The inclusion of useful development tools such as Firefox extensions and even links to free text editors are appreciated. The one inclusion that I would have expected from the blog of a theme framework developer would have been a list of theme frameworks that a beginner could get started with. (No Ratings Yet) Loading … Visited 20 times, 20 so far today [...]
[...] WordPress Theme Development Tools.: ThemeShaper puts together a list of many of the ingredients required to develop your own WordPress themes including the test content that helps to test the demo the functionality of WordPress themes and tutorials to help beginners get started. The inclusion of useful development tools such as Firefox extensions and even links to free text editors are appreciated. The one inclusion that I would have expected from the blog of a theme framework developer would have been a list of theme frameworks that a beginner could get started with. Click here to cancel reply. Name [...]
[...] 原文：WordPress Theme Development Tools [...]
[...] Theme Development Tools [...]
[...] Theme Development Tools [...]