How To Implement Bower Package Manager Into WordPress Themes

All responsible/good front-ender developers use some kind of package management these days, whether it be in the form of Composer, Node Package Manager, Component or Bower. If you’re not using package management for your code, it’s not too late to start.

The power of Bower (ha, that rhymes)

The true value of a front-end package manager like Bower is shown when you implement it into your WordPress themes. Have you ever had to update jQuery on a clients WordPress site you built 3 years ago or even on your own sites? I have and it’s not pretty.

Have you ever needed to use one or more specific versions of a Javascript library like jQuery because you support older versions of browsers that newer versions of your favourite libraries cannot?

If you’re like most, you probably have a vendor directory within your js folder which contains all of your different Javascript libraries like jQuery, Bootstrap, Modernizr and any other libraries you are using.

Requirements

Node.js

Before we can even install Bower, we need Node.js. I won’t cover how to install Node.js, but if you’re on a UNIX based system, it’s easy to install.

Bower itself

We need to install the Bower Node package globally by running the following command from our command line:

npm install -g bower

A task runner

An important step I often see overlooked is the fact if you’re using Bower in your WordPress themes and or web projects, you are going to need a task runner. The bower_components directory is meant for local development and should not be uploaded to your server. You don’t upload your node_modules folder from your local version, so don’t do it for Bower components either.

A couple of good choices are GulpJS and GruntJS. There are others, but they’re the two contenders with great support. Personally I find GulpJS to be a lot easier to use and configure, perfect for someone new to the whole task-runner thing.

I won’t go into details as to how you can setup and use a task runner for your Bower components, there are a lot of resources out there telling you how to do so though.

Integrating Bower into WordPress

Install some dependencies

Now we have successfully installed Bower, navigate to your WordPress theme directory. Open up a terminal/command line prompt and navigate to the same directory and then type the following to generate a Bower package file:

bower init

This will create a bower.json file in your theme directory (provided Bower was installed correctly).

For this example we are going to install jQuery because, well, everyone mostly uses jQuery in their projects. Simply type the following to get a shiny new version of jQuery (which using the –save directive will be added to our bower.json):

bower install jquery --save

But, wait! What if we want to install a particular version of jQuery? Bower allows you to specify a version using a version directive, for the sake of this example, lets install jQuery 1.10:

bower install jquery#1.10 --save

Hang on, because I am supporting IE8 visitors, I want jQuery 1.10 and jQuery latest version for IE9 and up:

bower install jquery-ie=jquery#1.10 jquery=jquery --save

The above snippet is interesting, lets explain what’s going on. If you require multiple versions of the same library calling a regular Bower install twice will mean the second install directive will overwrite the first version instead of download two completely separate installations.

In Bower there is a cool feature that allows us to alias our packages with a label, we can have hundreds of the same library just by changing the label. Once again we are using the –save flag to add these packages to our bower.json so others can install them in their own local versions.

For more information about the available commands in Bower and what you can do, check out the official Bower site for more information than covered in this post.

Using Bower dependencies in your theme with a task runner

We now should see a bower_components folder has been created, inside of it you will see jQuery (if you did all of the above steps you’ll see more than one folder). You might think using these components is a simple matter of referencing them in a wp_enqueue_scripts directive and leave it at that.

But remember we said the bower_components folder doesn’t get uploaded? It’s a temporary folder for development and should be added to your .gitignore file so you don’t accidentally commit it to your Git repository.

Using your task runner of choice, you are going to reference the path to your bower_components module within your gruntfile.js or gulpfile.js file, inside of a task called “bower-tasks” or something. Remember to be mindful of dependencies that have Javascript, CSS and Fonts as well.

The idea is to reference, pull and then work with your Bower component files, but never upload them or include and use them directly. If you decide to choose Gulp, this article I wrote here with some Gulp how-to’s will explain how to copy files, minify Javascript, compile SASS styles and more.

Questions?

If I didn’t cover something or you couldn’t follow along, leave a comment or drop me an email and I would be happy to help you (free of charge) to implement Bower into your front-end workflow.