Unofficial DesktopServer and Coda Guide

Coda by Panic is a powerful IDE (integrated development environment) that features a built-in, pixel perfect, WYSIWYG (what you see is what you get) preview window. Combined with it’s multithreaded file transfer system, Coda makes for one slick tool for web developers. DesktopServer includes extended support via it’s Coda Support plugin. You can develop WordPress websites in Coda with enhanced features such as WYSIWYG split view editing on template files for live edits and instant feedback.

Getting Started

Configuring DesktopServer for extended Coda support begins with simply check marking the Coda Support plugin in DesktopServer. Use DesktopServer’s first option to start/restart services (see figure 1). With the plugin activated in DesktopServer, Coda will render template pages when viewing WordPress’ template page structure directly in Coda’s preview window. Most template page files will render automatically inside Coda.

Figure 1 – Coda Support

If you haven’t created a website in DesktopServer yet, simply follow the directions on ServerPress’ site for Getting Started with DesktopServer. Next, you’ll want to configure Coda with a site definition by adding a new site to Coda. Begin by creating a new site definition in Coda using the plus symbol in the lower left hand corner of Coda’s startup screen, or via the pull down menu for File -> Sites -> New Site… (see figure 2 step 1). A dialog box will appear and you simply need to fill out the required information. Type a nickname to refer to the site, we recommend the same name as the development domain name, i.e. www.example.dev (figure 2 step 2), followed by the Remote and Local URL fields, i.e. http://www.example.dev (figure 2 step 3 and 4). Ensure that the remote root is empty (figure 2 step 5). Most importantly, you will need to identify the site’s root; the same location you created your site using DesktopServer. You can use the “Set…” button to locate the given folder, i.e. ../Documents/Website/www.example.dev (figure 2 step 6). Lastly, click the save button and Coda will begin creating a preview thumbnail of your site (see figure 2 step 7).

Figure 2 – Add New Site

Using Coda and WordPress

Having both DesktopServer and Coda properly configured for your WordPress website will allow you to jump right into theme design and editing. To begin editing your site’s files, double click your newly created site definition as shown by the site’s preview thumbnail (figure 2 step 7). The site should open displaying either a new blank document or a list of files; ensure you see the file list by clicking the Files icon on the toolbar or using the pull down menu for View -> Files (Command + 2). You may see a message indicating “Server Disconnected”; this can be safely ignored as there is no remote server when using DesktopServer. When using DesktopServer, all files/everything is on your machine and can be accessed locally and edited quickly with changes taking an immediate effect. There is no need to upload/download files to a remote server; the server is your local computer. An Internet connection is also not required. Click the local icon at the bottom of the Coda application to maximize your file listing space (figure 3 step 2).

Next, lets open the index.php file to preview it; double click the index.php file in the site root (figure 3 step 3). You should see PHP text source code. To see a preview of what a website visitor would see, click the Preview button on the toolbar next to the index.php file name,  as shown in figure 4 step 1.

Figure 3 – Open Index

After clicking Preview, Coda will render your site in a browser-like view window. There is no need to open a web browser. You can easily view the HTML output of the document or use the web inspector to look at various elements by clicking the Web Inspector or Source buttons at the bottom/left of the Preview window (figure 4 step 2).

Figure 4 – Preview

You may return to the PHP source code by simply clicking the index.php filename to the left of the Preview button you used prior. This makes it easy to change actual source code, save changes (Command + S) and click the Preview button again to instantly see results. Toggling back and forth between source code changes and Preview does not require clicking a refresh button; just be sure to save your changes.

Editing a WordPress Theme

Using Coda with DesktopServer together provides the convenience feature of previewing 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 theme’s header.php file; click on the File icon (or press Command + 2) and open the default header.php file at:

../wp-content/themes/twentyseventeen/header.php

You can then click the familiar Preview button (figure 5 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. In a typical web server, opening your theme files directly would produce an error and Coda’s Preview window would fail to deliver anything useful. DesktopServer compensates by sensing Coda’s Preview window 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 and template pages. Simply keep in mind that your CSS rules are influenced by element parent and child hierarchies; so not everything may render or apply to the element in a given theme file. 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 may 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.

To make things even faster and easier, Coda also offers the ability to view your Preview while simultaneously seeing your file’s source code. Simply click the Split Section icon as shown in figure 5 step 2, followed by clicking the Document icon. A code editor will appear that will allow you to see and modify the code for the given Preview window (figure 5 step 3). Furthermore, any changes you make will dynamically update the Preview window without having to click the refresh icon. Just be sure to save your work (Command + S) and within a few seconds, Coda will sense the changes and automatically update the Preview window to reflect your code changes.

Figure 5 – Split View

Concluding Notes

Coda isn’t just a slick text editor; it’s a helpful integrated development environment. 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 Coda. Now that you have a sample of how to manipulate theme template pages with ease, there are a couple of things to keep in mind:

  • Previewing theme files in Coda does not support WordPress’ ability to mask URLs with permalinks. Should issues arise during development, it’s best to set the permalink via WordPress’ admin menu for Settings -> Permalinks to “Plain” or “Default”.
  • Theme approximation previews in Coda is supported for Parent themes only. Child themes are not supported or may not render at all.

DesktopServer’s Coda Support plugin allows you to accelerate your WordPress design and development by unleashing the power of Coda’s integrated development environment. You can customize the look and feel of your WordPress powered websites and view the results in a fast and more efficient manner with DesktopServer and Coda.

Leave a Reply

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