Feature
Post

Category
Design


Testing WordPress themes locally

I used to design WordPress themes “the hard way”- creating them on my computer as regular sites, converting them to WordPress template files, and uploading these via FTP. Then it was usually fingers crossed as I went into the Appearance tab of WordPress, activating it and hoping everything went well.

Then I learned how to install WordPress locally (on my computer), and wow. The only thing I wondered was why I didn’t do it sooner.

To install WordPress locally, you’ll need either MAMP (for OS X) or XAMPP (for Linux or Windows). These are one-click solutions that enable you to run your own personal webserver. They are awesome.

Setting WordPress up on your computer is a breeze: simply create a database in phpMyAdmin (which you get to through MAMP or XAMPP), extract WordPress to the appropriate folder (usually htdocs), configure wp-config.php, and go. Just make sure you’re running Apache and MySQL.

Testing a WordPress theme you’ve designed locally makes life so much easier. Not only are you able to make changes in real-time, you do it all behind the scenes- privately, where a chance visitor won’t have a chance to see the new design until it’s good and ready.

Of course, once you’ve got MAMP or XAMPP, you can do this with any php script of your choice- no more uploading and replacing files on FTP over and over again.


  1. By Chris posted on April 22, 2009 at 7:18 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I grabbed the free copy of VMWare Infrastructure and installed a CentOS setup exactly like I did on my production server. It still requires a bit of FTP, but it’s just one or two keystrokes to replace all the files. I gave it a local IP and access it in my browser, while it runs behind the scenes.

  2. By Mark Popkes posted on April 22, 2009 at 7:21 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    I agree with you on this! Testing WP layouts locally is key to a successful launch of the final version. One thing I would add or recommend is not to write all your articles on your local server and then upload your database to the database on your server, because the links associated with your testing database won’t match up and you’ll have a big problem on your hands!

    Use dummy text and images for local testing, and the real articles to your live server!

    Good post! Love this blog!

  3. By John (Human3rror) posted on April 22, 2009 at 7:54 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    great vid i made a little while back:

    http://human3rror.com/2009/03/09/installing-wordpress-on-your-local-machine/

  4. By Adam Norwood posted on April 22, 2009 at 10:06 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Local testing is definitely the way to go! I also have Subversion handy to do some of the other boring work: I use it to keep WordPress itself up-to-date (I know updates are a click away these days in the admin panel, but I like the ability to roll things back if I need to), and I keep my theme directory under version control too, so I don’t even have to worry about FTPing the files back and forth when it’s ready to go live. Good stuff.

    The thing I’m still missing is a script that will 1) grab a copy of the live database 2) scrape through it to replace any server-specific strings (like absolute path names) then 3) slip it into my local testing db. I currently do this by hand and while it only takes a couple of minutes it’s pretty annoying. Anyone know of an existing WordPress-related tool that does this automatically?

  5. By Kevin posted on April 22, 2009 at 11:11 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    As a newcomer to front end developing and blogs this not too clear for me. You make this
    ( “simply create a database in phpMyAdmin (which you get to through MAMP or XAMPP), extract WordPress to the appropriate folder (usually htdocs), configure wp-config.php, and go”) sound so easy, could you detail the process for this please? Thanks in advance and for the post. Installing MAMP was a breeze, too.

  6. By Wally posted on April 23, 2009 at 12:53 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    To be honest, as a developer I would never have imagined that people would just flip a switch to test their theme on their live site. What a scary idea that is!

    Good job pointing out that there are far better and safer ways to build your own themes.

  7. By Lorraine Nepomuceno posted on April 23, 2009 at 6:24 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Kevin, here’s a quick step-by-step for doing that in MAMP- got this from the excellent Ben Bleikamp:

    1. Load up the MAMP application, start Apache and MySQL.

    2. Point your browser to: http://localhost:8888/MAMP/ and you’ll find yourself at the MAMP homepage. It’s a simple control panel that lets you edit anything important fairly easily. Click the PHPMyAdmin link.

    3. Create a database. I called my “wordpress” because I am only installing it once. If you’d like to use more than one WordPress install I’d suggest naming the databases by site, although it doesn’t really matter.

    4. Unpack your WordPress download to to ../mamp/htdocs/wordpress/. The /htdocs/ folder is your “live” folder – if you want to create a new site, simple create a new folder.

    5. Load wp-config-sample.php into your favorite text editor. You’re going to need to edit the values so that WordPress can access MySQL on your machine. The default username for MySQL is “root.” The default password is also “root.” If you are planning on using MAMP on a live server, change those values. The host is “localhost:8888.” The database name is whatever you called your database in Step 3. Save it as wp-config.php in your ../mamp/htdocs/wordpress/ folder.

    6. Run the idiot-proof WordPress 5 minute install (it should take about 30 seconds). Point your browser to: http://localhost:8888/wordpress/wp-admin/install.php

    Hope this helps :)

  8. By Spamboy posted on April 25, 2009 at 12:58 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Anyone here ever tried to setup a USB stick running XAMPP for Mac and XAMPP for Windows — that way, you can use the USB stick on whatever computer you’re at (I have a Mac at home, but a PC at work).

    If you’ve done this, were you able to set it up so that the htdocs directory and MySQL database files were shared?

  9. By Khongcoai posted on April 27, 2009 at 8:45 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Yeap, ok for Mamp, but how can we syncronize the local folders and database to the production server?

  10. By Michael posted on July 29, 2009 at 6:26 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Hi Lorraine,

    Quick question about using MAMP to build WordPress themes and incorporating gravatars. Do gravatars work on your local machine? I.e. I’m in the middle of incorporating gravatars into my website which has not been uploaded yet. I’m only viewing it on my local machine using MAMP. When I login to my WP dashboard, I can see my gravatar (there) no problem. But I can never see it on the webpage I’m building. Any ideas?

    Code:

  11. By Michael posted on July 29, 2009 at 6:28 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    oops! Code didn’t copy over.

    This is all I have (minus the “!– –” obviously).

  12. By Spamboy posted on July 29, 2009 at 7:17 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    @Michael Your code did not display, because you enclosed it in HTML comment brackets. :) Since you pasted code, I assume you are coding a custom there? My recommendation would be to download a Gravatar-enabled theme to your machine, activating it, and seeing if they display for that theme. If they do, then you can reverse-engineer the theme and apply its code to your theme. Otherwise, it’s an indication of network connectivty.

  13. By Ricardo Jorge posted on October 2, 2009 at 2:44 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks a lot. This is really going to help me, since i want to change my theme, but i’m always making little changes that i don’t want my readers to see =D

  14. TrackbackPosts about Theme as of April 22, 2009 · Fee Premium Themes WordpressTesting Wordpress themes locally | DevloungeSEO Success With Wordpress | SEO Bloggetting the hang of it « Just For Fancy | Musings of a self-proclaimed Fancy-Pants.Testing Wordpress themes locally Devlounge | Wood TV StandMySQL Management on your Mac | Devlounge