How to add a third-party JS plugin to Sage

For this tutorial we’ll be adding the Flickity JS plugin to the Sage WordPress starter theme using Bower as our dependency manager.
Flickity is a great JS plugin for developing responsive touch enabled image sliders and galleries. You only need to complete step with if you want to direct Bower to only download specific parts of the plugin, rather than the entire plugin. In the Sage theme, this technique is used to only download components of Bootstrap that the Roots team has deemed essential, rather than downloading all of the Bootstrap components.

1. User Bower command to install Flickity

SSH from your main Sage theme directory

2. Adding the JS variable

Location: …/bedrock/web/app/themes/sage/assets/scripts/main.js

Add this to your main.js file

Code Section Example

3. Manually Updating Bower to Manage the JS Plugin Properly

Location: …/bedrock/web/app/themes/sage/bower.json

Adding flickity to bower.json

Add “flickity”: “1.0.0” to your list of bower dependencies

Add Flickity to your list of overrides by adding this to your bower.json file

Abbreviated Example

Code Section Example