Community Forums › Forums › Archived Forums › Design Tips and Tricks › Genesis Simple Slideshow not loading after jquery sent to the Genesis Footer
Tagged: jquery
- This topic has 10 replies, 2 voices, and was last updated 7 years, 5 months ago by
lvvvvvl.
-
AuthorPosts
-
June 30, 2016 at 7:53 pm #188694
lvvvvvl
ParticipantHello,
I'm working on a new child theme from scratch and am trying to keep the code as clean and light as possible.
I heard it's best practice to load jquery at the bottom of the website, and load plugins stylesheets and javascript resources conditionally only on the pages that use them (in my case Slideshow on the homepage).
I successfully loaded the slideshow conditionally with:
// Dequeue css and js for Genesis Slider function my_dequeue_styles() { wp_dequeue_style( 'slider_styles' ); } function my_dequeue_javascript() { wp_dequeue_script( 'flexslider' ); } add_action( 'wp_print_styles', 'my_dequeue_styles', 100 ); add_action( 'wp_print_scripts', 'my_dequeue_javascript', 100 ); // Conditionally load css and js for Genesis Slider function my_enqueue_styles() { if( is_front_page() ) { wp_enqueue_style( 'slider_styles' ); } } function my_enqueue_javascript() { if( is_front_page() ) { wp_enqueue_script( 'flexslider', get_stylesheet_directory_uri() . '/js/jquery.flexslider.js', array( 'jquery' ), true ); } } add_action( 'wp_print_styles', 'my_enqueue_styles', 100 ); add_action( 'wp_print_styles', 'my_enqueue_javascript', 100 );
But after sending the jquery to the bottom, it doesn't work anymore. I imagine its cause the slider wasn't loading before jquery which is why I added the array above to make flexslider dependent on jquery loading but I don't think I've done it correctly as it still doesn't show. This is my jquery code:
/** Remove jQuery and jQuery-ui scripts loading from header */ add_action('wp_enqueue_scripts', 'cr_script_remove_header'); function cr_script_remove_header() { wp_deregister_script( 'jquery' ); wp_deregister_script( 'jquery-ui' ); } /** Load jQuery and jQuery-ui script just before closing Body tag */ add_action('genesis_after_footer', 'cr_script_add_body'); function cr_script_add_body() { wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js', false, null); wp_enqueue_script( 'jquery'); wp_register_script( 'jquery-ui', 'http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js', false, null); wp_enqueue_script( 'jquery-ui'); }
Is there anything I may have done wrongly? Thank you.
June 30, 2016 at 8:10 pm #188695Christoph
MemberHi,
for starters, I'd not use wp_print_styles or _scripts:
Since WordPress 3.3 wp_print_styles should not be used to enqueue styles or scripts. (see: http://make.wordpress.org/core/2011/12/12/use-wp_enqueue_scripts-not-wp_print_styles-to-enqueue-scripts-and-styles-for-the-frontend/)
wp_enqueue_script has a third parameter (true or false) that determines whether the script is output in the header (false) or in the footer (true).
Trying to change the output location with genesis hooks is not best practice.You should not add an external version of jQuery. It is strongly recommended to use the jQuery that WordPress ships with.
And just for a reality check, having even just one image on a page will have way more impact than loading a few kb of Javascript/jQuery.
June 30, 2016 at 8:29 pm #188698lvvvvvl
ParticipantThanks for the response Christoph.
I've heard from a variety of websites (e.g: http://www.wpbeginner.com/wp-themes/replace-default-wordpress-jquery-script-with-google-library/) to load jquery from the Google CDN as it's not only likely that it's already cached in the visitor's browser, but their CDN servers deliver it faster than my website ever could.
I agree, images are really high in loading time which is why my website is free from images apart from the slideshow images in the front page. If I can avoid WordPress having to load a couple of extra files unnecessarily there's no harm in trying.
How would I go about avoiding wp_print_styles in favor of wp_enqueue_script with a true or false statement?
June 30, 2016 at 9:50 pm #188700Christoph
MemberYou are free to do whatever you like.
Best practice and recommended is to use the included version of jQuery.
Btw, that article is over 4 years old and the CDN argument more fitting for loading Google fonts.
Here's a 3 year old article on why it´s a bad idea https://pippinsplugins.com/why-loading-your-own-jquery-is-irresponsible/ 😉Take a look at how the Genesis child themes are enqueuing scripts.
Here is a link to the WordPress codex: https://codex.wordpress.org/Plugin_API/Action_Reference/wp_enqueue_scripts
June 30, 2016 at 10:45 pm #188702lvvvvvl
ParticipantI see, after your advice and the article I'll use the wordpress jquery and see how it goes. 🙂
I've modified the code according to the helpful codex links, this is what I got:
// Dequeue css and js for Genesis Slider function my_dequeue_styles() { wp_dequeue_style( 'slider_styles' ); } function my_dequeue_javascript() { wp_dequeue_script( 'flexslider' ); } // Conditionally load css and js for Genesis Slider function my_enqueue_style() { if( is_front_page() ) { wp_enqueue_style( 'slider_styles', false ); } } function my_enqueue_script() { if( is_front_page() ) { wp_enqueue_script( 'flexslider', true ); } } add_action( 'wp_enqueue_scripts', 'my_enqueue_style' ); add_action( 'wp_enqueue_scripts', 'my_enqueue_script' );
So even if jquery is now loading in the header, it still doesn't show the slideshow. With Inspect Element I see these errors:
Failed to load resource: net::ERR_NAME_NOT_RESOLVED http://xxxxxxxxxxxx.com1/?ver=4.5.3
(index):185 Uncaught TypeError: $(...).flexslider is not a functionJuly 1, 2016 at 7:57 am #188724Christoph
MemberLooks like you need to add the locations of the scripts / styles.
You had this in your first post:
wp_enqueue_script( 'flexslider', get_stylesheet_directory_uri() . '/js/jquery.flexslider.js', array( 'jquery' ), true );and this is in your latest:
wp_enqueue_script( 'flexslider', true );
July 2, 2016 at 4:37 am #188751lvvvvvl
ParticipantThanks Christoph.
I've tried your suggestion, and it still doesn't appear for some odd reason.
This is the link of the test website if it helps: http://goo.gl/qTZFYs
July 2, 2016 at 9:08 am #188768Christoph
MemberOk. I thought you were creating a custom slider with the flexslider script but you are using Genesis Responsive Slider.
Just let the plugin handle the script.
July 3, 2016 at 4:06 am #188793lvvvvvl
ParticipantThanks Christoph.
The issue I'm having is due to letting the plugin handle the script. It's creating an unnecesary extra load in resources and load time in every page, and I was hoping I could load it conditionally only on the pages that use Genesis Responsive Slider instead of every page.
Is this possible at all?
July 3, 2016 at 8:46 am #188800Christoph
MemberNo, it´s a lot more complicated because of the way the plugin is enqueuing the script/styles.
You'd have to remove the way the plugin initializes, write a custom function for the initialization and then add the scripts/styles on a later hook so you can check for the page you are on.
And if the plugin changes the way it is loading, your custom code will break.I'd try a different plugin or even a jQuery only option, like:
http://kenwheeler.github.io/slick/ http://bxslider.com/ http://www.owlcarousel.owlgraphic.com/
You could even search for a CSS only option (search for css3 slider):
https://www.smashingmagazine.com/2012/04/pure-css3-cycling-slideshow/
July 3, 2016 at 6:48 pm #188816lvvvvvl
ParticipantCheers for all your help, I'll look into these scripts further. You're a legend!
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.