How to set up a local web server to edit WordPress on your computer

As promised, here are step-by-step instructions for setting up your computer as a Web server so that you can run — and edit — WordPress themes on your local computer.

Note: Only Dreamweaver CS5 and later versions support the multiple levels of include files needed to display WordPress themes. These instructions can also be used to set up a server you can use with Drupal or Joomla! (yes, the correct spelling on Joomla! is to include the exclamation point).

Keep in mind: There are a lot of steps to this process, and you need to follow them to the letter, but if you get something wrong, don’t panic. Messing up the installation process doesn’t mean that sparks will shoot out of your computer or that the motherboard will melt itself down to a smoking puddle (although that would make for a cool picture).

No, if it doesn’t work, just go back a step or two and give it another try.  And remember, you only have to get it right once.

Here are the instructions for the Mac platform. For Windows it’s almost the same and I’ll point out the differences as we go along.

1. If you’re on a Mac, go to MAMP.com and download MAMP. Note: All you really need is the basic version to run a local testing server. Don’t bother with the Pro version unless you are running a real Web server, for a testing server on your local computer, the regular MAMP version is perfect. If you’re on Windows, you need to download the Windows version from XAMPP or WAMP.
2. Unzip the file you downloaded and click to open it. Install MAMP into your Applications folder by dragging the MAMP icon onto the Applications icon in the MAMP window. On Windows, install XAMPP by double-clicking on the icon after you unzip it.
3. Once you’re done, open the Applications folder on your Mac and double-click on the MAMP icon to launch your Apache Web server and the MySQL server. Both come up and start automatically, but give it a second to get going and to launch you’re Web browser. On Windows, XAMPP needs to be installed at the root level so you should find it at C:xampp.
4. A little window will open up with of controls to turn the virtual server on and off. Make sure the Apache server and the MySQL server are both running. If the browser doesn’t open automatically, click on the Open Start Page button to open the software in a Web browser.
5. You will know that the server is working on your Mac when you see the Welcome to Mamp screen and http://localhost/8888/MAMP in the address bar. On a Windows computer, http://localhost
6. Advanced, but time-saving Mac tip: In the small MAMP floating window that has the Start and Stop Servers and the Open Start Page buttons, there are also some Preference settings. Click on Preferences and then click on the Ports tab. Click on the Set to default Apache and MySQL ports and the Apache Port will change from 8888 to 80. The benefit of this is that the address to test your site in the future will be simplified from http://localhost/8888/yoursitename to simply  http://localhost/yoursitename
7. Click OK to save your changes. Anytime you make a change like this, or if sometime in the future things just aren’t working right, restarting the server can often fix the problem. To do so, just click the Stop Servers button, wait a minute, and then click the Start Servers button to restart the Server. Click on Open start page and you’ll refresh the page in the browser with the simpler URL.
8. Next, you need to create a database – don’t worry, it’s not as hard as you may imagine because WordPress builds all of the tables for you. All you need to do is to create a database on your Mac and the MySQL software that came with MAMP makes it easy. (On Windows, you need to create a User and a new Database because of permissions issues, but don’t fret, that just means it’s two steps instead of one.)
9. To create a database, make sure you’re in the browser and that the MAMP or XAMPP software is displayed, then click on the phpMyAdmin tab.
10.  In the field that says “Create a new database,” enter a name for the database (any name is fine, just don’t use spaces or special characters – you can use the underscore if you must).
11. Make note of the name. Better yet, copy it so you can just paste it into WordPress when we get to the step (you’ll need to enter it exactly).
12. Click the Create button and you’re done! Congrats, you’ve created a database and you’re well on your way now. (Windows note: it’s a little simpler if you create a user and then create the database, but you don’t have to do it in that order.)
13.  On a Mac, in the MAMP folder in the Applications folder, you’ll find an htdocs folder. This is where all of the files and folders in your blog (or any other dynamic site) need to be stored. Think of this as the main folder on your web host where you would transfer the files in your site when you’re ready to publish them from Dreamweaver. On Windows, you’ll find an htdocs folder in the C:xampp folder.
14. If you like, you can create a subfolder in the htdocs folder for your site – this is really only necessary if you’re going to be working on multiple sites, but it will affect the URL you enter into your browser later to test your pages. In my example on a Mac, I created a folder called jumpstart for my site and blog. Then I copied all of the files of my static Dreamweaver site into that folder and then had a subfolder for my blog. If you’re only creating a blog, you can just copy all of the blog files into the main htdocs folder. (On Windows, you may have trouble using a subfolder, things seem to work best if you treat htdocs as your root folder and just copy all of your files into it.)
15. So where do you get the blog files? If you have not already done so, go to WordPress.org and download WordPress (it’s free and it’s a quick download.)
16. Unzip the WordPress folder and you’ll find all of the files and subfolders that you will need to set up a blog. Copy that entire folder in the htdocs folder or into the subfolder you created in htdocs. I also renamed the folder from wordpress to blog as many web designers, do so that the URL for my blog after I publish all of this on my web hosting service will be jumpstart.com/blog, not jumpstart.com/wordpress. Remember, when you test it locally, you’ll use localhost in place of the URL, but we’ll get to that in a minute.
17. Okay, you’re almost done. Next step is to open the blog in a browser on the local server. Make sure that the MAMP Apache server and MySQL database are still running in the background (you can always check that floating window in XAMPP or MAMP to make sure).
18. Now it’s time to open the blog in a web browser. On both Mac and Windows, enter the URL: http://localhost/ followed by whatever folder names you created. In my example, I entered http://localhost/jumpstart/blog
    Note: the http:// is not optional, but you don’t use any www’s.
    Also note: If you didn’t change the preferences to default on your Mac, you will still need the 8888, so your URL would be something like this: http://localhost/8888/jumpstart/blog
