Pick a virtual server option
- Windows users can choose from http://www.wampserver.com/en/ or https://www.apachefriends.org/index.html
- Mac users could pick https://www.mamp.info/en/
- Universal solution would be go with a combination of https://www.vagrantup.com/ and https://puphpet.com/
Using Vagrant has a learning curve in the beginning when you have to configure everything and make sure you understand what is going on. So with a little bit of persistence you gain huge advantage. Having a virtual server for development is really great. You don’t need to mess with your computer settings and you can start over when things go south.
Install Git
Go to https://git-scm.com/ and install Git. It’s key to any development work.
- You have to be able to work with your colleagues
- When you are a single developer it’s equally important to back in history and see what has changed in your codebase
Install Node and NPM
You will need NodeJS and NPM. You can get them here: https://nodejs.org/en/. NPM comes with Node so no need to install it separately. It would be useful to understand what NPM does and where to get help – https://docs.npmjs.com/getting-started/installing-node
Install Bower and Gulp
Go and read it here: http://bower.io/ and here http://gulpjs.com/. Those should be installed via NPM using command line.
Sage is the final piece
Go to Roots page and get Sage: https://roots.io/sage/. It’s important to read on what is Sage and what it does. Then download the archive to your computer and keep it there for a while.
Getting everything to work together
- Go get and download WordPress https://wordpress.org/download/
- Set it up in your server and go trough installation process
- You should have default installation of WordPress running on your local server before you continue. You should be able to login as a admin, manage everything and so on.
- We want to install our new theme (Sage) to WordPress. We go and extract the contents of Sage archive into WordPress themes folder /wp-content/themes/.
- When that is done we should be able to see our new Sage theme in admin theme settings. Let’s go ahead and activate it. After doing so we could check how does the page look and see that it has no styles and only default WordPress content.
We want to add Git to our theme so we could track our changes. So in the directory /wp-content/themes/sage/ trough the command line we do:
git init
We want to install all javascript libraries with Bower:
bower install
We want to install all the packages needed for Gulp to work:
npm install
Let’s launch Gulp:
gulp