This tutorial shows step by step what you need to do if you want to start WordPress theme editing with Dreamweaver.
Getting Dreamweaver set up in such a way that you can edit a WordPress site can be a real challenge.
We will also take a look at several issues that often crop up when editing WordPress theme files in Dreamweaver.
Testing server for WordPress in Dreamweaver
We’ll set up a testing server allowing you to work locally on the development of your WordPress themes before uploading your finished theme to a (hosting) server.
Step 1: create a new site
We begin by starting a new site in Dreamweaver (Site > New Site).
This tutorial doesn’t cover how to set up WordPress locally. If you haven’t done that yet my suggestion would be to visit Bitnami for one of their free easy installer options.
The screen below will open
A. Site Name.
This can be any name you choose and is unrelated to your WordPress install. Usually a Site Name is used that represents your current WordPress project.
B. Site name for Local Site Folder
Inserting the correct name for the Local Site Folder requires a bit of an explanation. I have read explanations where they tell you that it´s the root folder or the folder that contains the file ‘index.php’. Since a WordPress install results in several ‘index.php’ files in multiple folders this can easily result in misunderstandings.
The correct Local Site Folder is the folder that contains the files ‘config.php’ and ‘.htaccess’, and the folders ‘wp-admin’, ‘wp-content’. Look for these files and folders inside your WordPress install and copy its location into Local Site Folder. For instance I created a folder named ‘WPmulti’ for the WordPress install (with Bitnami; see posts mentioned above). This means that my Local Site Folder is
The Local Site Folder should not be confused with the folder for your WordPress theme. Later on you will see that loading the file ‘index.php’ in your root folder will result in the loading of the theme you activated.
Step 2: Testing server
A. Click on Server (top left)
To add a new server click on the + sign
First we’ll insert the required info in the Basic panel:
These are the things you need to insert:
- A Server Name (Same as the Site Name)
- Choose Local/Network
- The Server Folder should be the same as your Local Site Folder
- The Web URL should be the same as the domain you inserted during the WordPress install
Next we’ll fill out the Advanced panel:
- Choose PhP MySQL for the Server Model
- Click on Save
- In the screen below check the box for Testing and click on save.
Dreamweaver will now load the WordPress files. When this is done you will see the WordPress files and folders appear in the Files panel.
Editing a WordPress theme in Dreamweaver
Now that we have a testing server and the WordPress files have been loaded, we can start editing a WordPress theme.
Unfortunately this isn’t as straightforward as you might expect. We will look into several peculiarities of Dreamweaver when it comes to editing WordPress themes.
The headings below represent the issue that has to be solved.
Click on Split(view); if it isn’t already set to Split(view).
To run WordPress in Dreamweaver you double click on the file ‘index.php’, which you can see in the Files panel. Take care to choose the ‘index.php’ file from the root folder as shown in the last image above.
There is a good chance that you will not like what you see. Some or all of the issues mentioned below will probably occur:
Problem 1: the Design panel stays empty
If you do not see anything in the design panel (but you do see code starting with
?php in the code panel) click on Live View. You should now see the home page of your WordPress theme.
You can only edit WordPress files when Live View is activated in Dreamweaver.
Problem 2: Dynamically-related files could not be resolved
You might also see an error message telling you that “Dynamically-related files could not be resolved because the site definition is not correct for this server.” And asking you to choose between Retry and Setup.
Usually this has nothing to do with the setup of your testing server (if you followed the steps above) and choosing Retry will probably result in the same message.
To solve this you need to run WordPress (outside of Dreamweaver). Insert the URL – needed to log in to your local WordPress setup (e.g. http://mydomain.com/wp-admin) – into the address field of your browser. After you have logged in you need to go to Permalinks in the WordPress Dashboard:
Check if the Permalinks are set to default. If not choose the Default option and save the changes to your settings.
Return to Dreamweaver and click Retry. The error message should now disappear. Dreamweaver cannot handle the custom URL structure for permalinks that WordPress offers. My advice is to use the default setting for permalinks during the development stage of your WordPress theme and change them back to custom permalinks when you go live on a (hosting) server.
Problem 3: Links do not work
When you click on one of the links in your WordPress theme (e.g. the title of a post) nothing happens.
To solve this you need to hold Ctrl while clicking on a link. You can also set the Live View Option “Follow Links Continuously”. That way you can simply click on a link to follow it. To do this you need to go to the Live View Options (see colored icon in image below):
Click on this icon and choose Follow Links Continuously.
Problem 4: Code Panel doesn’t show the correct file
If you look at the code in the Code panel you will see that this is not the code for your WordPress theme. It displays the code from the file ‘index.php’ (located in your WordPress root directory).
WordPress uses the “index.[hp” file to load the currently activated theme. So how do you go about it to see the code for a theme file?
You might be tempted to open a theme file (e.g. ‘header.php’ or ‘footer.php’) by double clicking on its name inside the Files panel. Do not do that! It will lead to the error message: ‘Dynamically-related files could not be resolved because of an internal server error’. And this time it cannot be caused by the setting of the permalinks in WordPress because we already changed this setting to default.
Instead use the Filter for related files. You will see the symbol (a funnel) for this filter to the right of the related files (see below):
Clicking on the Filter symbol will allow you to filter the files based on their extension (see below)
or (better yet if you are looking for a specific file) use the custom filter (see below).
Insert the name of the file you want to edit (e.g. ‘header.php’) and click on OK. To the right of ‘source code’ you will now only see the name of the file you selected. Double click on its name to open it.
You will then see the home page displayed in the Design panel and the code for the file you want to edit in the Code panel.
If you want to know some more about the use of Dreamweaver when editing WordPress theme files I recommend this Adobe tutorial by Brian Wood (you can skip part 2 of his tutorial because your testing server has already been set up).
Editing a WordPress theme with Dreamweaver