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.
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.
Well, now what?
Work with Me
I'm available for hire and always taking new clients, big and small. Got a project or an idea you'd like to discuss? Startup plan but no developer to make it happen? Just get in touch, I'd love to see if I can help you out!
Leave some Feedback
Got a question or some updated information releavant to this post? Please, leave a comment! The comments are a great way to get help, I read them all and reply to nearly every comment. Let's talk. 😀
Longren.io is proudly hosted by DigitalOcean
