Modern WordPress Theme Development

WordPress-Developer-Environment-Setup.md

Development Software

• VirtualBox - Virtualization software for running local operating systems within your computer. This let's us have a full version of linux within our computers that better matches how a live webserver works.
• Vagrant - A tool for provisioning virtual machines.
• VVV - A pre-built, community supported Vagrant configuration for WordPress development.
• Git - Version control system for managing code during development. Easily allows for tracking changes, and merging new code into an existing project.
• SourceTree - A GUI available on Windows and Mac for managing Git projects. This makes Git much easier to use, as we won't have to learn the command line interface.
• GitHub.com - A website that provides free Git repos for both open source and private projects.
• SASS - (we'll use the SCSS flavor) A CSS preprocessor that allows us to write much less CSS for a project. This basically makes CSS into a simple programming language.

WordPress Theme Build

• _s - (Underscores) is a very simple WordPress starter-theme. Perfect for creating a brand new theme from scratch as it is completely unopinionated in its structure, and adheres to WordPress best practices out of the box.
• Bootstrap - A CSS framework for easily making great responsive websites.

Install Required Software

1. Download and install VirtualBox https://www.virtualbox.org/wiki/Downloads (I think we're safe to use the 5.x version)
2. Download and install Vagrant http://www.vagrantup.com/downloads.html
3. Download VVV 1.2.0 and unzip it to the folder where it will live. Rename the folder VVV (instead of VVV-1.2.0). https://github.com/Varying-Vagrant-Vagrants/VVV/tree/1.2.0
4. Download and install SourceTree https://www.sourcetreeapp.com/ This is a Git GUI that I like a lot.

Install the VM and test

1. Open a command prompt and go to the directory where you extracted VVV
2. Type vagrant plugin install vagrant-hostsupdater, this will install a vagrant plugin that saves us a little work.
3. Then type vagrant up, and go get some coffee, or have dinner or something... it can take 30 mins or so to install the virtual machine. (could be faster, so you could watch it work if you want)
4. Once it is done, you should be able to open a browser and go to http://local.wordpress.dev to see your new local development version of WordPress
5. You can login at: http://local.wordpress.dev/wp-login.php with admin and password

About Vagrant

Vagrant is a tool that helps provision (launch) development environments in a standardized manner. Using this, we can all easily have the exact same setup with very little effort.

Common/Useful Commands:

• vagrant up - Start the virtual machine
• vagrant halt - Stop the virtual machine
• vagrant reload - Reboot the virtual machine
• vagrant destroy - Delete the virtual machine

General usage reasons:

• vagrant up - You are ready to start working on a project. In your command prompt (Terminal on Macs), browse to the directory where you extracted VVV and run vagrant up.
• vagrant halt - You are done working for the day, or need to restart your computer for some reason. In your command prompt, browse to the directory where you extracted VVV and run vagrant halt.
• vagrant reload - Something is acting strange in your development environment, or you can't access your local sites. In your command prompt, browse to the directory where you extracted VVV and run vagrant reload.
• vagrant destroy - We'll probably never use this. If you need to completely start over with your development environment because something has gone terribly wrong.