DesktopServer Premium edition version 3.3 now includes extended support for Adobe Dreamweaver’s Live View. No other web server provides extended Live View support directly for WordPress template files in Dreamweaver. At best, you can only use WordPress with Dreamweaver’s Live View on just the index.php file in your WordPress’ site root folder. But DesktopServer takes Live View further by sensing Dreamweaver’s built in browser. DesktopServer directly renders WordPress template files (and their include file fragments) for more visual feedback and to assist in faster theme design & development. Originally introduced in Dreamweaver CS4, Live View (formerly Live Data in CS3) provides a more modern embedded web browser. Dreamweaver optimizes web development by allowing designers to work on their website files in Code View while seeing a real Live View of their site in Dreamweaver’s Design View window. For an abridged overview, check out the video below.
The Live View feature is a much-needed update to Dreamweaver’s original Live Data mode in Dreamweaver CS3. Although DesktopServer’s extended features will also work with Dreamweaver CS3′s older, dated embedded browser (aka Live Data mode), WordPress designers will benefit the most from the latest version of Dreamweaver CS5.5 which includes a cutting edge WebKit based browser rendering engine as well as support for multi-monitor workspaces. In this guide, I’ll show you how to streamline your design environment for working with Dreamweaver and WordPress.
Enable Dreamweaver Support
When you start DesktopServer Premium version 3.3 for the first time or after selecting the first option to “Stop or restart web and database services”, you will see a new checkbox that is titled “Enable Dreamweaver support”. When turned on, 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 already have your website defined, you can manually create a site definition for your existing website by seeing my post titled, How to Add a Dreamweaver Site Definition for a Website.
If you haven’t created a website yet, simply follow the directions in the post 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 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.
Enable Code Hints
Adobe Dreamweaver CS5 now includes PHP code hints optimized specifically for WordPress. To enable this feature, all you need to do is enable the Dreamweaver code hints configuration file. Just select the pull down menu Site ? Site-Specific Code Hints to bring up the Site-Specific Code Hints dialog box. You will see a drop down combo box labeled “Structure” from which you can select the WordPress option. Ensure that the site root is selected (as shown in the image on the left) and click the OK button. Dreamweaver will automatically scan your site and provide code hints for clue insights into WordPress’ Template Tag API and proper syntax. To use code hints, simply begin typing a few letters of the WordPress template tag inside a valid PHP block followed by pressing Ctrl+Space bar. For example, with the cursor position right after the underscore in the code block
<?php get_ ?> press the Ctrl+space bar key combo and a popup list will appear containing a matching set of WordPress template tags that begin with “get_”, such as get_header, etc. Code hints can eliminate a lot of guess-work and speed your development process by providing an instant reference without having to look up template tag syntax on the web.
Using Dreamweaver and WordPress
Now that Dreamweaver is properly configured, you can jump right into design and editing. Use the File window/panel in Dreamweaver to select the WordPress website you wish to edit. In Dreamweaver CS5.5′s default workspace, you can find the panel in the lower left hand side with a drop down to select from a list of sites. Select the site you have just imported and navigate the file tree (click the thumbnail to the left and see #1). To view your site as a visitor would, go to the root of your website and locate the index.php file. There are many index.php files in a typical WordPress installation, but we are concerned with the one that lives in the root of your website. It will be in the same folder as your wp-config.php file. Open the file and switch your editor to Split or Design view mode using the toolbar. Next click the Live View button and you should see your website displayed in Dreamweaver’s Design View area (see #2 in the image for the Design View area). Unlike a real web browser, the hyperlinks in Design View are disabled and the render is only an estimation of what a visitor would see. Use the Preview icon (the earth globe icon) on the toolbar to launch your web browser and see your site in an actual web browser.
DesktopServer’s real power is the convenience feature of viewing your theme files directly [and] …using Dreamweaver’s Inspect toolbar button 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 (see #3 in the thumbnail). Especially powerful is using Dreamweaver’s Inspect toolbar button 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 clicking the refresh icon on the toolbar. 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 → Style Rendering → Design-time 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.