UI Options Wordpres Plugin Development Guide

This is a quick guide for getting setup and started for development work on the UIO Wordpress Plugin.

Development Environment Setup

The quickest way to setup a development environment is to make use of a Vagrant VM. FLUID-6095 defines a task for setting up an automated vagrant environment, and includes a tar file that can be used for this in the interim. 

Setup the Vagrant VM

Unpack the qi-wordpress.tar.gz into the preferred location on the host machine. This will create a directory call "wordpress". The contents of this directory will be automatically synced to the VM when it is running. To launch the vagrant VM, run vagrant up from within the wordpress directory. This will start the VM and launch the Wordpress instance.

# unpack the tar file
tar -zxvf qi-wordpress.tar.gz


# open the wordpress directory it creates
cd wordpress


# launch the VM
vagrant up

Initial Wordpress Configuration

Once Wordpress has started, open localhost:10080/wp-adim in your browser. On the first time running Wordpress this will show its configuration wizard. Select your preferred language and create an admin user. You'll need this information for logging into Wordpress later. If through the configuration process you are asked for database information, just accept the defaults.

Adding the Plugin

You'll need to clone the uio-wordpress-plugin repo into the Wordpress' plugin directory. This will allow you to work on the plugin while it is deployed to the Wordpress instance.

# change to the plugin directory
cd wordpress/wp-content/plugins/


# clone uio-wordpress-plugin repo
git clone https://github.com/fluid-project/uio-wordpress-plugin.git

Now that the plugin repo has been cloned into the plugins directory, you'll need to activate the plugin. Open localhost:10080/wp-admin in your browser. From the Dashboard, open the Plugins page. You should see a plugin called "User Interface Options", ensure that it is activated.

Plugin Structure

The uio-wordpress-plugin is essentially a WP plugin wrapper around Infusion's UI Options component. The basic parts of the plugin will be discussed below, but it may be useful to familiarize yourself with both the wp plugin and UI Options documentation.

lib/infusion

lib/infusion contains the Infusion code and resources. The specific version information is located in the Version.md file. In general the contents of this directory should only be modified if you are updating the version of Infusion distributed with the plugin.

ui-options.php

This is the main plugin and is used by Wordpress to identify the plugin. The information about the plugin is contained in a header comment at the top of the file. This information is used to display the plugin information on the Wordpress Admin's Plugin page. Additionally global variables for UIO_PLUGIN_URL and UIO_PLUGIN_DIR are set here, and logic for determining which other php scripts to run. 

admin-options.php

Provides the configuration for adding a settings panel to the Wordpress admin interface for the UI Options plugin.

inject-dependencies.php

Adds the CSS and JS dependencies to the Wordpress pages. Also used to translate some php data for use in the JavaScript files.

set-defaults.php

Sets the default values for the settings that can be modified on the plugins settings page.

uio.js

uio.js will be injected into each page of the Wordpress site, and contains the initialization code for running UI options. This includes injecting the templates for UI Options itself and for the Table of Contents (ToC) widget.

uio.css

uio.css contains the plugin specific styling needed for UI Options. In particular, you'll want to add/modify styles here for the plugin to work with Wordpress themes by default. All other styles used by UI Options are sources from lib/infusion

template.html

template.html contains the HTML required by UI Options. The template is injected into the page, and used as the container for rendering UI Options into.