Skip to content

Instantly share code, notes, and snippets.

@tulanght

tulanght/1.WordPress-Developer-Environment-Setup.md

Forked from daggerhart/1.WordPress-Developer-Environment-Setup.md
Created October 26, 2015 09:57
Show Gist options
  • Save tulanght/6c930b243f31fbfd2bdc to your computer and use it in GitHub Desktop.
Save tulanght/6c930b243f31fbfd2bdc to your computer and use it in GitHub Desktop.
Download ZIP
Modern WordPress Theme Development
Raw
WordPress-Developer-Environment-Setup.md

Development Software

  • VirtualBox - Virtualization software for running local operating systems within your computer. This allows us have a full version of linux within our computers that better match how a live webserver works.
  • Vagrant - A tool for provisioning (creating) 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 repositories for both open source and private projects.
  • SASS - (SCSS) A CSS preprocessing implementation 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 (create/launch/make) 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.
Raw
WordPress-Underscores-Bootstrap-Theme-Setup.md

Creating Themes with Underscores

To start, let's make a very simple Underscores theme that does not use SASS. This will allow us to gain a better understanding of a WordPress themes in general before getting involved with the other tools.

My First Underscores Theme

For this example, we're going to create a theme named "Awesomesauce".

  1. Visit Underscores' website http://underscores.me/ and find the text box named "Theme Name" next to a button named "Generate".
  2. In the Theme Name box, type Awesomesauce, then click Generate. This will download your newly generated theme as a zip file.
  3. Extract the zip file to your desktop for now.

We have created a new theme! Next, let's take a step back and explore the VVV WordPress files a bit, so we know where to put our new theme.

Exploring VVV

  • Using your computer's file manager (Explorer / Finder), browse to where you extracted VVV.
  • In the VVV folder, you'll see about a dozen files and folders. The only one we'll ever worry about is www. Open the www folder.
  • Now in VVV\www we have another few folders. For this series the only one we're going to work with is wordpress-default. Open the wordpress-default folder.
  • So the folder we're going to work in VVV\www\wordpress-default.

Next, let's take a quick look at the WordPress folders.

Exploring WordPress

  • In the root of the WordPress folder there are 3 main directories, and about a dozen files.
  • The only file we'll ever worry about here is wp-config.php. But, since VVV set this up for us, we can ignore it all for now.
  • The only folder we'll concern ourselves with is the wp-content folder. This folder is where WordPress keeps plugins, themes, and file uploads. Go into the wp-content folder.
  • Go into the themes folder.
  • Now you should be at: VVV\www\wordpress-default\wp-content\themes. This is where we will put our newly generated theme.

Installing Your New Theme

  • Copy your newly extracted theme named awesomesauce into this folder, so that the index.php file for your theme can be found at this path: VVV\www\wordpress-default\wp-content\themes\awesomesauce\index.php
  • Login to WordPress at http://local.wordpress.dev/wp-login.php with the credentials admin and password.
  • In the dashboard visit Appearance, and you should see the Awesomesauce theme. Activate it.

You now have a working WordPress theme! No one said it was going to be pretty. In fact, quite the opposite. This is a completely blank theme, so it should have no style at all.

Spend some time exploring the theme files a little bit. Specifically, open style.css and look at the comments at the very top. These comments control the information about the theme itself.

/*
Theme Name: Awesomesauce
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description

If you change the Theme Name or Description here, it will change the name in the WordPress Appearance section.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment