Varying WordPress Development Environment WordCamp Columbus 2016

Varying WordPress
Development Environment
WordCamp Columbus 2016
#WPCampus | #wcvwdeve

Follow Along
• Want follow along during the presentation. Get
the slides at:
http://bit.ly/2bntE24

About Me
• Web Developer for 7+ years. Including
2+ years of WordPress experience
• Owner of Infinite Reality LLC, a web
web and graphic design firm, since
since since 2007 and have been
working in higher educationfor the
the last three years.
• Recently began teaching a Web
Design 2 class at Lorain County
Community College with emphasis on
emphasis on WordPress
• Built 6+ WordPress themes with
theme specific plugins
• Migrated and designed 6+ complete
sites with Wordpress

Topics
• Why use WordPress Local Development Environments
• Available WordPress Development Environments
• What is Varying Vagrant Vagrants ( VVV ) ?
• Why use Varying Vagrant Vagrants ( VVV ) ?
• Setting up a VVV local development environment
• Code Demo
• Styling the VVV development dashboard
• Taking development environment to the new
level with VV
• Code Demo
• Questions

Why use WordPress Local
Development Environments
• Faster. No waiting for files to upload via FTP before you
can refresh your browser and see your changes.
• Easier debugging. Because everything is running on your
system, setting up and using xDebug or other debugging
tools is quite a bit easier.
• Don’t need an internet connection work on things.
• When working locally, you’re free to experiment and play
around, as your work is not affecting current users.

Available Local WordPress
Development Environments
• Localhost
• MAMP ( Mac )/WAMP (Windows )
• XAMPP
• WordPress.comVIP
• DesktopServer (Windows & Mac )
• ServerPress
• Docker
• Vagrant/VVV

What is Varying Vagrant Vagrants (
VVV ) ?
• Vagrant is a toolkit that runs on top ofVirtualBox,
VMWare, or another virtual machine provider on your
local machine.Vagrant will allow you to work with these
virtual machines to run your code, while you keep your
entire workflow on your local computer.
• VaryingVagrantVagrants is aVagrant setup that provides
a great start for localWordPress development. Whether
you’re building plugins, themes, or full site, a localVVV
installation is the best place to do your development.

Why use Varying Vagrant Vagrants (
VVV ) ?
• Works on both Mac andWindows
• Customizable
• Easy on your computer’s RAM
• Easy site creation withVVV pluginVV
• It is what theTheme Review and other majorWordPress
contribut0rs use
• No internet required to run except initial boot up
• Self-contained portable environment

Programs Needed
• Command Line Tool : Terminal ( Mac ) or Command
Prompt ( Windows ) or Git / GitBash ( Windows )
https://git-scm.com/downloads
• Virtualbox (you can substitute Vmware, but I find
Virtualbox easy to use and it’s free)
https://www.virtualbox.org/wiki/Downloads
• Vagrant
https://www.vagrantup.com/
• Git
• Windows user will need to install RubyInstaller
package
http://rubyinstaller.org/

Setting up a VVV local
development environment
• Go to https://www.vagrantup.com/downloads.html
• Download Vagrant for your operating systems
• Install Vagrant
Step 1: Install Vagrant:
• Go to https://www.virtualbox.org/wiki/Downloads
• Download VirtualBox, for your operating systems, and download
VirtualBox Guest Additions, for version of downloaded
VirtualBox
• Install VirtualBox and VirtualBox Guest Additions
Step 2: Install VirtualBox and Guest
Additions:

• Open your command line tool ( For Windows 8 and above users
run the tool as a Administrator )
• Install the vagrant-hostsupdater plugin. In your command line
enter the following command:
“vagrant plugin install vagrant-hostsupdater”
and hit enter
• Vagrant-hostsupdater adds an entry to your /etc/hosts file on the host
system.
• OnVagrants Launch commands , it tries to add the information, if it
does not already exist in your hosts file. If it needs to be added, you will
be asked for an administrator password, since it uses sudo ( Mac) / run
as administrator ( windows ) to edit the file.
Step 2:Vagrant Plugins:

• Install the vagrant-triggers plugin. In your command line
“vagrant plugin install vagrant-triggers”
and hit enter
• Vagrant-triggers allows the definition of arbitrary scripts that will
run on the host or guest before and/or afterVagrant commands.
• Default trigger is automated back-up of all SQL databases when
Vagrant is shutdown. Other examples “Blacklisting commands,
Skipping execution, andTrigger block DSL “
Step 2:Vagrant Plugins ( cont.. ):

