Trouble with enqueue_scripts for gallery plugin

Question

I am trying to use this Justified Gallery I found [ http://miromannino.github.io/Justified-Gallery/][1]

[1]: http://miromannino.github.io/Justified-Gallery/ on this website www.dangoodeofficial.co.uk

I managed to get it working by adding this is the footer -

<script src="http://dangoodeofficial.co.uk/wp-content/plugins/Justified-Gallery/libs/jquery/jquery.min.js"></script>

<link rel="stylesheet" href="http://dangoodeofficial.co.uk/wp-content/plugins/Justified-Gallery/dist/css/justifiedGallery.min.css" type="text/css" media="all">

<script src="http://dangoodeofficial.co.uk/wp-content/plugins/Justified-Gallery/dist/js/jquery.justifiedGallery.min.js"></script>

But the jquery.min.js messes up the rest of my site. From a previous question I asked I believe it is because Wordpress already has jQuery built in, but I could only get the gallery to show when I included the jquery.min.js in the footer.

I have been trying to figure out how to enqueue the scripts, as I believe this to be the way to resolve my issues. I have never done this before so I don't really know where to start. I did my research and I added this to my child themes functions.php

// Additional Functions
// =============================================================================
function justifiedGallery() {

    wp_enqueue_script('jQuery');

    wp_register_script('JG_jQuery_js', get_template_directory_uri() . '/plugins/Justified-Gallery/libs/jquery/jquery.min.js', array('jQuery'),'', true); 
    wp_register_script('JG_js', get_template_directory_uri() . '/plugins/Justified-Gallery/dist/js/jquery.justifiedGallery.min.js', array('jQuery'),'', true);
    wp_register_style('JG_css', get_template_directory_uri() . '/plugins/Justified-Gallery/dist/css/justifiedGallery.min.css', '','','screen');


    wp_enqueue_script('JG_jQuery_js');
    wp_enqueue_script('JG_js');
    wp_enqueue_style('JG_css');

}

    add_action ('wp_enqueue_scripts', 'justifiedGallery');

But I just can't quite seem to get it to work. I even tried uploading the three files I am trying to call into my child themes directory so the file paths were /wp-content/themes/x-child/js/jquery.justifiedGallery.min.js and similar for the two files and used

get_stylesheet_directory_uri() . 'js/.justifiedGallery.min.js', array('jQuery'),'', true);

I know there is probably just a simple error somewhere but with my limited knowledge I am clueless. Any help would be most appreciated.

Thank you

Answer 1

The real problem seems to be a poorly written plugin that requires you to manually copy all the JavaScript to your template and manually include it instead of managing it itself.

Since including jQuery manually in the footer messes with your existing site, jQuery is likely already being included in your template. If you want to make sure it is only called once, and don't want to use the jQuery version they have built in, you will first have to unregister the version of JQ that WP already has than register your own version. Try this:

function externalJQ() {
  if( ! is_admin() ) {
    // Register and Enqueue External jQuery in Footer
    wp_deregister_script('jquery');
    wp_register_script('jquery', "https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js", array(), null, true); // Or whatever version of JQ you want
    wp_enqueue_script('jquery');
  }
}
add_action('wp_enqueue_scripts', 'externalJQ' );

That said, any plugin worth it's salt that uses jQuery shouldn't require jQuery being bound to the $ namespace (that may be part of the problem, I didn't go through the code of the plugin) and you shouldn't have to do any of this.

Also, the plugin itself should be calling any JavaScript it needs. If you need to include any of the plugin's JavaScript in your template, you might want to steer clear of this plugin.