Skip to content
This repository has been archived by the owner on Nov 4, 2024. It is now read-only.

0. Quick Start

Jump to bottom
Will Jones edited this page Apr 11, 2016 · 27 revisions

Before you begin editing the theme, please read through the rest of this wiki.This section will only help you setup a basic dev environment.

1. Install Node.js and WordPress locally

  1. Download and install Bitnami
    • On Windows, you may get a "Windows Security" prompt for firewall permissions. Uncheck all boxes by any type of network, then click 'Cancel'.
  2. Goto Bitnami's WordPress folder (C:\Bitnami\wordpress-<VERSON_NUMBER>\apps\wordpress\htdocs\ in Windows). Open wp-config.php file and add this line to the top: define('WP_ENV', 'development');
    • This puts Bitnami Worpress in DEV mode for roots-ualib theme development
  3. Download and install Node.js

2. Start Bitnami to test and view changes locally

  1. Run the Bitnami Worpress manager (may just be named wordpress-manager.exe)
  2. Click Go to Application - this opens the browser to http://localhost/wordpress
  3. Login to you local Wordpress and set the University Libraries' theme as active.

3. Install PhpStorm IDE

  1. Download and install PhpStorm website.
    • If you don't already have a PhpStorm License, complete a TRF to purchase on and submit it to ACS.

NOTE: Any IDE will work, but PhpStorm is the only one these documents cover, as it integrates all the required dev tools.

4. Clone roots-ualib repo as local Wordpress theme

  1. Open PhpStorm.
  2. VCS -> Check out from Version Control -> Github
  3. Choose the ualibweb/roots-ualib repo from the dropdown
  4. Set the Parent Directory you local WordPress themes folder (C:\Bitnami\wordpress-<VERSON_NUMBER>\apps\wordpress\htdocs\wp-content\themes in Windows).
  5. Click 'Clone' button.

5. Install Grunt, Bower, and dependencies

  1. In PhpStorm open the embedded terminal using any of the following commands/menus:
  • Press Alt+F12
  • Click the Terminal tool button at the bottom left of the PhpStorm window.
    • If the Terminal tool button isn't visible:
      1. Click or hover over the show_tool_window_bars icon at the very bottom left (It looks like a nondescript box icon).
      2. Click the Terminal button.
  1. Type the following command into the terminal prompt. This will allow the grunt command to run *globally from any directory on your system.
npm install -g grunt-cli
  1. Now install the required Grunt tools for this project (defined in the package.json file).
npm install
  1. Type the following command to install Bower globally
npm install -g bower
  1. Now install all dependencies (defined in the bower.json file).
bower install

Grunt and Bower both run off the Node.js platform. Node uses it's "Node Package Manage" (npm) to allow developers to download various software packages.

6. Start developing

  1. Start Bitnami and go to http://localhost/workpress
  2. Then, from PhpStorm, Select the default task from the Grunt panel
  • Running grunt default in your terminal works as well
  1. Editing any of the theme's JS, Styles, or PHP files will auto-refresh you local WordPress in your browser.

◄ Home     Before you begin ►

Clone this wiki locally