Join Morten Rand-Hendriksen for an in-depth discussion in this video Setting up a local WordPress development environment, part of WordPress: Developing with Sass and Grunt.js.
- As I said in the intro, to get the most out of this course, you need to already have some experience working with WordPress themes as well as coding with web standards. If so, there's also a good chance you're already aware of how to set up a development environment. But, for completeness, I'll cover it anyway. To implement the workflow I'm showing you in this course, you need a local development environment on your computer. The simplest form of a local development environment consists of a local install of WordPress, a code editor, and a browser with development tools.
It's wise to also adopt a version control system like Gits, to provide history, branching, and more flexible development environments. To start off, you need to set up WordPress to run locally on your computer. This is so that you can work directly with the files without having to send them to a remote server and so that work you do is not available to anyone else until it's done. The process of installing and running WordPress on your computer involves setting up an application that turns your computer into a web server and then installing WordPress on that web server.
We have several courses in the library that take you through this process. If you are running a Windows computer, I recommend you watch Installing and Running WordPress WAMP. If you're on a Mac, I recommend Installing and Running WordPress MAMP. They both produce the same result. With WordPress set up and running, you need a code editor. For this level of development, I recommend an advanced editor like Sublime Text or, more preferably, a full scale IDE, like Netbeans or PhpStorm. I personally use Netbeans but many WordPress developers swear by either Sublime Text, Coda or PhpStorm.
In this course specifically, I'll be using Brackets on both Windows and Mac. You can use preferred code editor or use Brackets to match my environment exactly. With your development environment set up and hooked together, you're ready to start working with WordPress and Sass.
Note: This course doesn't teach Sass itself. To learn more about the language, watch CSS with LESS and Sass.
- Setting up your development environment
- Installing Node.js, Ruby, Grunt, and Sass
- Setting up Grunt and Sass on Mac and Windows
- Adding support to Grunt, Sass, Watch, and Autoprefixer in WordPress
- Building custom themes with _s and Sass