How to connect a WordPress site with Adobe Dreamweaver CS5 [Bonus]

If you noticed the web code editor that is built-in on WordPress is kind of limited, it does not have code highlighting, line number, programming language support, or many other features that you can find in software code editors. And not having tools to work with could make it confusing when editing WordPress files. So if you own a copy of Adobe Dreamweaver — today we are going to be using CS5 –, did you know that you can actually use this software to connect via FTP (File Transfer Protocol) to your WordPress site and edit those files right in your desktop? And it is not complicated.

The advantage of using Adobe Dreamweaver CS5 is that it is a full-blown application. It has tons of great features that you may not find in other code editors, like code highlighting, line number, code hints which is a feature that helps to insert code more quickly and without mistakes, different programming languages are supported, invalid markup corrections, and many other features.

1.  To configure Adobe Dreamweaver CS5 to edit files in your WordPress site files, you need open Dreamweaver and from the file menu click Site, and select New site…

Dreamweaver-CS5-file-menu

 

2.  The Site Setup will open and in the Site section, set the Site Name — anything you want, but try to make it descriptive — and also set the Local Site Folder, folder that Dreamweaver will use to store files from your WordPress site locally in your computer. So as you can probably see Dreamweaver does not work with the remote file, it downloads it to a local folder and that is the file that you will be editing; then when you done working and ready to save it, Dreamweaver will upload and update the file that is located in the remote site.

Dreamweaver CS5 Site Setup - Site

 

3.  Next is Servers, here you are going to configure the remote site FTP contention settings by clicking the (‘+’) sign.

Dreamweaver CS5 Site Setup - Servers create new

 

4.  Complete the information require to connect via FTP to your WordPress site.

Tip: Remember to set the Root Directory: with (‘/’) sign and you may run in some problems if you don’t click More Options and check Use Passive FTP setting. Also remember to change the FTP port number in the case that the server where you are hosting your WordPress site is using other than port # 21.

Dreamweaver CS5 Site Setup - Servers FTP configuration

 

5. To verify that all the settings are correct, click the Test button situated under the Password: field, and when you get a successful confirmation “Dreamweaver connected to your Web server successfully”, click OK, and click Save to finish.

Those are pretty much all the settings you are going to need, but feel free to check and play with other configuration.

Now to make sure that you can successfully browse your remote website files, do the following:

  1. Close the Site Setup page and go to the FILES tab.
  2. Choose the new site that you have just created from the drop-menu and also select Remote server.
  3. If Adobe Dreamweaver CS5 is not already connecting to the WordPress site, click the plug icon to connect.

Dreamweaver CS5 Testing FTP connection

 

Connection to the remote site successful!

Adobe Dreamweaver CS5 - Connection successful

 

Bonus

In the case you need to re-install Adobe Dreamweaver CS5 or your operating system and you don’t want to go through these steps again, you can export (or backup) your WordPress site FTP configuration to a file and later import them back with just a few clicks. Here is how:

  • Go to the file menu, click Site and select Manage sites…
  • Select the site you want, select Export, choose the way you want to export the settings — the default options should be ok, so you don’t have to re-enter username and password later –, click OK and save the file to a network location or USB drive.
  • After you have reinstalled Adobe Dreamweaver CS5, you can import the settings in the same way you export them, but now instead of click Export you will click Import, browse to the location of the name-of-file.site and that is it!