Working in a local environment (ie: directly on your own computer) is a standard approach when building WordPress themes and plugins. It saves you from breaking a live site, while speeding up the process by reducing requests to the web. It does have one downside though; you can only access your local environment locally, on your system. Testing simultaneously on other devices and systems you might have is difficult.
In this quick article, I’m going to explain how to use Codekit 2.0 and speed up your local development workflow with style injection, browser refreshing, and device testing without touching a line of code to setup!
In order to get started, you’ll need to setup WordPress locally. We have a couple of articles on Tuts+ to help you get started using MAMP (a local server environment comprising Mac, Apache, MySQL and PHP, Perl or Python):
After MAMP is installed, make sure it is running.
You will also need to know the local URL (often http://localhost:8888 by default, but you can define this Apache port in MAMP preferences). Make sure you have the local site working properly before you continue.
Codekit recently made a major upgrade to 2.0, offering simultaneous browser refreshing across multiple devices, plus style injection. In just a couple of steps, you can setup Codekit to work with your local WordPress setup.
After your local WordPress installation is ready to go and you have MAMP running, add your theme as a project to Codekit. You can do this by dragging the theme’s folder into Codekit.
Next we need to tell Codekit where our local MAMP server is running, so let’s update the “External Server” settings:
To start using the server, click the preview button at the top right of Codekit. It will open your browser with a unique url (http://your-computer-name.local:5757). You can now manually visit that url on any other devices connected to your wi-fi network to connect to Codekit’s browser refreshing and style injections.
When you save a file in your code editor, the browser will refresh, or if you’re updating the stylesheet, Codekit will inject the new style changes.
Codekit also offers Sass compiling (with Libass), style injection, browser refreshing, syntax checking, minification, hooks and more with just one program! If you’re already using MAMP, give Codekit a go and watch it speed up your workflow.
What tips do you have for local WordPress development, let us know in the comments!