I’ve got to the point in my project where I need to install a third-party Javascript plugin for extra functionality; in this case, I’m using Bootstrap Touch Carousel to enable gestures for mobile devices on bootstrap carousels.
Many good plugins support installation using Bower (including this Bootstrap Touch Carousel plugin), which I can only assume is a neat fit with Sage. I have installed BTC using: $ bower install bootstrap-touch-carousel
which has of course installed the plugin files to the bower_components
folder in my theme directory.
I feel I am close with the steps I’ve taken to implement this plugin, however I’ve not yet had success seeing the .js
or .css
files loaded in the theme.
I have updated my bower.json
file to include BTC:
{
"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",
"bootstrap-touch-carousel": "0.8.0"
},
"overrides": {
"modernizr": {
"main": "./modernizr.js"
},
"bootstrap": {
"main": [
"./less/bootstrap.less",
"./js/alert.js",
"./js/button.js",
"./js/carousel.js",
"./js/collapse.js",
"./js/dropdown.js",
"./js/modal.js",
"./js/tooltip.js",
"./js/popover.js",
"./js/scrollspy.js",
"./js/tab.js",
"./js/affix.js",
"./fonts/glyphicons-halflings-regular.eot",
"./fonts/glyphicons-halflings-regular.svg",
"./fonts/glyphicons-halflings-regular.ttf",
"./fonts/glyphicons-halflings-regular.woff",
"./fonts/glyphicons-halflings-regular.woff2"
]
},
"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"
]
},
"bootstrap-touch-carousel": {
"main": [
"/dist/css/bootstrap-touch-carousel.css",
"/dist/js/bootstrap-touch-carousel.js"
]
}
}
}
And my manifest.json
file:
{
"dependencies": {
"main.js": {
"files": [
"scripts/main.js"
],
"main": true
},
"main.css": {
"files": [
"styles/main.less"
],
"main": true
},
"editor-style.css": {
"files": [
"styles/editor-style.less"
]
},
"jquery.js": {
"bower": ["jquery"]
},
"modernizr.js": {
"bower": ["modernizr"]
},
"bootstrap-touch-carousel": {
"bower": ["bootstrap-touch-carousel"]
}
},
"config": {
"devUrl": "theagsc.dev"
}
}
And I am assuming once the above has been ‘built’ (am I correct in thinking that this is done by running $ gulp
in the theme directory?), I am to include something like the following in my /lib/assets.php
:
function assets() {
wp_enqueue_style('sage_css', asset_path('styles/main.css'), false, null);
if( is_frontpage() ) {
wp_enqueue_script('touch_carousel', asset_path('scripts/bootstrap-touch-carousel.js'), false, null);
wp_enqueue_style('touch_carousel', asset_path('styles/bootstrap-touch-carousel.css'), false, null);
}
}
As I’m sure you can tell, a lot of this is guesswork. I’m enjoying that Sage is helping me learn so much about code, and any help you can give me would be so valuable. Please ask for clarification if any of this is unclear.
Thanks guys.
UPDATE: Also, it might be worth noting that bower_components/bootstrap-touch-carousel/
contains a Gruntfile.js
NOT a gulpfile.js
. I’m not sure if this impacts compatibility with gulp?