Edit WordPress with Dreamweaver on a local server

If you’ve ever tried to edit WordPress without a testing server then you’ll know how much of a royal pain in the ass it can be, so I thought I’d share how to set up a local network so you can preview all your changes as you make them, locally on your PC.

* Important!
*If you’re running Skype at the moment then your going to run into problems, they both use port 80. So you’ll either have to quit Skype or make it use an alternate port.
* In Skype window || goto tools/options…/advanced/connections/ then untick the ‘ Use port 80 and 443 tick box ‘.

Quick navigation

• Setting up the server
• Setting up WordPress
• Setting up Dreamweaver

Setting up the server

Download Xampp*

• Xampp installation instructions – http://www.apachefriends.org/en/xampp-windows.html#686
• * Important!:
  Xampp needs the Microsoft Visual C++ 2008 Redistributable package from http://www.microsoft.com/en-us/download/details.aspx?id=5582. Please ensure that the VC++ 2008 runtime libraries are installed on your system.
• Open your browser and type in ” localhost ” then click the OK button to continue.
• Your default details are:
  • User Name: root
  • Password: !_leave_blank_space_here_!

Download Wamp*

• * Important!:
  Wamp needs the Microsoft Visual C++ 2010 SP1 Redistributable Package x86 http://www.microsoft.com/download/en/details.aspx?id=8328  OR Package x64 http://www.microsoft.com/download/en/details.aspx?id=13523 Please ensure that the VC++ 2010 runtime libraries are installed on your system.

If you haven’t already, you’ll need to download one of the above and obviously install it. My personal server of choice is xampp-portable-lite, mainly for these three reasons: It’s only 422 MB when installed, it plays nicely with WordPress Multisite, plus xampp-portable-lite uses a relative path for the server, (which is totally awesome by the way) – it means that I can install it onto a memory stick!

Why would you want to do that ? Well…this allows me to take the server with all my sites, scripts and whatever else I need, plug myself in and edit away from any PC or it can be used to show a client WordPress projects without having to have an internet connection.

So you’ve now installed a server by following the on-screen instructions above and you’re ready to add WordPress.

But before we do that you’ll need to start your engines.

Wamp

• Select it from your start menu programs list.
• Once opened, you might have to start the server.
  • Left click the red icon (notification icon, bottom right of your screen) and select ‘start all services’.

Xampp

• Navigate to where you installed Xampp
• Open the xampp folder
• Select xampp-control.exe
• Under Actions – click start Apache and click to start MySql

Both Wamp and Xampp should start to show green icons, confirming that the servers are online; Wamp in the notification area and Xampp in its control panel.

Now you’ve got your server installed, it’s time to install WordPress. Download the latest WP version, unzip it and add the whole WordPress folder to:

• xampp/htdocs/wordpress
• wamp /www/wordpress

Setting up WordPress

Now in your browser type localhost/wordpress.

You’ll be greeted by a Create Configuration File page, click the button.

You’ll then be shown a server settings page, if you’re using the default server, user and database. See below for the settings you enter on this page.

Otherwise if you created your own, then you should enter the database settings you’ve created.

• Database Name          –           test
• User Name                 –           root
• Password                    –
• Database Host            –           localhost
• Table Prefix                –           wp_

If you’ve entered the correct database information you can give yourself a little pat on the back, because you’re ready to install WordPress. What are you waiting for? Run the install.

Now you just need to complete one more page of information, site name, user name, password and email address. I use the following settings, just because it’s simple and easy to remember but you can use whatever you’d like.

• Site Title          –           test
• Username       –           admin
• Password        –           Password
• Your E-mail     –           (I recommend you use a real email, just in case you forget the details you entered above)

Awesome, now Install WordPress.

Setting up Dreamweaver

Open Dreamweaver and select add new site.

A site set-up box will open with four noticeable options on the left, site, Servers, Version Control and Advanced Settings. With the first option = Site selected, fill out your Site Name: My theme name. Then under Local Site Folder, browse to your theme folder on your local server and select it.

Then select the second option = Servers, click on the big plus sign in this new window.

• Server Name:             –           Localhost
• Connect using:            –           Local/Network
• Server Folder:             –           (This will be your WordPress folder on your server)
• Web URL:                   –           http://localhost/wordpress

Now see at the top of this box two tabs, Basic and Advanced, select the Advanced tab. You’ll see two sections, called Remote Server and Testing Server. Under Testing Server select the Server Model: dropdown, choose PHP MySQL.

Click Save and do one final thing, un-tick Remote and tick Testing.

Save again and Dreamweaver will load your site.

Select a file from your theme and load it into Dreamweaver. A blue information bar will fade into the top of your Dreamweaver window. Click Discover from the information bar and Dreaweaver will find all the files associated with the page you’ve just opened and you’re all done. Bravo! You just set up an awesome WordPress, Dreamweaver testing environment.

Now you should see all your related theme files listed nicely in Dreamweaver and, as a bonus, if you click the Live button on the Dreamweaver task bar, you’ll be rewarded with a live preview of your theme.