Skip to main content Skip to navigation
Web Communication Local WSUWP Development

Local WSUWP Development

Overview

This is an introduction to local development for the WSUWP Platform. The instructions below are in progress.

Install VirtualBox

Install Vagrant

Setup a directory for local development

  • Open your home directory in Finder (click on Desktop, then Command-Shift-h on your keyboard).
  • Create a new directory called “Development” at the same level as Documents, Downloads, and Desktop.
  • This directory does not have to be named “Development”, though having a common structure will help for troubleshooting in the future.

Setup the WSUWP Platform

  • Open the Terminal application.
  • Navigate to the Development directory created above with cd ~/Development.
  • Use git to clone a copy of the WSUWP Platform repository to a directory in that location with git clone https://github.com/washingtonstateuniversity/WSUWP-Platform.git wsuwp-platform.
  • Navigate to the new wsuwp-platform directory with cd wsuwp-platform and show a list of directory contents with ls to confirm.

Screencapture

WSUWP Platform asciicast

Start the WSUWP Platform VM with Vagrant for the first time

The following will take a while and require a good network connection.

  • Open the Terminal application.
  • Navigate to the WSUWP Platform directory with cd ~/Development/wsuwp-platform/.
  • Install the Vagrant hostsupdater plugin with vagrant plugin install vagrant-hostsupdater.
  • Install the Vagrant hosts plugin with vagrant plugin install vagrant-hosts.
  • Start the virtual machine with vagrant up. Be ready to type in your machine password after a few moments so that Vagrant can add host file entries to /etc/hosts/.
  • Wait.

At the end of the vagrant up process, there should be a summary of progress. Ideally, there are 0 failed states.

==> wsuwp-dev: Summary for local
==> wsuwp-dev: -------------
==> wsuwp-dev: Succeeded: 92 (changed=88)
==> wsuwp-dev: Failed:     0
==> wsuwp-dev: -------------
==> wsuwp-dev: Total states run:     92

Now, bring up your browser and visit http://wp.wsu.dev/. Access the WordPress admin interface athttp://wp.wsu.dev/wp-admin/ and login with the username admin and password password.

Screencaptures

Vagrant plugin install

First Vagrant up asciicast

Get your bearings

This virtual machine is identical in many ways to the server we have powering wp.wsu.edu and its networks and sites. It contains all of the code from the WSUWP Platform project that helps to power a multi-network, multisite configuration. By default, the Spine Parent Theme is available as the only theme.

New sites can be created through the network admin at [http://wp.wsu.dev/wp-admin/network/site-new.php]. In most cases, you’re fine to create sites like http://wp.wsu.dev/new-site-name/ or similar rather than worrying about a full domain name (new-site-name.wp.wsu.dev). We’ll get into more advanced configurations at a later time.

Once a site is created on the network, you can access its admin at http://wp.wsu.dev/new-site-name/wp-admin/ and start adding content as normal.

Work on an existing theme

The ~/Development/wsuwp-platform/ directory is where all of your WordPress projects will live, whether they be themes or plugins. Themes will go in ~/Development/wsuwp-platform/www/wp-content/themes/.

The process for cloning an existing theme into this structure is similar to the one used for the platform.

  • Open your home directory in Finder (click on Desktop, then Command-Shift-h on your keyboard).
  • Navigate to the themes directory of the WSUWP Platform with cd ~/Development/wsuwp-platform/www/wp-content/themes/.
  • Use git to clone a copy of the news.wsu.edu repository to a directory in that location with git clone https://github.com/washingtonstateuniversity/news.wsu.edu.git news.wsu.edu.
  • Navigate to the new news.wsu.edu directory with cd news.wsu.edu and show a list of directory contents withls to confirm.

Screencapture

WSU News theme asciicast

Use the installed theme

Now that this theme is installed, you’ll need to enable it for use on the network.

Once the theme is network enabled, it can be activated on any of your local sites. Go back tohttp://wp.wsu.dev/new-site-name/wp-admin/ and activate the theme through Appearance -> Themes.

Now that the theme is activated, any changes to the theme should reflect immediately on the front end of that site.

Work on an existing plugin

The ~/Development/wsuwp-platform/ directory is where all of your WordPress projects will live, whether they be themes or plugins. Plugins will go in ~/Development/wsuwp-platform/www/wp-content/plugins/.

The process for cloning an existing plugin into this structure is similar to the one used for the platform.

In Progress

  • Open your home directory in Finder (click on Desktop, then Command-Shift-h on your keyboard).
  • Navigate to the plugins directory of the WSUWP Platform with cd ~/Development/wsuwp-platform/www/wp-content/plugins/.
  • Use git to clone a copy of the [repo here] plugin to a directory in that location with git clone [repo here] [directory here].
  • Navigate to the new [plugin] directory with [navigation command] and show a list of directory contents with lsto confirm.