Unofficial DesktopServer and Dreamweaver 2017 Guide

Many subscribers to the Adobe Creative Suite still use Dreamweaver and it’s unprecedented features that no other commercial or open source tool has; namely the ability to sense related files, visually reverse engineer source files, and preview dynamic content via it’s WYSIWYG (what you see is what you get) “Live/Design View” mode. In fact, it’s the only tool that allows serious designers and developers to visually track a web page’s appearance to it’s original server side source code; not just the “view source” of the HTML output. Coupled with it’s CSS Designer navigation tools and editor, Dreamweaver is a unique design tool for theme editors and developers alike.

Simple Startup

For the WordPress developer and designer the process is streamlined and automated via ServerPress’ DesktopServer when using the Dreamweaver Support plugin. To activate the plugin, ensure that a checkmark is beside the Dreamweaver Support option in DesktopServer’s services screen (see figure 1). With the plugin activated in DesktopServer, Dreamweaver will render the template page when viewing WordPress’ template page structure directly in Dreamweaver. Most template page files will render automatically in Dreamweaver’s Live view.

Figure 1 – Dreamweaver Support

DesktopServer will automatically create a Dreamweaver compatible site definition file when creating a new website, copying an existing website or importing a website archive (zip file). You can find the file in your website’s folder with the file name of “dreamweaver.ste”. (i.e. ../Websites/www.example.dev/dreamweaver.ste). This will greatly simplify the configuration of Dreamweaver to work with your development WordPress website.

If you haven’t created a website in DesktopServer yet, simply follow the directions on ServerPress’ site for Getting Started with DesktopServer. Next, locate the dreamweaver.ste file in Finder (Mac) or Explorer (Windows) and double-click the file. Dreamweaver should start and automatically import your site and display the Manage Sites window or you can alternatively import the dreamweaver.ste file using Deamweaver’s Site -> Manage Sites pull down menu, followed by clicking the Import Site button (see figure 2 step 1). You may delete the dreamweaver.ste file after importing it into Dreamweaver. The imported site definition file will automatically configure Dreamweaver to use DesktopServer as a testing server, pre-configured for a MySQL and PHP setup and to support Dreamweaver’s Live View mode.

Figure 2 – Import Sites

Using Dreamweaver and WordPress

Having both DesktopServer and Dreamweaver properly configured for your WordPress website will allow you to jump right into theme design and editing. Use the Files window/panel in Dreamweaver to select the WordPress website you wish to edit (figure 3 step 1). In Dreamweaver 2017’s default workspace, you can find the panel on the right hand side with a drop down to select from a list of sites. Select the site from the drop down combobox. Navigate the file tree (see figure 3 step 2) and open the site’s root index.php file; this will render in Dreamweaver with a preview of your site as a visitor would see it. Be sure to select Split or Design and Live as shown on the toolbar (figure 3 step 3). Lastly, you can dismiss the “dynamically-related files” message as DesktopServer with Dreamweaver Support will automatically display all related files (figure 3 step 4).

Figure 3 – Split View

Using Dreamweaver with DesktopServer together provides the convenience feature of viewing your theme files visually while navigating their corresponding PHP code . For instance, you can open your theme’s header file directly by navigating to your active theme’s header.php file (see figure 4 step 1). It’s important to note that you open the active theme’s folder. If you would like to work with a different theme, be sure to activate it first using WordPress’ admin interface. The header.php file should be located in a sub-folder of your active theme inside the wp-content/themes folder path (figure 4 step 1). In a typical web server, opening your theme files directly would produce an error and Dreamweaver’s Live view would fail to deliver anything useful. DesktopServer compensates by sensing Dreamweaver’s Live view mode and attempts to apply the theme’s style.css rules to the activated theme’s files dynamically as well as attempting to load various WordPress modules to assist you with design time feedback. While just an approximation, this can greatly reduce the amount of task switching you perform while editing your site’s theme. Simply keep in mind that your CSS rules are influenced by element parent and child hierarchies; so not everything may render unless you address the element directly to apply a given CSS style. For instance, the sidebar.php file may not display a background color because it is intended to be embedded inside another file like page.php that does have a background defined. Alternatively, you can open the page.php file, single.php, or your theme’s index.php file and see how the theme is rendered. Another convenience feature is the ability to click various elements in Split view’s Design View area which will cause Dreamweaver to position the current code editing cursor in Code view as close as possible to the corresponding PHP server side source code (not just HTML) that produces the actual output (see figure 4 steps 2 and 3). Lastly, Dreamweaver includes a DOM inspector panel that highlights the element hierarchy of the selected element (figure 4 step 4).

Figure 4 – Header Element

This can help you learn various WordPress template tags and their HTML output when passed different parameters and isolate areas of interest. Please note that themes that adhere to the original WordPress’ template page structure work best with DesktopServer’s Dreamweaver Support plugin. Logically organized themes such as Twenty Ten through Twenty Fifteen work well with clearly defined header, footer, sidebar, and various page template files; these themes are particularly well suited for WordPress based developers to modify and customize for a client’s specific needs. However, not all files in a given theme may be of interest to the designer, nor may they render correctly (or at all) in Design view.

Styling a WordPress Theme

For our example, let’s use Dreamweaver to modify the header title in WordPress’ latest Twenty Seventeen default theme. Start by using Dreamweaver’s Files panel and open the header template file from the folder-file path at wp-content/themes/twentyseventeen/header.php (figure 4 step 1). Note that Dreamweaver will automatically display tabs to pertinent files that encompass the header’s appearance; namely style.css in addition to the header.php source code. Dreamweaver should open the header.php file in Split and Live view. Next, click the white header title EXAMPLE (figure 4 step 2). We will change the EXAMPLE title from white to red using Dreamweaver’s CSS Design panel by clicking the CSS Designer tab (figure 5 step 1). With the title selected, Dreamweaver will display the existing selectors for the element (figure 5 step 2). Be sure to click the selector that pertains to the title’s color. Right clicking (Ctrl+Click on Mac) the selector will give the popup menu option to “Go to Code”. Dreamweaver will automatically navigate to the existing CSS rules in the related style.css file (figure 5 step 3). You can use Dreamweaver’s additional design panels to modify the CSS attributes or edit them in the related style.css file in Dreamweaver’s edit code area. Change the site title’s anchor rule from white to red by typing in the style.css code area or using the design panel. Note that the style.css file with display an asterisk indicating that the file has been modified. Simply saving your file (Ctrl+S on Windows or Command+S on Mac) will update the Live view and change the appearance of the EXAMPLE title from white to red (figure 5 step 4).

The newest WordPress theme “Twenty Seventeen” is made up of more than just fundamental template files; but rather an excessive number of include files that depart from simplified themes of the past. Twenty Seventeen attempts to fulfill flexibility via code based includes which may appeal to some developers but may seem excessive and awkward to navigate. Visual feedback does not apply for Twenty Seventeen’s extraneous includes. For the default demonstration, the screenshots below depict Twenty Seventeen but designers creating a solution using WordPress may find the unintuitive header based splash page akin to old fashioned Flash intros; unnecessary and cumbersome. For designers and developers wishing to customize clean and concise template page structures, we would recommend the freely available Twenty Ten through Twenty Fifteen themes that you can download and activate using WordPress’ theme admin panel.

Figure 5 – CSS Designer

The actual content that is displayed in Dreamweaver’s Live View is determined by the currently selected front page. You can change the content output to test different post scenarios by using WordPress’ admin menu under Settings -> Reading. Select a different front page and that content will be displayed in Dreamweaver’s Live View rendering. The currently selected content can also influence your CSS rules as WordPress’ template tags are often used to output a value for the body or parent element IDs and class tags in HTML (often the case with the post_class template tag). Be sure to set the front page accordingly to avoid confusion. I found this to be especially true when viewing a single post as the front page but loading a multi-column page template in Dreamweaver (and vice versa). Most everything else rendered accurately, but margins abide by the actual output WordPress produces and any CSS rule that binds to the post_class template tag can change the page’s appearance. Thankfully, you can verify what class and id tags are present along with all output by quickly switching Code view into “Live Code” mode; this is the equivalent of using a browser’s ‘view source’. Click on the View -> Live Code pull down menu (figure 6 step 1). Dreamweaver’s Code editor area will switch from the server side PHP code to the HTML output code and place the cursor on any selected element (figure 6 step 2).

Figure 6 – Live Code

Concluding Notes

You can make dozens of changes to customize and craft your own personalized theme files and view the results quickly with this setup. Development is easier now that you have your WordPress website loaded locally inside Dreamweaver and can leverage Dreamweaver’s code navigation and design panels. Now that you have a sample of how to manipulate theme template pages, there are a couple of things to keep in mind:

  • Dreamweaver does not understand WordPress’ ability to mask URLs with permalinks. Should issues arise, it’s best to set the permalink via WordPress’ admin menu for Settings -> Permalinks to “Plain” or “Default”.
  • Dreamweaver’s Live View mode is supported for Parent themes only. Child themes are not supported or may be inhibited.

DesktopServer’s Dreamweaver Support plugin allows you to take your WordPress designs further by unleashing the power of Dreamweaver’s integrated development environment. Now you can customize the look and feel of your WordPress powered websites and view the results even faster.

Leave a Reply

Your email address will not be published. Required fields are marked *