Posted on

Setting Up A WordPress Development Environment

Banner Vagrant Cloud WP Dev Kit Box

In preparation for several new projects, some of which are outside of the Store Locator Plus realm, I have been training some new developers in WordPress plugin wizardry.    This article is meant to help new developers get started with my specific Store Locator Plus development environment.    However, most of the steps here will apply to any WordPress related development environment.

Tools Required

VirtualBox

VirtualBox is a free virtual machine software package provided by Oracle.   It will allows us to create a self-contained WordPress web server which, when using one of my virtual machine images, will contain a GUI desktop environment with all of the tools necessary to build and distribute WordPress plugins and themes.

Vagrant

Vagrant is a virtual machine management tool.   Vagrant is used to transport virtual machine images, import the machine images, configure the virtual machine hardware, and communicate with VirtualBox to help us get an initial machine running.

Command Line

Some knowledge of OS/X or Windows command line is useful as running Vagrant commands from the command prompt is required.  On Windows you will want to copy the Windows/System32/cmd.exe to a local “where I work on virtual machines” folder on your system and create a shortcut to it that runs in Administrator mode.

Overview

The process to get started is simple.    Install VirtualBox, install Vagrant, go to the command line for Vagrant and fetch one of my public VirtualBox environments from the VagrantCloud server, tweak the Vagrant file that manages the config for that box to turn on GUI mode, start the box.

For my developers I provide a custom VirtualBox environment that already has the Store Locator Plus family of plugins as well as access to the code repositories installed.    I will get into that specific setup in a later article.

Getting Started

Download and Install VirtualBox

Download VirtualBox from https://www.virtualbox.org/wiki/Downloads.  When installing and activating VirtualBox for the first time it should ask you to install the Extension Pack.  If it does not, go tot he same link and download and install the appropriate Extension pack as well.

Download and Install Vagrant

Do the same for Vagrant here: https://www.vagrantup.com/downloads.    Vagrant will install a command line Ruby processor on your system and may guide you toward installing additional software.   Most of what you need will be contained in the install package.

Setup A Workspace

I recommend creating a folder on your system where you will work with your virtual boxes.   I create a folder under my user home directory named “VirtualBox VMs”.      On Windows you will want to  copy the Windows\System32\cmd.exe into this folder and create a shortcut that runs this in administrator mode.  This will make it easier to run your Vagrant commands without having to constantly change directories.

Fetch A Vagrant Box Image

Vagrant is a virtual machine manager.    It will take various server images and store them in a local repository of virtual machines it controls.    Part of the process here involves getting a copy of a vagrant machine image file onto your local system and adding it to that repository with vagrant commands.

Open your command line on your host system (Windows or OS/X).

Use vagrant to fetch a cloud box.    This is an older box but has a basic CentOS 6.5 configuration with WordPress up and running and some basic GUI dev tools available.    This is a good start for a “clean WordPress development environment”.  Someday I will be publishing another box that has updated software including WordPress 4.0, phpStorm eval in place of NetBeans, and other tools.    For my developers this is a good starting point, however I do have a custom box image that I can provide privately.

At the command line use the following command:

vagrant box add charlestonsw/centos6.5-wordpress-dev-kit-base-box

This will copy a 2GB virtual box image to your system and add it to the list of supported boxes with the label “charlestonsw/centos6.5-wordpress-dev-kit-base-box”. This particular Vagrant image will be linked to the VagrantCloud server and will fetch updates whenever they are available when using a vagrant init command.

Follow the link to see what is in the latest generic WordPress Dev Kit box on VagrantCloud.

Configure The New Box Hardware

I suggest starting by creating a new folder in your “Virtual Box Stuff Here” folder you created earlier for this specific system.  I do this for every new “box” I am going to run.  Create a folder called “WP Dev Kit Test Box” and change into that directory from the command prompt.

Now create a vanilla Vagrant startup file by using this command:

vagrant init charlestonsw/centos6.5-wordpress-dev-kit-base-box

This will create a generic vagrantfile to control the hardware configuration and startup commands for the new virtual machine. Edit that file to turn on GUI mode, set your memory usage, and monitor count. The memory usage and monitor count should be based on your host system hardware. I have 3 monitors and 16GB of RAM on my MacBook Pro so I set my memory to 8MB and monitor count to 2. You should set yours to use about half your RAM and typically leave it at one monitor.

Look for these lines in the vagrantfile and uncomment them:


# Provider-specific configuration so you can fine-tune various
 # backing providers for Vagrant. These expose provider-specific options.
 # Example for VirtualBox:
 #
 config.vm.provider "virtualbox" do |vb|
 # Don't boot with headless mode
 vb.gui = true

 # # Use VBoxManage to customize the VM. For example to change memory:
 vb.customize ["modifyvm", :id, "--memory", "1024"]
 end

