Recommended way of including Bootstrap 4 in WordPress themes?

Hi all,

I’m working on my first WordPress theme for ThemeForest and i’ve just finished creating my build process (using Gulp.js).

I want to include Bootstrap 4 and some other libraries such as jQuery and Popper.js but I am unsure about the following;

  • whether I should be compiling these libraries together with my themes main stylesheet and javascript file (so that my theme will only have single .css and .js files which include the additional code from these libraries), or
  • whether I should be ensuring that each included library is kept separate from my themes main stylesheet and javascript file (from WordPress, i’ll end up having to enqueue a bunch of .css and .js files instead).

I am 99.999% sure that if this theme was going to be released on, it would require each library being kept separate (point 2). Is it the same sort of thing here at ThemeForest?

Regarding CSS, if I am to include the compiled version of Bootstrap 4, then i’ll end up having to write a bunch of CSS just to over-ride the default Bootstrap components. Whereas if I compile Bootstrap 4 SCSS along with the rest of my styles, I can change the variables and such like so that when I next re-compile, Bootstrap 4 will produce code that includes my changes, rather than requiring me to over-ride them later on.

As for JavaScript, I know WordPress ships with its own version of jQuery - I don’t want to disable that just because of my build process.

Finally, what is the feeling with packaging up build tasks such as Gulpfiles and Webpack setups along with your themes source code and compiled code? This would let the customer then “get their hands dirty” if they so wish, by having full access to your source code and more importantly, the means with which to update that source code (in the form of your build processes).

Any help or guidance would be greatly appreciate. Thank you.

To prevent the issues, you can use Bootstrap main files to modify the details. That’d take some time though but you can just use overwrites in that case.

About compiling, I believe you can compile into one CSS/JS file. If there’s a problem, the reviewer will notify you anyway.

Thanks for replying. Is there any way I can check thisat information out? I’d rather get it right from the start than have to amend my build later on.