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.
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.
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.
functions.php file already contains a
add_action( 'wp_enqueue_scripts', 'load_scripts' ), find the function it calls, and add
wp_enqueue_script there instead of making a new function like the example above.
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. 😀