Dreamweaver and CMS

Integrated CMS support in Dreamweaver

The new Adobe Dreamweaver CS5 comes with some very useful functions. One of them is the option to redesign your Content Management System web sites through the integrated tools. If you are using a CMS like Joomla, WordPress and Drupal you can have a great benefit from the corresponding functionality.

In the current tutorial we will give an example with a fresh WordPress installation.

Dreamweaver and Wordpress

In order to use the integrated CMS support in the design of your CMS web sites you should open your DreamWeaver software and start a new web site project.

Navigate to Site->New Site. Add a new site, set the remote server configuration and enter the FTP details that will allow you to connect to your remote web site server.

New Site FTP details

You can set the same server as a testing one.

Set testing server

Then download all the files of your web site.

Get files from remote server

Once the download is completed you will see a list with the web site files. If the files are not shown turn on the option from Windows->Files.

You can select the index.php file and click on the Live View button.

Live View

The file changes will be updated and your web site will be shown in the Design panel. In the Code panel you will see the file’s source code. Selecting the Split option allows you to see both the panes in the same window.

You will see a notice that provides you with the option to list all the files that are dynamically-related to index.php. Click on the Discover link to visualize the list.

dynamically related files

The Filter Related Files icon allows you to set the extensions which will be visualized in the corresponding list and set custom filters.

Filter Related Files

Now it is time to select specific code hints for your CMS. Navigate to Site->Site-Specific Code Hints and pick the CMS from the corresponding drop-down menu.

Site-Specific Code Hints

In this section you can remove files and folders from being scanned, allow recursive scan, import predefined structure, create a new one, rename the existing or delete it.

Next, you can open a file, for example, the footer.php file of your template and edit its code.

The code hinting will allow you to use the specific WordPress syntax. You can trigger it by pressing the Ctrl+Space bar keys combination.

WordPress code hinting

Once you are ready with the modifications save the changes.

You can check the following video tutorial for more details on how to use the specific code hints for your CMS:

The SiteGround.com video content presented here requires a more recent version of the Adobe Flash Player. If you are you using a browser with JavaScript disabled please enable it now. Otherwise, please update your version of the free Flash Player by downloading here.

Dreamweaver is a trademark of Adobe Systems Inc. SiteGround is not affiliated with or endorsed by the Dreamweaver Project or its trademark owners.