Archived topic
Add nice loading effects to Generatepress with Pace.js
8 replies · Started by Roberto Enrique on May 21, 2016
Have you ever noticed the red loading bar in youtube's topmost part?
Well, adding that functionality to your GP powered site is pretty easy with Pace.js
You just need to add the script and the desired style to your child theme folder (i usually create dedicated folders for /js and /css stuff in my child themes) and then add this to your functions.php
function pacejs_styles_and_scripts() {
wp_enqueue_style( 'pace', get_stylesheet_directory_uri() . '/css/pace-theme-flash.css');
wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri() . '/js/pace.min.js');
}
add_action( 'wp_enqueue_scripts', 'pacejs_styles_and_scripts' );
As you can see in the Pace.js website there are a lot of styles already available, my personal favorite is the flash theme but you can choose another one just replacing/adding the css file in the css folder with the one you like and eventually modifying the wp_enqueue_style in the function accordingly.
If you feel lazy you can use a ready made child theme that can be downloaded here:
http://www.artomultiplo.net/extra/gp-pacejs.zip
You can see a working example here: filippogismondo.artomultiplo.net
I think it really helps reducing the perceived slowlyness of a website :)
Hope you like it
Oooh, fancy! Thanks Roberto! :)
Hi there!
I was messing around with this code, but I really can't get it working on my local installation of generate press.
I tried with a couple of others child themes of mine and seems to work flawlessy in each one of them.
The result I get with generate press is a violet bar loading at the center of the screen and the regular animation you choose via css. I really don't get what I am missing...
Could you please shed some light? :)
(I love this theme soooooooo much, just bought the add-on bundle yesterday)
I personally love playing around with css. And making child themes.
Especially since Generatepress with its ad-ons makes it so easy.
However for the less technically savvy. I'd recommend the plugin:
https://wordpress.org/plugins/brozzme-material-loading/
It's interface lets you choose all the options.Line height, color, style etc.
Much easier for novice users.
Thanks for the info Mosche!
I really appreciate your answer and I will definitely give it a look.
However, I still don't get why I can't get the effects I want only in generatepress :)
It's like if the script gets loaded twice. Once with the standard default loading bar in the center and in the meantime the correct animation gets loaded too...
I tried the same snippet on 4 different child themes without any issue and obtaining exactly the effect I should have
Can someone help me to point out why?
Why don't you share your child?
Of course!
Thanks for your interest in helping me out :)
Here it is!
<?php
/**
* Generate child theme functions and definitions
*
* @package Generate
*/
function pacejs_styles_and_scripts() {
wp_enqueue_style( 'pace', get_stylesheet_directory_uri() . '/css/pace-theme-corner-indicator.css');
wp_enqueue_script( 'theme-scripts', get_stylesheet_directory_uri() . '/js/pace.min.js');
}
add_action( 'wp_enqueue_scripts', 'pacejs_styles_and_scripts' );Here you have link to see it in action:
https://drive.google.com/open?id=0B90-Gwn3YdBFc3JteVh2ekZSYTQ
That's actually really weird.
Are you using any plugin that could be messing things up?
I deactivated everything, one by one and still no solution about it :(
The really weird thing, is that this behaviour only happens with generatepress and not with any other theme. When I tried to switch between them all the plugins were active.
Any other guess?
Let me thank you all again for your kind interest :)