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:
- DesktopServer Server Limited(the free version; which will contain everything that you will need to run a WordPress site, and is based on Xampplite).
- 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:
- Download the ‘export’ file from your live site
- Download and run the free version of DesktopServer
- Configure DesktopServer
- Setting up and updating WordPress
- Importing your XML export file
- Find all online references and replace them with Local URLS
- Housekeeping: fix site settings, menus, and install the theme(s) and plugins that you need
- 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’ |  |
| 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. |  |
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 |  |
| 3.2 You will see a ‘Start web and database services’ message. Click next when it is done doing what it is doing. |  |
| 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.) |  |
| 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’). |
 |
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. |
 |
| 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. |
 |
| 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. |
 |
Step 5: Importing your XML export file
| 5.1 Go to tools / import |  |
|
| 5.2 Select ‘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. |
  |
|
| 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’. |
 |
|
| 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. |
 |
|
| 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. |
 |
|
| 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’ |  |
| 6.2 In the search box type in ‘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. |   |
| 6.4 Run the search and replace plugin: from the dashboard select 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). |  |
| 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. |   |
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. |  |
| 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. |  |
That’s it.
