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!
Local WordPress Development
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):
- How to Set Up a Killer WordPress Testing Environment Locally
- Skeleton to WordPress: Getting up and Running
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 Configuration
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.
External Server Settings
Next we need to tell Codekit where our local MAMP server is running, so let's update the "External Server" settings:
- Click the gear beneath the project's name in Codekit.
- Click the second option labeled Browser Refreshing in the left sidebar.
- Scroll down to the External Server settings and turn External Server Required ON.
- Update the External Server Address with the local MAMP URL of the WordPress site (for example http://localhost:8888/your-local-site, or as in this example http://wptest.dev). Make sure you visit this URL to guarantee it is the correct and functioning properly.
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!
