ArtsAutosBooksBusinessEducationEntertainmentFamilyFashionFoodGamesGenderHealthHolidaysHomeHubPagesPersonal FinancePetsPoliticsReligionSportsTechnologyTravel
  • »
  • Technology»
  • Internet & the Web»
  • Web Page & Web Site Development

Connecting WordPress Blog with Adobe Dreamweaver and Edit Templates

Updated on July 24, 2012

WordPress happens to be the most popular and simple blogging software currently available to maintain a blog. Hence, it becomes necessary to control every aspect of it as you desire. For this article, I am going to talk about how you can connect your blog with Adobe Dreamweaver and control its theme.

Point is, once you connect your WordPress blog with Dreamweaver, you will have a great tool to edit the theme files and make them look like those professional themes that charge a lot. The procedure is really simple and it works with both Local Host and Remote Host.

It means that you can connect your own PC with Dreamweaver, as well as a paid Web Hosting service. So let us get started and I promise that I will keep it simple and straightforward.

Things that you will need:

  • Adobe Dreamweaver
  • Latest Version of WordPress Blogging Software
  • Local Host Server like Xaamp or Maamp or Remote Host like some Web Hosting Service

Procedure

  • First step would be installing Local Host Server on your machine. Please follow the link to learn how to do that because it would be just a waste of time to type that same information all over again.
  • Second would be installing Dreamweaver on your system.
  • Head over to Adobe’s website and click on Try button on the right sidebar to try out Dreamweaver for a whole month and if you think that it is worth the money (it totally is) then you must purchase it.
  • Next step would be to download and extract the WordPress Software on you machine. If you followed the link about installing Local Host Server then you are ready to proceed to the final step.
  • Final step is to work with Dreamweaver and connect it with either your Local Host or Remote Host

Connecting Dreamweaver and Making the WordPress Blog appear in Dreamweaver

  • Click on the Dw Icon to open Dreamweaver.
  • You will see a welcome screen as shown in the image below. You don’t have to click on anything on that screen.

Proceed to the Menu Bar and click on Site>New Site and you will see the settings window where we are going to declare our settings for either Local

New Site
New Site | Source
  • Enter the name of your website. This Site Name isn’t important to connect but it should be something resembling to your website so that you can tell the difference if you have multiple blogs setup.
  • Local site folder is where your files will be kept for both cases, i.e. Local Host Server and Remote Host Server.
  • In case of Local Host, you need to locate your Xaamp/htdocs/ (and the folder where you pasted your WordPress files (visit the link that I said in first step)). If you have created a folder inside htdocs (say I/(wordpress files), then you need to type like this: c:\xampp\htdocs\i\.
  • If you did not create any folder inside htdocs then you can leave the location to: c:\xampp\htdocs\.
  • In case of a remote host. It is even easier because you don’t have to locate any folder. Just create a new folder according to your website’s name to find it easily and choose a location like C:, D:, E:, etc. according to your convenience and type the address in that field.
  • We will get the files from our Remote Server later on to populate that Empty Folder.

After entering site name and folder, you need to define Servers.

  • Click on the Add button and we will fill out the details of our Server.

Enter Site Details
Enter Site Details
  • In case of Local Host, you need to fill out a server name. Again, it is up to your convenience, name is something relative to the blog.
  • Since we are connecting with our Local Host, we need to select Local Network in Connect Using drop-down menu.
  • In the server folder, you need to locate your folder where you pasted WordPress’s file. In my case, that would be c:\xampp\htdocs\i\
  • In Web URL, you need to paste the URL by which you can successful visit your Locally Hosted Blog from a web browser like Firefox, Internet Explorer, Opera, Chrome, Safari, etc. The best way is to actually visit your blog and paste the URL here rather than typing. In my case I can visit my blog from Firefox by typing http://localhost/i/ and that is what I have pasted in the given field.

Click thumbnail to view full-size
Add Server
Add Server
Add Server

In case of Remote Host like Web Hosting Sites, you need to fill all the information required to connect with your web server.

  • The image will help with the settings but I am going to explain them anyway.
  • Name your server relevant to your blog.
  • Connect Using: FTP this time because we can only connect to our Remote Host via FTP unless otherwise mentioned from our Web Host. You must have used Filezilla or some other FTP Client to transfer files between your Remote Host and your computer like images, videos, etc.
  • FTP address can be the IP Address that you get in your email when creating a web hosting account successfully. However, it will more convenient and easier to just type your domain name and it will automatically fetch the FTP IP Address.
  • Use 8080 as Port address unless otherwise mentioned in your Welcome Email by your Remote Host.
  • Type the Username that you use to connect to your Web Host’s cPanel. Remember that this Username is not WordPress’s username.
  • Type the cPanel’s password. (This is also not the password of WordPress admin) and check Save box if you don’t want to enter login details every time Dreamweaver wants to access your account.
  • Click on Test to test your details and if they are correct (and I am sure that they are) then you will be greeted with a Successful Connection message.
  • The Advanced Settings are same as Local Host.
  • In the Root Directory, you have to locate the folder where you have pasted those WordPress files. Normally, it is “/public_html/” (without quotes). However, if you have more than one site or you have created a folder for your Sub-Domain, then you may want to add the name of it so that Dreamweaver can properly locate those files. For example if ITechN Blog had a sub domain like webdesigns.itechn.com (just an example) and the folder was created inside public_html/, then the Root Directory will be filled like: /public_html/webdesigns.
  • That is pretty much it for the Root Host settings as well. You don’t have to change anything else. Just hit save and we are ready to go with WordPress and Dreamweaver together.

Accessing your WordPress Blog

  • It is just a click away. After you have added the site. You can visit its contents via Files section of Dreamweaver’s Sidebar.
  • I have highlighted that part in the image for easy view.

  • Click on the created Server (whether Local Host or Remote Host) and Dreamweaver will load the files for it after some calculations.
  • In my case, I have created both types of my real website i.e. ITECHN.com and you can see that I have named them according to quickly understand which one is based on Local Host and which one is connected to Remote Host.
  • If it is done populating the area with your WordPress’s files and folders, you know that everything went right and you can now access your blog.
  • Our job is to open Index.php, which will call all the other files that are internally connected to form your WordPress Blog.
  • Double Click to Open Index.php.
  • You will see that nothing gets loaded. Dreamweaver will tell you to Discover the Server and you have to select to let it discover the server automatically based on our settings.

  • Even when you do that, you will see that your blog is still not there. Instead, Dreamweaver will highlight a yellow line with a warning that “An Unknown error occurred while discovering dynamically-related files. Retry”.

  • You don’t have to panic and think that all of this was a waste of time. You see, dynamically related files were not called because our Dreamweaver isn’t setup to work that way by default.
  • You have to click Live View to visit your blog in Live Form and then you can go crazy with the editing and what not!
  • I have highlighted live view and I am sure that if you followed the steps carefully, then you should see your blog.
  • Notice that the warning changed. But you don’t have to worry about that. Your blog will show up despite that warning.
  • Please note that if you see a warning that Error establishing a database connection, then you might not have started PHP and MySql from Xaamp or Maamp control panel.
  • Since I already covered that in that link, I don’t think that I need to tell you those steps all over again. Please refer to that link and you will have no problem.

At Last

Our work is really done. Now you have connected WordPress and Dreamweaver. You can inspect elements individually and change them with the help of this amazing software.

The best part about all of this is, that you can change your entire site without letting your visitors see anything and when you are satisfied with those changes, you can just Put all files back to your Remote Host (because that’s what visitors see and not Local Host) and surprise them with a completely new look and feel of your blog.

I think that I covered every step carefully. However, if you still face problems, then feel free to contact me via comment section below and I will be glad to help you out.

Comments

    0 of 8192 characters used
    Post Comment

    No comments yet.

    Click to Rate This Article