Genesis Simple Slideshow not loading after jquery sent to the Genesis Footer

[lvvvvvl]

Hello,

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.

[Christoph]

Hi,

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.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[lvvvvvl]

Thanks 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?

[Christoph]

You 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

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[lvvvvvl]

I 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 function

[Christoph]

Looks 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 );

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[lvvvvvl]

Thanks 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

[Christoph]

Ok. 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.

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[lvvvvvl]

Thanks 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?

[Christoph]

No, 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/

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[lvvvvvl]

Cheers for all your help, I'll look into these scripts further. You're a legend!

[Author]

Posts