Using Bitnami WordPress Stacks With Dreamweaver CS6

Using Bitnami WordPress Stacks With Dreamweaver CS6

If you use Bitnami WordPress stacks and want it to work in Dreamweaver CS6 locally, this tutorial is for you.

I’ve tried out different server environment packages like XAMPP and WAMP in the past.  The problem is while XAMPP and WAMP is certainly capable, you still have to get your hands dirty when installing WordPress on your computer.  Not so with Bitnami Stacks!

Problem:

I wanted to find a way to make Bitnami WordPress Stacks work in Dreamweaver on my local server.  The default directory paths set during the installation of Bitnami WordPress stack resulted in a long and convoluted directory path (see screenshot below).

Long File Path For Original Bitnami WP install

Long File Path For Original Bitnami WP install

Nope, that’s not going to fly with me because I’m a stickler for organization.

I will explain how you can get started with Bitnami’s WordPress stacks and get it to work correctly with Dreamweaver CS6.  This method has so far been the best way for me to keep my websites organized like this:

Better Bitnami Installed Directory Paths

Better Bitnami Installed Directory Paths

Let’s get started!

Download Bitnami’s WordPress stack that will suit your OS.  The first thing here is your directory structure.  We want it to work in the root of your computer (C:\ drive) so make a new folder there for your new Bitnami WordPress Stack installation.  This part is important if you want to have it work in Dreamweaver and keep your websites organized!

 

1.  Create a new folder in your hard drive (C:\ or elsewhere).  Name this folder your website domain name or anything you like.  I’m using misspewpew.com as an example for this tutorial so it’s easier to follow.

 

2.  Run Bitnami and install it in that folder.  Just browse to that folder and install it there.  Your new Bitnami WordPress installation should now look like this:

C:\yourdomainfolder\apps\wordpress

 

3.  Nifty!  Start all servers when you start up Bitnami.  You’ll want to visit your new local WordPress copy by clicking on ‘Go to Application’ in your Bitnami WordPress Stack program.  Log in WordPress using your credentials that you entered during the installation for WordPress.

 

4.  Once logged in, go straight to your dashboard’s Settings -> Permalinks, and change your permalink to default in WordPress.   This is important because Dreamweaver will not work otherwise! 

 

5.  Next, fire up Dreamweaver and create a new site through Manage Sites where you can configure settings for your server to work with Dreamweaver.

 

Local Folder and Name for your Dreamweaver site

Set up testing server to PHP MySQL in Dreamweaver

Local Folder and Name for your Dreamweaver site

This is where you configure settings for your local folder and name your new Dreamweaver site.

For your local site folder, you want it to be the root of your wordpress installation (\apps).  It should be C:\yourdomainfolder\apps for you.

 

Server Folder and URL for your Dreamweaver site

Next, click on Servers and add a new server by clicking on the little plus icon that appear at the bottom of the list.  This is where you configure the meat for your server.  If something goes wrong, it’s usually because something is entered incorrectly here.  This is the part that makes everything work together.

You can name your server anything you like, I like to use my domain name with an extra label for localhost to help identify this as my local server.  Next, put down Local/Network for how you want to connect using that.  For your server folder, you want it to be the root of your apache folder, not your wordpress installation.  This is the folder you made at the beginning of this tutorial.

Server Set up in Dreamweaver

Server Set up in Dreamweaver

Yep, that’s it!  Now for your web URL, enter:  http://127.0.0.1/wordpress/.

Next, click on Advanced and set your server model under Testing Server to PHP MySQL then click Save.

Advanced settings for PHP set up on Dreamweaver

Advanced settings for PHP set up on Dreamweaver

Check off ‘testing’ in your Server dialog box after you save, make sure Remote is unchecked if you have no plans on uploading anything.  And there you have it!

All Done!

Working Local Copy In Dreamweaver With Bitnami

Working Local Copy In Dreamweaver With Bitnami

You now have a fully configured WordPress installation that works with Dreamweaver using Bitnami WordPress stacks.  It sits nicely in the root of your hard drive for ease of installation and keeping track of your projects.

You’ll want to navigate to index.php inside your activated theme folder like in my screenshot above.  View in Live mode to activate it, Dreamweaver at this point will load everything up here and from here now it’s smooth sailing.  Don’t forget I’m just using misspewpew.com as an example for my named folder in my tutorial and you don’t have to use the same naming conventions, you can choose your own name for your folder.  It still works for me though!

If you have a different way or a better solution working with Dreamweaver locally, I’d love to hear about it.  I hope this guide helped you get started with Bitnami with Dreamweaver in the easiest way possible :)

About Shannon

Hi, I love working on all kinds of things, from making videos to building websites. As a professional artist, I travel to art shows and provide workshops in digital media. If you'd like to get in touch with me, drop by anytime for a chat.

4 Comments

  1. Great! I’ve spent the day piecing together options for a WordPress-Dreamweaver combo from lynda.com, adobe forums and other places. I considered WAMP before realizing Bitnami would be simpler. Your blog post had the info I was after and you explained it very clearly! FYI the same steps work with Dreamweaver CC 2014.

    What’s your workflow for publishing to a web host once the site is done?

    What’s your workflow for modifying WordPress sites in Dreamweaver that have already been published?

    Do you ever find yourself making certain changes directly in WordPress with this setup?

    Reply
    • I’m glad you found my article helpful! To answer your questions:

      What’s your workflow for publishing to a web host once the site is done?

      I install WP on my live server then it is as easy as uploading my theme files to my online server via FTP. For content, I can use WordPress Exporter/Importer plugin to save content from my local site and import it on the live site. It can get a bit tricky when it comes to themes using page builders and additional functions that aren’t included as plugins. I have to save my theme’s settings as files on my computer then upload the setting files (if I’m using the same theme on the live site.).

      What’s your workflow for modifying WordPress sites in Dreamweaver that have already been published?

      I don’t use Dreamweaver to design websites- I use Firebug in browsers and will code using Dreamweaver or Notepad++.

      I use relative URLs for every single URL in my theme files and organize my directories exactly the same way as things are set up on my live site. Then, I set up the check in/out feature in DW, and all I have to do is save whatever I’m editing, and DW will check in the file on my live site for me. I’ve been thinking about writing a tutorial on using the check in/out feature with Bitnami WP stacks, actually. There wasn’t a lot of information online for DW/Bitnami specifically so I had to figure it out through trial and error. Stay tuned :)

      Do you ever find yourself making certain changes directly in WordPress with this setup?

      Not with Bitnami. I almost never have to touch files like wp-config.php when I transfer to my live site and back. Bitnami takes that work out for you! The only thing I have to do is make sure the permalinks are set to default so that WP will work in Dreamweaver on my local server. On live, you are free to change the permalink setting as you please.

      Great questions, Steve!

      Reply
  2. Many thanks for your clear account. DW obliged and displayed first try. Best wishes

    Reply
    • You’re welcome, I’m glad you found the tutorial helpful!

      Reply

Got a few words to say? Leave a comment!

%d bloggers like this: