Join Joseph Lowery for an in-depth discussion in this video Establishing a Dreamweaver site, part of Dreamweaver and WordPress: Core Concepts.
- View Offline
To make sure your WordPress Dreamweaver workflow is smooth you'll need to set up your Dreamweaver site with the appropriate testing server. Dreamweaver's New Site dialog box makes it very straightforward. So, there are a couple of ways you can open the Site Setup dialog box. You can either go to the Site menu up here and choose New Site, or if you have the Welcome Screen open like I do, choose Dreamweaver Site under the Create New column. Now, if you're just setting up a standard HTML site, all you would need to do is to enter the two values on this initial screen. We'll have to do a bit more.
But let's start there by naming our site. I'm going to call this one Roux Academy. Of course, that's just a name that's going to appear within Dreamweaver. So you do want to name it something that's easy to recognize. So now we're going to choose the Local Site Folder. I'll click the Folder icon. Then browse to my htdocs folder which is the local site root, and select the roux_academy folder. Now, be careful that you don't want to choose blog because we want to get the entire site, not just the blog portion of it.
So, I click Choose, and there is the path to our local site root folder. Now that I have that identified, all I need to do is to add a testing server. So, I'll click on servers in the left column. You can add as many servers as you like. To define a server, click on the Add button. We'll start the process by entering in a Server Name in the top field. We'll call this Testing. We want to connect using, not FTP, but Local/Network. That will change what you see on the screen.
All we have to do now is select the Server Folder. That's going to be the exact same folder we've been working with. So again, I'll go to htdocs > roux_academy, and click Choose. Now, I want to enter in my local web URL. So, I'll put in after the http://localhost/roux_academy. You can put in the trailing slash or not. If you don't, Dreamweaver will put it in for you. Let's switch over to the Advanced Tab.
I'm going to choose my Server Model from the list here down at the bottom. I'm going to select PHP MySQL of course, and click Save. There you see our server listed in the Server panel. Dreamweaver has a tendency to always assume that the first server defined is a Remote server. We want to switch that to Testing. So, clear the check box under the Remote column, and click the check box under Testing. If you don't do this, Dreamweaver will not recognize the server when you try to access it during live view. Let's click Save.
Once Dreamweaver updates the site cache, we can see all of our files in the Files panel over on the right, including the blog folder. Let's go ahead and open up that blog folder, and I will expand the listings here so we can see the various names. Then I'm going to double-click on index.php, the very first file listed here. Let me go ahead and go into Split view. You may be a little surprised if this is the first time you've ever seen a dynamically related file, to notice that Design view is completely blank.
And what's more over in Code view there's very little code. That's because of the way that WordPress constructs its pages dynamically. So, let's take a look at how this page might actually look in the browser by switching to Live view. I'll go to design. Here's the same page that we saw in the browser with yet a different image. Let me go ahead and click Refresh to see how that random header image functionality is still working, and it is. There's the rest of our page.
So, it's the exact same page that we see in the browser. Now, your WordPress site is set up within Dreamweaver, and it's ready to be customized.
- Using the Dynamically-Related Files feature in Dreamweaver to design WordPress pages
- Applying WordPress themes
- Customizing themes
- Adding Spry widgets
- Adding WordPress dynamic data
- Populating the WordPress database
- Publishing a WordPress site