Coda by Panic bills itself to be “one-window web development.”
I have been a web developer (or at least playing with code) for the past six or seven years, and purchased Coda about a year ago. It took me almost this long to realize the beauty that lies within the code editor when you truly use it as a one-window web development system.
Today, I’m going to walk you through setting up your next WordPress site so you can develop locally, deploy to your live server, and maintain the code base and providing site maintenance. All in Coda. So let’s get started.
Developing a WordPress Website Locally
If you’re new to developing WordPress websites, you’ll definitely want to get up to date on WAMP or MAMP, which stands for Windows/Mac, Apache, MySQL and PHP. Basically, it is everything you need to develop a dynamic website, such as WordPress (or Joomla!, Drupal, etc) on your machine.
The advantages to this are incredible. First off, you’re recreating a server on your machine, which means as long as you’re running MAMP, you don’t need to be connected to the internet. So, if you find yourself 30,000 feet in the air on a Boeing 737-400, you can still work on that WordPress website you promised your client. [Note: if you use CDN content such as jQuery or other JavaScript libraries, those still need an internet connection. I found that out the hard way a few days ago. When developing, always have a copy of the most up-to-date script on your machine.]
To get MAMP or WAMP, visit their respective sites and download the application. Installation is fairly self-explanatory, and there are dozens of tutorials on how to set up local development for WordPress.
Getting Set Up With Coda
The first step to creating a great development process with Coda is to plan it out a little. Think of where your files are going, locally and on your server. A little planning here makes the development process a lot easier when setting up your site on Coda.
Let’s take a visual look at the set up for a sample project.
So, as you can see, you’ll have two sets of code bases, one locally on your computer and one live on your server. Obviously, the local code base can be previewed with the magic of MAMP or WAMP, while the live code base is viewable by your customers or clients.
With the layout of the development and deployment system framed out, let’s jump into Coda.
Setting Up A Coda Site
The first tab you want to utilize in Coda is the ‘Sites’ tab.
Next, you’ll want to look in the bottom corner and click “Add Site”. This will bring up the Site creation menu, where you can set up your local code base, FTP to your server, your local preview site, and your live preview domain.
Starting from the top, the Nickname is obviously the name of the site or project. The Root URL is the domain for the server that this site will live on. As the tool tip suggests, Coda will take a quick screen grab of this domain and use it as the preview in the Site menu.
Moving down the list, the Local URL is the domain that your MAMP or WAMP uses. This enables the “Preview” tab in Coda when using a database driven solution. For my setups, my Local URL is always http://localhost:8888. Check your MAMP or WAMP set up and check what your local server is.
The Remote Root is the location on the server where your files will be placed. This could be the root of the server, or could be a subdirectory. Finally, the last key is the Local Root, to which you can browse, select your local code base, and get to work.
The next major section is your FTP information to connect to your server.
Once you’ve got all that set up, click Save and let’s get to work.
Developing Locally
Once you’ve got your site set up, simply double click on it to open up a code editor with your theme file folder on the left and any open files that you were working on. The beauty of the Site is that you can save all of your work, close Coda, come back hours later, click your Site and everything opens up just where you left off.
If you’ve created a WordPress theme before, you know what you’re doing at this point. The connections we created when we set up the site will now allow you to edit PHP and preview the WordPress website in the “Preview” tab. Be sure that this isn’t your exclusive testing, though, as you should always check your website in every browser that you possibly can.
Publishing to Remote Server
So you’ve been hard at work creating your theme locally and you’re ready to publish to the remote server. All it takes is the click of a button.
Once you hit “Publish All”, every file that you have saved will be pushed via FTP to your web server – all from the same Coda window. Sorry if you were hoping the publishing section of this article was going to be longer… but it’s really quite simple.
Maintaining Your Site, Locally and Remotely
Whether you’re working for a client or a personal project or your brand new portfolio website, you will definitely have to maintain the code, add or delete features, and change up the CSS. With your set up in Coda, you’ll never have to dive into the clunky WordPress editor or deal with downloading and uploading FTP files for hours on end.
Within your site, you can quickly select whether you want to work on the Local code base or Remote code base. My recommendation is to always work on the local code first, then Publish All to the web server. Since you have MAMP or WAMP set up, you can preview exactly what your site will look like on the live server without committing the changes. Once you’re satisfied with the changes, publish all and go to bed happy.
Further Extension
While this article touched on a few of Coda’s positives in the Site, Editor and Preview windows, they also have full Terminal support, a dedicated CSS editor (although I prefer to write the CSS by hand), and a Books section, with several free handbooks and the ability to add more. Those items are outside of the scope of this article, but if you’re looking for more information on them, visit the Coda website to read more.
Conclusion
The set up I’ve described above is my go to set up for web projects at the moment. Do you use Coda (or another one-window editor like Espresso)? How do you develop, publish and maintain your websites? Join in on the discussion in the comments below.
