Edit WordPress with Dreamweaver on a local server

Posted on 21st March, 2013 30 Comments

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

Download Xampp*

Download Wamp*

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.

config

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_

settings

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.

run

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.
wordpress settings

Setting up Dreamweaver

Open Dreamweaver and select add new site.

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.

site name

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

server folder

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.

advanced tab

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

select 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.

discover

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.

local files

Comments

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]

Ferienhaus Caputh

24th, Sep, 20

H᧐wⅾy! Ƭhis post couldn’t be wrіtten any better!
Reading this post reminds me oof my good old room mate!
He alwayѕ kept talking abbout this. I will forward thiss page tto
him. Fairly cеrtain he will have a good rеad. Many thanks for sharing!

cbd washington dc

25th, Sep, 20

zHmuFQ I was suggested this blog by my cousin. I am not sure whether this post is written by him as no one else know such detailed about my problem. You are amazing! Thanks!

Ferienwohnung im Wald

26th, Sep, 20

Oh my goodness! Awesome article dude! Thanks,
However I am going through issues with your RSS.
I don’t understand the reason why I cannot subscribe to it.
Is there anybody else having similar RSS problems? Anybody who knows the answer can you kindly
respond? Thanks!!

how long does viagra last

19th, Oct, 20

Cornell University Contact Privacy Policy follow us on: College of
Veterinary Medicine – Cornell University SEARCH: College Cornell People
Home About Admissions Academics Research Outreach Hospitals Diagnostic Center Giving Cornell Feline Health Center Home About theCenter
Mission Statement History What Makes Us Unique? how long does viagra last Cornell University Contact Privacy Policy follow us
on: College of Veterinary Medicine – Cornell University
SEARCH: College Cornell People Home About Admissions
Academics Research Outreach Hospitals Diagnostic Center Giving Cornell Feline
Health Center Home About theCenter Mission Statement History What
Makes Us Unique?

viagra price

19th, Oct, 20

Anytime over 150,000 jobs are going to be added
to any field it is something that causes a stir. http://bestviagrx.com/
Anytime over 150,000 jobs are going to be added to any
field it is something that causes a stir.

can women take viagra

20th, Oct, 20

The concentration of mold spores within an indoor
environment may have no affect on one person while another person may become extremely ill.
can women take viagra The concentration of mold spores within an indoor environment may have no affect on one person while another person may become extremely ill.

generic viagra online for sale

20th, Oct, 20

You must not rely on the information on this website as an alternative
to medical advice from your doctor or other professional healthcare provider.

generic viagra online for sale You must not rely on the information on this website as an alternative to medical advice from your
doctor or other professional healthcare provider.

viagra for sale

20th, Oct, 20

As Riley and her emotions struggle to adjust to a new life in San Francisco, turmoil ensues in Headquarters.
buyhdpillvia.com As Riley and
her emotions struggle to adjust to a new life in San Francisco, turmoil ensues in Headquarters.

Leave a Comment

To preserve code added to a comment you can wrap your code in short tags
by using [square brackets]:

  1. PHP use - [php] <?php code here ?> [/php]
  2. CSS use - [css] #code-here {} [/css]
  3. HTML use - [html] <div> code here </div> [/html]
  4. JS use - [js] $(".codeHere") [/js]