Create a local, development version of your WordPress site on your hard drive: a guide for the absolute beginner

If you have a WordPress site, you may have imagined how useful it would be to have a development version of your site running on your hard drive, that you could experiment a

nd play with offline without having to modify your actual site.This post will describe one of the simplest ways that you could get a version of your site up and running on your hard drive easily and in record time, without needing to have too much technical expertise and without having to play with or modify actual code or .htaccess files, create databases and/or users, etc. You don’t even have to have FTP access to your live site, necessarily.

Note, however, that you will not have a 1:1 clone of your website running locally but rather a version of it that will look the same (the distinction is important if you are interested in, say, debugging your WordPress site, in which case this tutorial is not what you need).

Tools used in this tutorial:

  1. DesktopServer Server Limited(the free version; which will contain everything that you will need to run a WordPress site, and is based on Xampplite).
  2. Two WordPress plugins: WordPress Importer and Search and Replace plugin (do not download these just yet, wait until prompted in the tutorial below).

Yes, just these tools. Seriously. (Although FTP client,might be useful to pre-download your media files locally, as discussed in step 5.5).


Here’s a summary of the steps:

  1. Download the ‘export’ file from your live site
  2. Download and run the free version of DesktopServer
  3. Configure DesktopServer
  4. Setting up and updating WordPress
  5. Importing your XML export file
  6. Find all online references and replace them with Local URLS
  7. Housekeeping: fix site settings, menus, and install the theme(s) and plugins that you need
  8. How to launch the local site

Step 1: Download the ‘export’ file from your live site.

1.1 Log into your live site. On the left sidebar in WordPress; go to ‘settings’ then ‘export’ Live site export
1.2 Next choose ‘All content’ and click ‘Download Export File’. This will save an XML file on your hard drive. It may take a while to process depending on how big your site it. We will refer to this file as ‘the XML export file’ in the steps below. Live site export download

Step 2: Download and run free version of DesktopServer

2.1 Download the free  version of DestkopServer here. Scroll down the page to the DesktopServer Limited (free) section. Click on the ‘New Install’ links for Mac or Windows. This tutorial will be based on the Windows version, and will assume you are working with Windows, but you could easily adapt it to Mac.

2.2  Unzip the archive anywhere you like, then click into the extracted folder. Inside you will find a folder named ‘xampplite’ and a readme file.

2.3 Move the ‘xampplite’ folder from step 1 above to your root (C:\) drive. It has to be placed in that location; in the root and NOT in any subfolder such as ‘C:\Program Files\’ etc.

2.4 Open the ‘C:\xampplite’ folder and run ‘DesktopServer.exe’


Step3: Configure DesktopServer

When you run DesktopServer.exe you should see the screen(s) below. Note: if you get an initial screen asking to rerun DesktopServer with Admin privileges, let it do so.

3.1 Select ‘Yes; Start Apache and MySQL services’; then click next DesktopServer screenshot - Start Apache and MySQL services
3.2 You will see a ‘Start web and database services’ message. Click next when it is done doing what it is doing. DesktopServer screenshot - start web and db services
3.3 Select ‘Create a new development website’ and then click next. (I am assuming that you are creating a new site and that you do not already have one.) DesktopServer screenshot - create a new development website
3.4 Enter your site name. Use the exact same name as your live site; with a ‘.dev’ top level domain extension.

Blueprint is WordPress of course. Site root can be anywhere you want it to be on your hard drive. Change it if you do not want the default ‘My Document’ location. If you have a previous site already located there you will have to remove it first (see screenshot for step 3.3; there is a remove option).It will take a minute or so. Click next when done. You will be presented with a link to your new .dev WordPress site; click it. Exit DesktopServer; you do not need it for now (click on the ‘close’ button rather than ‘next’).
DesktopServer screenshot - enter site name


Step 4: Setting up and updating WordPress

4.1 Enter your WordPress site info:

Recap: to get to this screen; you need to visit your new domain name (yoursite.dev) in a browser.

Enter the following: Title: use the same title as your online site Username: admin is fine Password: enter a password twice. Don’t worry if your password is weak; as your site will be offline anyway. Your email: anything you like. Click ‘Install WordPress’.