• Install the vagrant-vbguest plugin. In your command line
“vagrant plugin install vagrant-vbguest”
and hit enter
• Vagrant-vbguest keeps theVirtualBox Guest Additions kernel
modules of your guest synchronized with the version of your host
whenever you do vagrant up. This can prevent some subtle shared
folder errors.
Step 2:Vagrant Plugins ( cont.. ):

• There are two different methods for downloadingVVV.
1. Download theVVV using Git via command line
2. Downloading directly fromVVV Github page
https://github.com/Varying-Vagrant-Vagrants/VVV
Step 3: Downloading VVV:

• First things first you need to take a closer look at the VVV git command
git clone git://github.com/Varying-Vagrant-Vagrants/VVV.git
vagrant-local
• First is “git clone” . This is Git command that will retrieve the GitHub
repository ad download a clone into the directory you are in when the
command is initiated.
• Second is “git://github.com/Varying-Vagrant-Vagrants/VVV.git”. This
is the git url of the GitHub repository of VVV
• Lastly is “vagrant-local”. This is the name of the folder in which the
VVV files will be placed in. This is also important that the name of the
folder will become the name of the VVV environment once it is created.
So make to use a name that is easy to remember and will suit your dev
needs.
Step 3: Downloading VVV using Git:

• Open a Terminal Window
• Using the command line navigate to
the location on your computer in
which you want VVV installed using
the cd command
• Enter the following command:
git clone git://github.com/Varying-
Vagrant-Vagrants/VVV.git vagrant-
local
and hit Enter
• If Git is not already installed you will
be prompted by Terminal to install Git
• Once installed VVV will be
downloaded
• Download Git via
• Install Git
• Open GitBash
• Using the command line navigate to
the location on your computer in
which you want VVV installed using
the cd command
• Enter the following command
git clone
git://github.com/Varying-Vagrant-
Vagrants/VVV.git vagrant-local
and hit Enter
MacWindows
Step 3: DownloadingVVV using Git:

• Using a internet browser navigate to
• Clink on the button labeled Clone or download
• Select download
• Once the file is downloaded, Unzip the file and Copy/Paste
it’s contents into the location in which you want to store your
VVV Dev environment files
• As with the Git command the name of the folder is important
do to the name of the folder will become the name of the
VVV environment once it is created. So make to use a name
that is easy to remember and will suit your dev needs.
Step 3: Downloading VVV directly from GitHub:

• Using your command line program navigate, using the cd command,
to the folder in which you stored the VVV files
• (Optional) At this time you can open VirtualBox if wish to see the box
entry being created
• Enter the following command
” vagrant up “
and hit enter
• Depending on your computer and your internet speed the installation
can take upwards of 5-10 minutes.
• Congratulations you now have you own Vagrant VVV Development
Environment
Step 4: Start the Vagrant environment :

• Now using your browser go to vvv.dev to see the dashboard of your
new VVV environment
• By default the Vagrant installation comes with four default
WordPress installs
• local.wordpress.dev for WordPress stable
• local.wordpress-trunk.dev for WordPress trunk
• src.wordpress-develop.dev for trunk WordPress development files
• build.wordpress-develop.dev for the version of those development
files built with Grunt

VVV Initial Vagrant Up Video
Video can be found at
https://www.youtube.com/watch?v=12HM6in1kOQ

Styling the VVV
development dashboard
• The initial VVV dashboard located at VVV.dev is very basic and
has no styling
• To correct this we will have to download custom dashboard files.
To see available options go to
and look at the section titled Custom Dashboards
• The dashboard I will be demo is by leogopal and is located at
https://github.com/leogopal/VVV-Dashboard
• As with the VVV download click the download link to download the
dashboard files
• Once downloaded Unzip and Copy the file dashboard-
custom.php and the folder titled dashboard
• Using Finder (Mac) / Explorer ( Windows ) navigate to
“name of your vagrant/www/default/” and then paste
• Now using your browser navigate to vvv.dev and when the page
loads you will see the new updated dashboard

Taking development environment to the
next level with VV
• By default the Vagrant installation comes with four default
WordPress installs.
• To create a new install you must first install VV - aVVV Site
Creation Wizard by Bradp located at:
https://github.com/bradp/vv

next level with VV
• Clone vv to a folder somewhere.
• $ git clone https://github.com/bradp/vv.git
• Add that folder to your system path. See here if you need help.
• Open an explorer window and go to My Computer (orThis PC).
• Right click and choose properties
• Choose Advanced System Settings
• Choose EnvironmentalVariables form the AdvancedTab
• Choose the "Path" variable and edit it.
• Add a semicolon to end the previous path item and then add
the vv folder path (Example:;C:UsersNameDocumentsvv)
• Open Git Bash and run vv
* Alternately, you can use command prompt and use the
bash vv command. *
InstallingVV onWindows

