Dreamweaver Support

Using Dreamweaver Support

DesktopServer will perform extended rendering when viewing WordPress template pages directly in Dreamweaver. That is to say, template page files will render in Live View that exist in your wp-content/themes/[active theme] directory where [active theme] is your currently selected and activated WordPress theme folder. 

DesktopServer will also 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 named as “dreamweaver.ste”. (i.e. ../Websites/www.example.dev/dreamweaver.ste). 

When exporting your website, DesktopServer will omit this file so you won’t have to worry about security risks (as the file might pose a security risk by revealing your server’s file paths to potential hackers). If you transfer your files to your server by another means, be sure to omit this file or simply delete it after importing your site into Dreamweaver as it isn’t needed after import.

If you haven’t created a website yet, simply follow the directions in the post Getting Started with DesktopServer and Installing Dreamweaver Support. 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 alternatively, you can import it using Deamweaver’s Site. Manage Sites pull down menu, followed by clicking the Import button. You can 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. From the Manage Sites window, you can click the Edit button to view the configuration options or define additional servers to sync with.

Using Dreamweaver and WordPress
Now that Dreamweaver is properly configured, you can jump right into design and editing.

DesktopServer’s real power is the convenience feature of viewing your theme files directly [and] …using Dreamweaver’s Inspect function to analyze elements and their corresponding code.

DesktopServer’s real power is the convenience feature of viewing your theme files directly. For instance, you can open your theme’s header file directly by navigating to your active theme’s header.php file. The file would be located in a sub-folder of your active theme in the wp-content/themes folder path. In a typical web server, opening your theme files directly would produce an error and Live View would fail to deliver anything useful. DesktopServer compensates by acknowledging Live View and attempts to apply your style.css file to your template files dynamically as well as attempting to load various WordPress modules to assist you with design time feedback. While not perfect, this can greatly reduce the amount of task switching you perform while editing your site. 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 the file itself is an include file intended to be embedded inside another file like page.php. Alternatively, you can open the page.php file, single.php, or your theme’s index.php file and see how content 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 cursor in Code View as close as possible to the code that produces the actual output. Especially powerful is using Dreamweaver’s Inspect function to highlight elements and analyze their corresponding code. This can help you learn what various WordPress template tags output when passed different parameters. As well as isolate and highlight problems or areas of interest. You can view most changes quickly by simply clicking in the Design View area with Live View turned on or by saving your file (Ctrl+S on Windows or Command+S on Mac) and Right-clicking > Refresh or pressing F5 on the Live View pane. To enable Dreamweaver’s native CSS panels, you may need to attach the style.css file as a Design Time style sheet. Design-Time style sheets only apply while you are working in the document. Place your cursor in Code View and use the pull-down menu View > Related Files and selecting style.css to attach your theme’s style.css file.

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 doing a ‘view source’ using Dreamweaver’s Live Code button.

An alert message maybe displayed about dynamically related files not resolving. This is because Dreamweaver doesn’t understand WordPress’ ability to mask URLs with permalinks. You can safely dismiss this message or switch permalinks in WordPress’ admin menu via Settings > Permalinks and selecting the default option.

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 faster now that you have your WordPress website loaded locally inside Dreamweaver. This guide just scratches the surface to help you get started with a streamlined design and development environment. DesktopServer Premium edition 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.