# How to correctly add bxslider to my theme **URL:** https://discourse.roots.io/t/how-to-correctly-add-bxslider-to-my-theme/1952 **Category:** sage **Created:** 2014-07-16T19:05:18Z **Posts:** 15 ## Post 1 by @ul71m0 — 2014-07-16T19:05:19Z Hi So im trying to add bxslider to my theme. I saw a post [here](http://discourse.roots.io/t/how-to-adding-a-responsive-jquery-slider-to-roots/1295/4) but im not sure how to implement that. So here are my steps 1. In my terminal i type grunt watch 2. Than paste jquery.bxslider.min.js to my assets/js/plugins 3. In \_main.js i add code `$('.bxslider').bxSlider({ pagerCustom: '#bx-pager' });` 4. When i save i get error `Running "jshint:all" (jshint) task ERROR: Can't find config file: .jshintrc` 5. I check my scripts.min.js and i dont see anything related to bxslider ( didnt expected it when i saw that error ) On that link @JulienMelissas gave steps how to do that here se quote: > [@How to adding a Responsive jQuery Slider to Roots](https://discourse.roots.io/t/how-to-adding-a-responsive-jquery-slider-to-roots/1295/3): > > Add bx slider to the plugins of roots, you may have to tell grunt not to run a js hint on the minified version. > Change the bx slider css to a less file and import at top of app.less > Drop images into the img folder and change the image path in the bxslider.less file to reflect the new image path (I like to put mine into a bxslider folder inside the img folder) > Pull your content in from somewhere (I like to use the advanced custom fields’s repeater function for slides) > Add your html markup for the slider > Call your slider in main.js Im not sure how to tell grunt not to run a js hint on the minified version, rest of the steps i get pretty much, but i cant to this first one. --- ## Post 2 by @JulienMelissas — 2014-07-16T19:23:01Z In gruntfile.js - you need to add a ! in front of the thing you don’t want jshint to watch ``` jshint: { options: { jshintrc: '.jshintrc' }, all: [ 'Gruntfile.js', 'assets/js/*.js', 'assets/js/plugins/*.js', '!assets/js/jquery.bxslider.min.js', '!assets/js/scripts.min.js' ] }, ``` That’s from an old project, but you probably get the idea. --- ## Post 3 by @ul71m0 — 2014-07-16T19:40:29Z Thanks for the fast answer. I just want to mention that i didnt change anything in gruntfile.js before this and it is default. I did what you said and hit save while my grunt watch is on. And still im getting this : ``` Reloading watch config... Running "watch" task Waiting...OK File "Gruntfile.js" changed. Running "jshint:all" (jshint) task ERROR: Can't find config file: .jshintrc ``` Do i need to enter something else than grunt watch? And how do i know that script file is included in scripts.min.js, im checking manually with find but i dont find any instance of bxslider into scripts.min.js Thanks Alex --- ## Post 4 by @JulienMelissas — 2014-07-16T19:59:06Z > [@ul71m0](#): > > ERROR: Can’t find config file: .jshintrc Alex, You probably should have done a search for that issue, it’s been covered a few times before… > [@Error: Can't find config file: .jshintrc](http://discourse.roots.io/t/error-cant-find-config-file-jshintrc/351): > > Hello I’ve just seen the screencast about grunt - thanks for making it! When compiling I see this error Running "watch" task Waiting...OK File "assets/js/\_main.js" changed. Running "jshint:all" (jshint) task ERROR: Can't find config file: .jshintrc Do I have to install JShint? or what else? Thanks for helping! I would have pointed to that first but I read bx slider and thought that was the issue you were having. Add the jshint file and then see what happens. --- ## Post 5 by @ul71m0 — 2014-07-16T20:56:23Z Hi i saw that post but the guy said he had some errors so i didnt followed it… I have added that file and now grunt passes fine, but still i don’t se any trace of bxslider in my scripts.min.js file. Is there any step that im missing? --- ## Post 6 by @JulienMelissas — 2014-07-16T23:06:59Z What version of roots are you on? Can you tell me the path of the file relative to your grunt folder? Paste your entire gruntfile in here as well if you would, that should tell me what’s up along with the above information. --- ## Post 7 by @cfx — 2014-07-16T23:27:32Z Not to threadjack here but @ul71m0: can you verify whether you have the file `.jshintrc` in the root of your theme directory? If not then please create it with this as its contents: [https://github.com/roots/roots/blob/master/.jshintrc](https://github.com/roots/roots/blob/master/.jshintrc) Then try your `grunt` task again and paste any error message that is output. --- ## Post 8 by @JulienMelissas — 2014-07-16T23:53:43Z @cfx - I think he already added the file, he just probably didn’t add it to the list to compile with everything… That said, I didn’t mention he should copy that one. We’ll see what he replies with. --- ## Post 9 by @ul71m0 — 2014-07-17T11:45:57Z This is my gruntfile [http://pastie.org/9399223#9](http://pastie.org/9399223#9) After adding jshint file i dont have any errors, it jsut isnt added to final scripts.min.js file. > he just probably didn’t add it to the list to compile with everything Thats the part that i need to do, im just not sure what do i need to add and where, i thought that it is enough to put file in my /assets/js/plugins directory and it will be complied automatically without need to add it in gruntfile.js. I mean this is not just for bxslider, what are the required steps to add your own custom script to be compiled in scripts.min.js. Im using latest version of roots, and my grunt is working fine because all my styling works without any problem. Im using phpstorm and its terminal so when i run npm install im in theme root directory. --- ## Post 10 by @JulienMelissas — 2014-07-17T13:29:47Z Line 49 of your gruntfile should be pulling in the most recent version of your JS file, and any js files added to the `/plugins/` folder, so you shouldn’t have to do anything as long as you’re running `grunt dev` or just `grunt`. Are you sure your browser hasn’t cached the js file due to an old version of the scripts file? --- ## Post 11 by @ul71m0 — 2014-07-17T13:45:09Z Julien thanks a lot, so far i was doing grunt watch and it didnt worked, now i did grunt dev and after saving it got added to scripts.min.js So just to get it right this time and for the future: If i put js file to /plugins/ folder i dont need to do anything in gruntfile.js , or i need to tell jshint to ignore it if it is already minified? And instead of grunt watch i need to type grunt dev? --- ## Post 12 by @cfx — 2014-07-17T15:18:14Z From the docs: > Available Grunt commands > `grunt dev` — Compile LESS to CSS, concatenate and validate JS > `grunt watch` — Compile assets when file changes are made > `grunt build` — Create **minified** assets that are used on non-development environments If you set `define('WP_ENV', 'development');` in your `wp-config.php` then Roots will **not** use minified assets. You can make `grunt watch` create minified assets if you like, see this post: [Add x.min.css & x.min.script to watch - #4 by cfx](http://discourse.roots.io/t/add-x-min-css-x-min-script-to-watch/1920/4) --- ## Post 13 by @JulienMelissas — 2014-07-17T21:13:28Z Glad you worked it out! @cfx - thanks for posting those details to clear it up… And just FYI @ul71m0, if I’m only using bxSlider on one page, I tend to leave it in the js/`plugins folder`, DON’T include it in the minified list, and enqueue it conditionally using an is\_page\_template statement in `/lib/scripts`, just to keep down page load. The CSS is small for bxSlider so I usually just make it into a .less file and import it into app.less Happy site building! --- ## Post 14 by @cfx — 2014-07-18T03:07:03Z @JulienMelissas that’s a great approach and definitely recommended. There are a few threads around on how to do that, here’s a quick reference: [Is there a trick to conditionally wp\_enqueue\_scripts?](http://discourse.roots.io/t/is-there-a-trick-to-conditionally-wp-enqueue-scripts/1504/5) --- ## Post 15 by @ul71m0 — 2014-07-18T05:49:25Z Good stuff guys, it will help me a lot. Thanks :smile: --- ## Post 16 by @ben — 2022-02-26T02:58:47Z