When you see the ‘Success!’ screen; click ‘Log In’; then log into WordPress with your username and password that you just created.
Wordpress Setup - site info
4.2 Update WordPress

If there’s an update to WordPress go ahead and update it (it will be displayed in a yellowish notification message as per the screenshot. If there is no update; skip to the next step). Once you click ‘Update Now’ WordPress will download the new version and do the update automatically. Your system needs to be online for this to happen.

Also go ahead and update themes and plugins; should there be any updates.
Wordpress update Screenshot
4.3 Delete all posts and comments

Click on ‘Posts’ in the left sidebar and delete the ‘Hello world!’ post. (You can do this via a little ‘Trash’ link under the post entry – see screenshot). This should also delete the single pre-existing comment.
Wordpress Delete Post

Step 5: Importing your XML export file

5.1 Go to tools / import Wordpress Live site import
5.2 Select ‘Wordpress’ Wordpress Live site import wordpress
5.3 Next; WordPress will attempt to install the import plugin. Your system needs to be online for this to happen. Click ‘install now’.

Once import plugin is installed; click on “Activate and run Importer” as shown to the right.
Wordpress Live site import wordpress install plugin Wordpressa activate and run importer
5.4 Import your WordPress XML export file from step 1.2 above.

Click ‘Choose file’; browse to the XML export file downloaded on your hard drive; then press ‘Upload File and Import’.
Wordpress import XML file
5.5 Important decision to make regarding downloading your media files

If your live site has a huge amount of media files (say 500 megs of media files or higher); it might be better to download your media from the server and place it in the uploads folders manually; before importing. The default path of the upload folder would be: “My Documents\Websites\www.yoursite.dev\wp- content\uploads” by default. (Note that yousite= the name you are using for your site).

Otherwise; if you have too many files to download; the importing process might fail or have to be restarted several times.Note: if you go this route; you can useWinSCP; a free FTP client which has a folder synchronization option. You will need info about your FTP server and a login and password to connect. Either way; whether you choose to download via FTP or not; continue on to step 5.6
5.6 Import with Attachments. The WordPress importer will now display a screen; such as the screenshot on the right; with names of authors. You need to do two things

One: scroll down to the bottom.Leave all authors as is.

Two: check the box that reads “Download and import file attachments” and click ‘submit’. WordPress will now start working. It will likely take a long time.
Wordpress assign writers and import attachments
5.7 Troubleshooting the ‘Import’ processThis step may take a long time; because this is where your media library will be downloaded to your hard drive. You should consider that your media files on the live site may amount to hundreds of megabytes; all of which need to be downloaded (which you can go around if you pre-download via FTP as discussed in step 5.5). A few things to consider here

One: if you see an interminable blank screen; or if your browser seems frozen or stops working; ; you can relaunch the import process (remember to check the ‘import attachments’ box when you do so). Do not worry; any users that were previously created or media files previously downloaded will be there and will be skipped; so there’s no duplication of effort or downloads.

Two: if you have a really large site; you may need to relaunch the import process a handful of times. My advice is to wait for it to finish.Three:if you see error messages such as ‘failed to import media’ or trim() expects parameter etc.; do not worry about it; let it finish.Four: if you encounter any glitches; you can re-launch the import process as many times as you need to until it is done. Remember to check the “Download and import file attachments” box every time; though.
Wordpress import errors
5.8 Preview your site

Go to yoursite.dev. You should see your site; with the last published post on top. It will be using the WordPress default theme (‘Tweny Eleven’); because at this point you have not added your desired theme to the local install. If you are online you will see images; but note that they are still linked to the live site; which we will remedy below.If you do not see the post you expected appear as the first entry; go back to step 5.6 and import yet again. Also consider importing your media via FTP as per step 5.5.

Step 6: Find all online references and replace them with Local URLS

To do this, we will use the ‘Search and Replace’ plugin.
Step 6: Find all online references and replace them with Local URLS

