Adding Pace From HubSpot To Your WordPress Theme

Pace.js, from HubSpot, is pretty cool. It’s a page load progress bar that usually sits at the top of your website. The Minimial theme for Pace, which I like the best, gets hidden by the WordPress admin bar if you have it enabled. There’s a few different themes though, most work just fine with the WordPress admin bar.

HubSpot describes Pace better than I can.

Include pace.js and a CSS theme of your choice, and you get a beautiful progress indicator for your page load and ajax navigation.

No need to hook into any of your code, progress is detected automatically.

Instead of downloading pace.js, I like to use cdnjs for this type of thing, here’s pace.js on cdnjs.com.

In your functions.php file, just call the cdnjs file instead of a local file. You will, however, have to host the Pace theme CSS locally, which is usually tiny, unless you choose one of the more animated themes. I personally like the Center Simple theme the best.

Pace Themes

The wp_enqueue_style() call below loads /css/pace.css from your theme’s stylesheet directory. That’s the file that should contain the CSS provided by the Pace theme download.

/**
* load_scripts
*
* load up css and javascript for Pace.js
*/
function load_scripts() {
    // load styles
    wp_enqueue_style( 'pace-css', get_stylesheet_directory_uri() . '/css/pace.css' ); // Center Simple Theme CSS

    // load javascript
    wp_enqueue_script( 'pace', 'http://cdnjs.cloudflare.com/ajax/libs/pace/0.4.17/pace.min.js' ); // pace.min.js
}
add_action( 'wp_enqueue_scripts', 'load_scripts' );

If your functions.php file already contains a add_action( 'wp_enqueue_scripts', 'load_scripts' ), find the function it calls, and add wp_enqueue_style and wp_enqueue_script there instead of making a new function like the example above.

This is more for theme developers to build into their themes as options and such, so if you’re a regular WordPress user you’d be better served by a functionality plugin. Essentially a plugin that you always have activated that adds all the necessary extra elements of the site, like the Pure JavaScript and CSS.

I’ll show how to create your own functionality plugin within the next few posts/days. If you want notified of when exactly it’s posted, subscribe below. Look for the Get New Posts via E-Mail heading.

Update: There’s a plugin to do this, too.