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
|
1 2 |
bower install --save flickity gulp |
2. Adding the JS variable
Location: …/bedrock/web/app/themes/sage/assets/scripts/main.js
Add this to your main.js file
|
1 |
var flky = new Flickity( '.gallery', {}); |
Code Section Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
loadEvents: function() { // Fire common init JS UTIL.fire('common'); // Fire page-specific init JS, and then finalize JS $.each(document.body.className.replace(/-/g, '_').split(/\s+/), function(i, classnm) { UTIL.fire(classnm); UTIL.fire(classnm, 'finalize'); }); // Fire common finalize JS UTIL.fire('common', 'finalize'); } // Flickity JS plugin -MS flky = new Flickity( '.gallery', {}); }; // Load Events $(document).ready(UTIL.loadEvents); })(jQuery); // Fully reference jQuery after this point. |
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
{ "name": "sage", "homepage": "https://roots.io/sage/", "authors": [ "Ben Word <ben@benword.com>" ], "license": "MIT", "private": true, "dependencies": { "modernizr": "2.8.2", "jquery": "1.11.2", "bootstrap": "3.3.2", "flickity": "1.0.0" }, |
Add Flickity to your list of overrides by adding this to your bower.json file
|
1 2 3 4 5 6 |
"flickity": { "main": [ "./dist/flickity.pkgd.js", "./dist/flickity.min.css" ] } |
Abbreviated Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
"overrides": { "modernizr": { "main": "./modernizr.js" }, "bootstrap": { "main": [ ...bootstrap js files here ] }, "flickity": { "main": [ "./dist/flickity.pkgd.js", "./dist/flickity.min.css" ] } } |
Code Section Example
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
"bootstrap-sass-official": { "main": [ "./assets/stylesheets/_bootstrap.scss", "./assets/javascripts/bootstrap/transition.js", "./assets/javascripts/bootstrap/alert.js", "./assets/javascripts/bootstrap/button.js", "./assets/javascripts/bootstrap/carousel.js", "./assets/javascripts/bootstrap/collapse.js", "./assets/javascripts/bootstrap/dropdown.js", "./assets/javascripts/bootstrap/modal.js", "./assets/javascripts/bootstrap/tooltip.js", "./assets/javascripts/bootstrap/popover.js", "./assets/javascripts/bootstrap/scrollspy.js", "./assets/javascripts/bootstrap/tab.js", "./assets/javascripts/bootstrap/affix.js", "./assets/fonts/bootstrap/glyphicons-halflings-regular.eot", "./assets/fonts/bootstrap/glyphicons-halflings-regular.svg", "./assets/fonts/bootstrap/glyphicons-halflings-regular.ttf", "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff", "./assets/fonts/bootstrap/glyphicons-halflings-regular.woff2" ] }, "flickity": { "main": [ "./dist/flickity.pkgd.js", "./dist/flickity.min.css" ] } } } |