next level with VV
• Open Terminal
• Install HomeBrew
Go to http://brew.sh/ and copy the installation command.
It looks like this:
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
• Paste the command into terminal and hit Enter
• Once homebrew is installed enter the following command into
terminal
brew install bradp/vv/vv
And hit Enter
InstallingVV on Mac

next level with VV
• Open your command line tool: Terminal ( Mac) / GitBash or Command
Prompt (Windows)
• In you command enter the following command”
vv create
• You will then be prompted to enter the path to the location to the
directory of yourVVV installation
• Once completed a theVV site wizard will ask you a series of prompts to
create your new installation
• The prompts are as follows
• Name of new site directory: This is the name of the installation you wish
to create. It will also be the name of the folder in which the site will be
created
UsingVV

next level with VV
• Domain to use (leave blank for nameofsitedirecoty.dev): This will be
the URL you will use to access the site. If you leave it blank the system
will automatically use the site directory name as the URL
• WordPress version to install (leave blank for latest version or trunk
for trunk/nightly version): This is were specify what version you wish
to use in the new site. If left blank it will grab the most recent
WordPress release
• Install as multisite? : The wizard has the ability to create the site a
multisite. If you answer yes to this question you then be prompted to
either choose to install a subdomain or subdirectory multisite
installation.
• Git repo to clone as wp-content (leave blank to skip): If you have a
GitHub repository you wish to attach to the site you can enter it here.
If don’t have one you can leave it blank
UsingVV ( cont. )

next level with VV
• Local SQL file to import for database (leave blank to skip): This
prompt will allow you to either import a SQL database file to be used to
populate the new site or if left blank the wizard will create a blank SQL
file that will be populated by the WordPress install
• Remove default themes and plugins? : This prompt wants to know if
you wish to remove the defaultWordPress default themes (
Twentyfifteen orTwentysixteen) andWordPress default plugin Aksimet .
• Add sample content to site (y/N): This will allow you to populate the
WordPress install sample content to test yourWordPress themes and
plugins.The content used is the same used by the WordPressTheme
Review teams.
• EnableWP_DEBUG and WP_DEBUG_LOG (y/N): This will allow you to
either turn on or leave off the WordPress debug mode.
• You will then be shown a summary of your choices and will be prompted
to continue with the installation or not. Once you answer yes the wizard
will begin to install the newVVV site.
UsingVV ( cont. )

VV/VVV Commands
• Vagrant Up: Turns theVagrant InstallOn
• Vagrant Halt: Turns theVagrant Install OFF
• vv create: creates a new site
• vv list: displays a list of all available sites in yourVVV install
• vv delete site_name: Site deletion
For more information please check out
https://github.com/bradp/vv

David Brattoli
Web:
www.Infiniterealityllc.com
www.Dabrattoli.com
Twitter: @DavidMBrattoli
Email: davidbrattoli@yahoo.com
david.brattoli@infiniterealityllc.com
Github:
https://github.com/dabrattoli
Contact Information

Bonus Links
• Instructions to turn on code debugging such xDebug for
yourVVV box can found here:
https://github.com/Varying-Vagrant-
Vagrants/VVV/wiki/Code-Debugging
• Guide for SASS
http://sass-lang.com/guide
• GitHub For Beginners: Don’t Get Scared, Get Started
http://readwrite.com/2013/09/30/understanding-github-a-
journey-for-beginners-part-1/

Resources Mentioned
 https://git-scm.com/downloads
 https://www.vagrantup.com/
 https://www.vagrantup.com/downloads.html
 https://www.virtualbox.org/wiki/Downloads
 https://github.com/Varying-Vagrant-Vagrants/VVV
 https://github.com/leogopal/VVV-Dashboard
 https://github.com/bradp/vv
 http://brew.sh/

Slides
SlidesCan be found at
http://www.slideshare.net/DavidBrattoli/varying-wordpress-development-
environment-wordcamp-columbus-2016

Varying WordPress Development Environment WordCamp Columbus 2016

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to Varying WordPress Development Environment WordCamp Columbus 2016

Similar to Varying WordPress Development Environment WordCamp Columbus 2016 (20)

Recently uploaded

Recently uploaded (20)

Varying WordPress Development Environment WordCamp Columbus 2016