Add in your monitorcount only if you are using more than one monitor for the virtual machine:


# Provider-specific configuration so you can fine-tune various
 # backing providers for Vagrant. These expose provider-specific options.
 # Example for VirtualBox:
 #
 config.vm.provider "virtualbox" do |vb|
 # Don't boot with headless mode
 vb.gui = true

 # # Use VBoxManage to customize the VM. For example to change memory:
 vb.customize ["modifyvm", :id, "--memory", "1024"]
 vb.customize ["modifyvm", :id, "--monitorcount", "2"]
 end

Start The Box

Still in command line, use this command to start up the new box. This will pull the box image out of the Vagrant repository and copy it into VirtualBox for use, then talk to VirtualBox and tell it to start running the new virtual machine.

vagrant up

This process may take some time. It takes 3-4 minutes on my SSD on a new MacBook Pro but took about 15 minutes on my older Windows laptop.

VirtualBox CentOS 6.5 GUI Base Box
VirtualBox CentOS 6.5 GUI Base Box

Using The Virtual Machine

System Login

Once the new box is up and running you can login with the generic user “vagrant” with a password of “vagrant”.

CentOS 6.5 Vagrant Login Banner

Surfing Local WordPress

On the new system GUI you will have Firefox installed along with basic development tools. You can bring up the local WordPress site by opening firefox and surfing to http://localhost/

 

Geek Details

The default user you work with is named “vagrant”.     It has access to most of the things you need on the server.   The vagrant user is part of the dev group, as is the Apache user that runs the local web server.   All of the web files are group-write enabled which means both Apache and your vagrant user can access them.

WordPress lives in the /var/www/html folder.
Plugins are in /var/www/wpslp/wp-content/plugins.

The super user is “root”.   It has the same password as the vagrant user.

You should go to System/Administration/Software update and check for system software updates.   Install the updates.

Since these are the generic Vagrant-style access credentials I strongly recommend you do not put your virtual machine on a public network.  By default it should only be accessible to your host system and should not be visible to the general network but you will want to check that.

 

If I have missed a step or something is not working as you expect please leave a comment on this article.   You will need to be a registered user so purchase the free “Forum Registration” on this site to get a user account.

Posted on

WordPress Dev Kit Plugin Updated

WordPress Dev Kit Banner

With a handful of new plugin updates coming out this week I decided I needed to release a quick update to the WordPress Dev Kit plugin.    I use this plugin to extract the contents of my plugin readme files and render those contents inline in pages and posts on the site.   This is a BIG productivity tool as I only have to worry about updating the readme files for my projects and don’t have to copy and reformat those notes for the blog posts (like this one) and pages on my site.

The newest release fixed the [blah](URL) readme syntax and makes it a properly formatted link.  It also changes the asterisk (*) lists into a proper HTML list element.   Both of these updates are minor but improve the readability of the update notes for the plugins.

How would you use this for your own WordPress plugins?    Create a plugins.json file in a directory on  your server, like this:

{
    "pluginMeta": {
        "debug-my-plugin": {
            "production": {
                "new_version": "0.9.4",
                "last_updated": "2014-04-24"
            },
            "prerelease": {
                "new_version": "0.9.4",
                "last_updated": "2014-04-24"
            },
            "textdomain": "csa-dmp",
            "publishto": "wordpress"
        },
        "plugintel": {
            "production": {
                "new_version": "0.5",
                "last_updated": "2014-04-30"
            },
            "prerelease": {
                "new_version": "0.5",
                "last_updated": "2014-04-30"
            },
            "textdomain": "csa-plugintel",
            "publishto": "wordpress"
        },
        "wp-dev-kit": {
            "production": {
                "new_version": "0.5.2",
                "last_updated": "2014-08-18"
            },
            "prerelease": {
                "new_version": "0.5.2",
                "last_updated": "2014-08-18"
            },
            "textdomain": "csa-wpdevkit",
            "publishto": "wordpress"
        }
    },
    "wp-plugin-dir": "/var/www/wpslp/wp-content/plugins/",
    "wp-theme-dir": "/var/www/wpslp/wp-content/themes/",
    "wp-username": "charlestonsw"
}

The store your plugin .zip files and/or readme.txt files in the same directory. Just be sure to rename your readme.text files after the slug with a _readme.txt format. For example my readme file for this plugin is wp-dev-kit_readme.txt in this directory. It provides the wp-dev-kit short codes with their own copy of the readme file without having to extract it from the .zip file every time.

Here is what a wp-dev-kit short code looks like for rendering the details of this plugin:

WordPress Dev Kit Details