19.  If all is going well, you won’t see your blog yet, you’ll see a notice that you need to create a configuration file. Fortunately, WordPress makes this easy (one both Mac and Windows), just click the button that says: Create a configuration file (cool, huh?)
20. Follow the WordPress instructions, and when you get to the screen where you have to type in the name of the database, remember what you called your database when you created it (if you copied it correctly, you should be able to just paste it in now.)
21. In the MySQL User name field, enter root, in the Password field enter: root 
    Note: All MySQL databases come with the user name and password root. If you’re just working on a local testing server, there is no reason to change them, but on a web server connected to the internet, you probably wouldn’t want to leave these defaults…
22.  Leave the last two fields in the WordPress set up page as they are and click Continue.
23. Give your site or blog a name (any name you like – this is the text that will appear at the top of your blog when it’s created). Then create a username and password (I recommend you don’t use admin and that you take careful note of the user name and password you enter here as you’ll need them to access your blog even on your local computer.)
24. Follow the rest of the WordPress instructions and you’ll soon find yourself at the WordPress Dashboard. From here you can do all the things on your local computer that you can do on a remote server with a WordPress install, including creating new posts, downloading and changing themes, adding plugins, etc.
25. If you’ve gotten this far and it’s all working, pat yourself on the back, you’re doing great! If not, just go back and try to find the detail you might have missed and try again.

Now that you’ve gotten WordPress set up and the Apache web server and MySQL database server working, you can set up Dreamweaver so that you can edit your blog in Dreamweaver. First, you need to set up your site just as you would set up any site in Dreamweaver, but with a few special steps.