6.1 Go to the ‘Plugins’ section  from the left sidebar; and click ‘Add New’ Add new WordPress plugin
6.2 In the search box type in ‘Search and Replace’ search for search and replace
6.3 The plugin you seek should be the first in the list of results (authored by Frank Bultge). Click ‘Install Now’. Approve the installation. Once installed; go ahead and ‘Activate Plugin’ using the provided link. install search and replacesearch and replace activate plugin
6.4 Run the search and replace plugin: from the dashboard select Tools then ‘Search and replace’ Tools then search and replace
6.5 In the ‘search and replace’ plugin screen; go all the way down and check ‘all’ fields (as per the screenshot to the right). Search and Replace check all fields
6.6 In the ‘Search for’ and ‘Replace with’ fields; enter ‘yoursite.com’ (the name of your live site); with ‘yoursite.dev’. Do not use ‘www’.What you are doing here is replacing all references to the live site with references to the local site. The result should look something like this bottom-right screenshot.That’s it. You’re done. Check your site. But also note that there are a few more housekeeping steps; below. search and replace all tablessearch and replace x entries found

Step 7: Housekeeping: fix site settings, menus, widgets, and install the theme(s) and plugins that you need.

Your site should be completely functional by now. However, there are a few more things you need to do.

  • Check the settings: general, reading, writing, discussion, media, and (imporantly) Permalinks. Make sure that the setting are the same as your live site.
  • Recreate menus: go to Appearance, menus, and make sure to recreate the menus in the live site, if you want these
  • Recreate widgets: go to Appearance, widgets, and make sure to recreate the widgets in the live site, if you want these
  • Install and activate the desired plugins
  • Install and activate the desired theme (or themes, if you want to test out more than one, etc).

Step 8: how to launch the local site

8.1 Following a restart of your PC (or a shutting off of  the web and database services); will need to re-run DesktopServer before you can access your dev site in the browser.Note that you will have to run with Administrator privileges. If not; you will see the screen to the right asking to do so. DesktopServer restart with privileges
8.2 You need to have Apache and MySQL services turned on (see screenshot to the right).Once you select them ad click next; you can go ahead and close the DesktopServer dialog. After that go to any browser and log into yousite.dev to see your local site. DesktopServer Apache and MySQL

That’s it.


 
 
 
Samer Kurdi

Samer Kurdi

Has been reviewing software since 2006 when he started Freewaregenius.com
flattr this!
  • http://beecherbowers.com Beecher Bowers

    Hi Samer, thanks for this article. I have a dozen or so WordPress sites and have thought it would help to be able to set them up offline for testing. Looks like a surefire way to get it going. I’ve used WAMP in the past for localized installs, but the DesktopServer product looks pretty slick.

    Thanks again for the great article.

  • http://innolea.com Ishank@innolea

    Desktop Server hmm, thanks. I use EasyPHP for setting up WordPress and other CMS. Is there any major difference between EasyPHP and Desktop Server ?

  • Samer

    Yes I must say I am very impressed with DesktopServer. I’ve done local WordPress dev sites before with other tools and DesktopServer is just so much simpler and easier. The only downside to it is that the dev site is not portable that you can carry off on a USB stick, but that’s not really an issue for me.

  • http://www.mygoforthegreen.com Linda Willis

    What a wonderfully detailed set of instructions, Samir! I am not a developer and did not design our site, but am trying to help our web site guy (off site and moonlighting for us) by creating some content using Private pages and our live site. Think I have created issues with the live site by doing so and would really like to have a “safe” testing area.

    Question: your instructions indicated the themes wouldn’t be transferred with the rest. Our site was designed but not with a theme. Would that transfer to the dev site following your instructions? Or am I better to try and get our web site guy to create a test site for us – although that probably doesn’t work if it needs to be on my hard drive!?. Sorry if this is pretty basic – I’m definitely not a techie! Despite that, I really do think I could follow your instructions, given the site’s “look” would carry over. Thanks!

  • Eric G

    Wow. This article nails what I am trying to do, so thanks. Here’s my problem. I found your article only AFTER I had downloaded EasyPHP and got it working after much frustration. So, I went ahead with your article, starting at where one imports the export file. All was well until I realized that my local site doesn’t have the suffix ‘.dev’ ! (At least that isn’t the way EasyPHP sets it up.)

    Do you have any thoughts on how I can replace all references to the live site with references to my local site when they have the same url? Thank you!