Using Bower with WordPress

Until I met it, Bower was a tool I didn’t realize I needed, now I don’t know how I managed to live so long without it.

Until I met it, Bower was a tool I didn’t realize I needed, now I don’t know how I managed to live so long without it. Bower is a front-end package manager and comes to shine when those front-end packages are dependent on an author who isn’t you. Examples of front-end packages are Bootstrap, Respond.js, Modernizr, or your favorite jQuery slider. What Bower can help you do is: download and install front-end dependencies to a central location, keep them all updated, save you time, and find you a girlfriend[1].

One of the beautiful things about Bower is it doesn’t care about the application you use it in conjunction with, it works just as easily with WordPress as it does with any other CMS or web project.

To better show Bower in action, I created a simple WordPress theme and published it to a GitHub repo.

bower

Bower in my Workflow

First things first, you’ve got to have Bower’s dependencies — node and git — installed on your local machine. With those two things taken care of, open up command line and run:

$ npm install -g bower

This will install Bower globally so you can then run commands for it anywhere on your computer.

Next open up your text editor of choice and create a file .bowerrc at the root of the theme directory, this is for some minor Bower configurations. Inside that document, drop in:

{
  "directory": "assets/vendor"
}

What this does is change the default location for Bower to installs components from /bower_components to /assets/vendor. This step is totally optional but I opt for it because it helps me keep all of my site assets organized and inside the /assets directory which in turn keeps the rest of the theme directory organized.

Now we initiate Bower to the project, from the command line run:

$ bower init

This will take you through Bower’s command line interface and in doing so Bower will generate a bower.json file for you. After I ran that command on my project this is what Bower generated:

{
  "name": "wp-bower-tutorial",
  "version": "0.0.0",
  "homepage": "https://github.com/jaechick/wp-bower-theme",
  "authors": [
    "jaechick <hey@justinchick.com>"
  ],
  "description": "Just a simple theme to share using Bower in WordPress",
  "keywords": [
    "bower",
    "wordpress"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "assets/vendor",
    "test",
    "tests"
  ]
}

Next up, we’re going to search for and install a package. Bower can search and install any package with a .git endpoint so yeah, that means anything on GitHub is fair game. To find your package of choice simply head back over to the command line (still at the root of your theme directory) and type:

$ bower install [package-name] -S

99% of the time following this format is all you need but for the times when a little tweaking is needed, see the API docs.

A real life example of this would be:

$ bower install twbs/bootstrap -S

The install command installs said package locally while the -S flag saves the package to the bower.json document for working on the project in the future[2].

Assuming Bower did it’s thing correctly we should have two folders inside our assets/vendor directory: bootstrap and jquery. Even though we only installed Bootstrap, Bootstrap lists jQuery as a dependency in it’s bower.json file so Bower did all the work for us in making sure we have everything needed to get Bootstrap working.

Installing Bootstrap and using the -S flag updates our projects’s bower.json file, so it should now look like this:

{
  "name": "wp-bower-tutorial",
  "version": "0.0.0",
  "homepage": "https://github.com/jaechick/wp-bower-theme",
  "authors": [
    "jaechick <hey@justinchick.com>"
  ],
  "description": "Just a simple theme to share using Bower in WordPress",
  "keywords": [
    "bower",
    "wordpress"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "assets/vendor",
    "test",
    "tests"
  ],
  "dependencies": {
    "bootstrap": "twbs/bootstrap#~3.3.1"
  }
}

Now we have all the assets we need so it’s time to include them in our theme files. The correct way to do this is with wp_enqueue_style, wp_register_script, and wp_enqueue_script functions. Open up functions.php and drop this in there:

function bower_tutorial_scripts(){

	wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/assets/vendor/bootstrap/dist/css/bootstrap.css', false, null );

	wp_register_script( 'bootstrap_js', get_template_directory_uri() . '/assets/vendor/bootstrap/dist/js/bootstrap.js', array('jquery'), null, true );

	wp_enqueue_script( 'bootstrap_js' );
}

add_action( 'wp_enqueue_scripts', 'bower_tutorial_scripts' );

Remember, what we’re doing here is attaching the Bootstrap CSS and JS to the wp_head and wp_footer action hooks.

And bingo, bango we’re ready to go go. We’ve Bowered in dependencies we want to use and put them to use in our WordPress theme. Of course, that’s only part of Bower’s power. When Bootstrap (or any other dependencies listed in bower.json) all we need to do is get back to the command line and run:

$ bower update

Their’s plenty of other commands which can be run so check out the API docs for all of those.

Check out the Github repo for a look at what the completed project looks like.

Any questions? Feel free to tweet me.


[1] this actually hasn’t been fully tested yet.
[2] this also means you should commit bower.json to your git repo but don’t necessarily need to commit the dependencies especially when said dependencies are getting compiled by something like Grunt.