Varying WordPress Development Environment WordCamp Cincinnati 2016
- 1. Varying WordPress Development Environment WordCamp Cincinnati 2016 #wccincy | #wcvwdeve David Brattoli Principal Infinite Reality, LLC
- 2. Follow Along • Want to follow along during the presentation. Get the slides at: http://bit.ly/2dGfgxS
- 3. 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 2007 and have been working in working in higher educationfor the the last three years. • Recently began teaching a Web Design 2 class at Lorain County Community College (Elyria, OH) with with an emphasis on WordPress • Built 6+ WordPress themes with theme specific plugins • Migrated and designed 6+ complete sites with Wordpress
- 4. 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
- 5. Why use WordPress Local Development Environments • Faster. No waiting for files to upload via FTP or SSH 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. • Allows you to get experience with working with a server • Get to experience WordPress without having to commit to buying hosting
- 6. Available Local WordPress Development Environments • Localhost • MAMP ( Mac )/WAMP (Windows ) • XAMPP • WordPress.comVIP • DesktopServer (Windows & Mac ) • ServerPress • Docker • Vagrant/VVV
- 7. 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.
- 8. 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
- 9. 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 https://git-scm.com/downloads • Windows user will need to install RubyInstaller package http://rubyinstaller.org/ • Node.js https://nodejs.org/en/
- 10. 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:
- 11. Setting up a VVV local development environment • 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:
- 12. Setting up a VVV local development environment • Install the vagrant-triggers plugin. In your command line enter the following command: “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.. ):
- 13. Setting up a VVV local development environment • Install the vagrant-vbguest plugin. In your command line enter the following command: “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.. ):
- 14. Setting up a VVV local development environment • 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:
- 15. Setting up a VVV local development environment • 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:
- 16. Setting up a VVV local development environment • 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 https://git-scm.com/downloads • 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:
- 17. Setting up a VVV local development environment • Using a internet browser navigate to https://github.com/Varying-Vagrant-Vagrants/VVV • 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:
- 18. Setting up a VVV local development environment • 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 :
- 19. Setting up a VVV local development 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
- 20. VVV Initial Vagrant Up Video Because the initial installation can take a lengthy amount of time based on internet speed, here is a link to my first vagrant up server so you see and compare to your installation. Video can be found at https://www.youtube.com/watch?v=12HM6in1kOQ
- 21. Demo
- 22. 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 https://github.com/Varying-Vagrant-Vagrants/VVV 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
- 23. 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
- 24. Taking development environment to the 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
- 25. Taking development environment to the 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
- 26. Taking development environment to the 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
- 27. Taking development environment to the 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. )
- 28. Taking development environment to the 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. )
- 29. 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 https://github.com/Varying-Vagrant-Vagrants/VVV
- 30. Before you shut down your computer • Before shutdown you HAVE to shut down your vvv or vagrant box by running: vagrant halt
- 31. Questions?
- 32. 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
- 33. Slides SlidesCan be found at http://www.slideshare.net/DavidBrattoli/varying- wordpressdevelopmentenvironment-wccincy2016 OR http://bit.ly/2dGfgxS
- 34. Want More? • Stay tuned by following me onTwitter and my blog at www.dabrattoli.com because I will be posting step by step how to articles on everything I talked about today for both Mac andWindows along otherWordPress development topics.
- 35. 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/
- 36. Bonus Links • How to Use Git forWordPress Development – https://premium.wpmudev.org/blog/git-for-wordpress- development/ • WP Pusher- https://wppusher.com/ • The Ultimate GuideTo Automatic Updates WithWP Pusher – http://blog.wppusher.com/the-ultimate-guide-to- automatic-updates-with-wp-pusher/
- 37. Resources Mentioned https://git-scm.com/downloads https://www.vagrantup.com/ https://git-scm.com/downloads https://www.vagrantup.com/downloads.html https://www.virtualbox.org/wiki/Downloads https://git-scm.com/downloads https://github.com/Varying-Vagrant-Vagrants/VVV https://github.com/leogopal/VVV-Dashboard https://github.com/bradp/vv http://brew.sh/