1. Start Dreamweaver and choose Site > New Site.
2. Give the site a name (any name, this is just for your reference).
3. Click on the Folder icon at the far right of the site root folder and browse to find the site the htdocs folder in your MAMP folder in the Applications folder or in the xampp folder on Windows. If you created a subfolder for your site, like I did, make sure to select that folder. I selected the jumpstart folder so that my entire site and blog would be loaded into Dreamweaver.
4. With the Site Setup dialog still open, click on the Servers category in the category list on the left.
5. Click on the small plus sign at the bottom of the servers dialog box to add a new server (just as if you were setting up a remote server connection).
6. Enter a name, such as Testing Server (again this name is just for your reference).
7. From the drop-down list, choose Local/Network (not FTP). With Local/Network selected, the rest of the options will change.
8. Again, use the Browse button (the folder icon) to find the Server Folder. In my example I browsed to Applications/MAMP/htdocs/jumpstart
9. In the Web URL field, type http://localhost/jumpstart (again, adjust this name based on your subfolder name if you used one and the 8888, if you didn’t change preferences on your Mac or simply http://localhost if you are on a Windows computer and put all of your WordPress files directly into that folder.)
10. Optional on Mac, more important on Windows, Click the Advanced tab, choose PHP MySQL from the Server model drop-down at the bottom of the advanced screen.
11. Save your server settings and the server will now be listed in the dialog. Next to the name you gave your server are two checkboxes, remote and testing. Uncheck remote, check testing (THIS IS A VERY IMPORTANT DETAIL).
12. Save and close the server set up dialogs.
13. Okay, this is the part of this long set up process where I like to ask for a drumroll please… Choose File > Open and open the index.php file in your WordPress or blog folder (you can also open this by double clicking on the index.php page in the Files panel in Dreamweaver.)
14.  Expect a blank screen, this does not mean you’ve made a mistake (necessarily). In tiny text at the top of the main workspace on your screen, look for the message from Dreamweaver that it needs to “Discover” the files and click on the tiny link there.
15. If you don’t get an error – say YAY! (okay, that’s optional, but I highly recommend it).
16. Final step to view your blog page, click on the Live View button at the top of the workspace.  This makes Dreamweaver act like a web browser so it can display the pages ‘severed’ by your new Apache Web server and MySQL database server. With Live View activated, you can see how your page will appear in a web browser without leaving Dreamweaver.
17. And now you can edit the CSS and anything else in your blog in Dreamweaver.

Note: you still want to create and edit posts and other content in the WordPress Dashboard (you can do this on your local computer or on the server, whichever you prefer) The big advantage of all of this is that now you can use all of the wonderful design tools in Dreamweaver to create and edit the CSS and other elements of your blog theme.

Helpful reminder: the htdocs folder on your local computer hard drive is the equivalent of the root folder on the web server where you will ultimately publish your blog. Think of Localhost as a replacement for your domain name (that’s the same on mac and windows)

If you have been struggling with these steps for a while and you are really frustrated, you may want to just start over from scratch. Drag the MAMP or XAMPP folder out of your Applications folder and start over at the beginning of these instructions.

And, I won’t be offended if you seek other instructions. Although there aren’t too many places where you can find instructions for working with Dreamweaver and WordPress, there are lots of places you can find help setting up your server, database, and WordPress. We all have different ways of teaching and you may find the help you need at WordPress.org where you will find many helpful tutorials on this and related topics.

Publishing your blog on a commercial Web server

Finally, when you want to publish all of your great work on a commercial web server, or any other server connected to the Internet, you have a few choices.

If you want to move everything from your local hard drive to your web server, you need to go through the steps you’d follow to move any blog from one server to another, that’s what you’re doing. You’ll find instructions on the WordPress.com site about how to export and import blog content, but many WordPress designers just use BackupBuddy to move blogs as well as doing backups, because it is powerful, easy to use, and streamlines the process.

If you’re just using Dreamweaver to, say, edit the CSS of your theme, then all you need to do is copy the CSS files back and forth between your server and your computer. The process is simple:

1. Install the same theme that you are using on your blog onto the host server on your computer.
2. Edit the CSS in Dreamweaver (I have many, many trainings on how to deal with CSS on this site or on videos – hint, hint).
3. Then FTP to upload or copy and paste over the CSS on the server with the CSS from your local computer.

I hope that helps and I wish you all the best with your WordPress – Dreamweaver connection!

Janine