Installing jQuery plugin to wordpress theme (Incredible)

by

Ok so here is the plugin in question I’m trying to integrate it on the homepage of my wordpress theme (incredible bought from themeforest)

After reading up on wordpress enqueue script and all that stuff i want to do it the right way from the start.

functions.php snippet: i just added 2 lines here, one to register my script “contenthover” the other to enqueue. Also i tried adding array('jquery')); to make sure its dependent on jquery but that only produced a parse/syntax php error 

if (!function_exists('pp_scripts')) {
    function pp_scripts() {

        wp_register_script('flexslider', get_template_directory_uri() . '/js/flexslider.js');
        wp_register_script('isotope', get_template_directory_uri() . '/js/jquery.isotope.min.js');
        wp_register_script('ender', get_template_directory_uri() . '/js/ender.min.js');
        wp_register_script('carousel', get_template_directory_uri() . '/js/carousel.js');
        wp_register_script('tooltip', get_template_directory_uri() . '/js/tooltip.js');
        wp_register_script('popover', get_template_directory_uri() . '/js/popover.js');
        wp_register_script('effects', get_template_directory_uri() . '/js/effects.js');
        wp_register_script('twitter', get_template_directory_uri() . '/js/twitter.js');
        wp_register_script('imagebox', get_template_directory_uri() . '/js/imagebox.min.js');
        wp_register_script('contenthover', get_template_directory_uri() . '/js/jquery.contenthover.js');
        wp_register_script('custom', get_template_directory_uri() . '/js/custom.js');

        wp_enqueue_script('flexslider');
        wp_enqueue_script('custom');
        wp_enqueue_script('isotope');
        wp_enqueue_script('ender');
        wp_enqueue_script('imagebox');
        wp_enqueue_script('carousel');
        wp_enqueue_script('twitter');
        wp_enqueue_script('tooltip');
        wp_enqueue_script('popover');
        wp_enqueue_script('effects');
        wp_enqueue_script('contenthover');

    }
    add_action('wp_enqueue_scripts', 'pp_scripts');
}

Next is the initialization code where i experimented with to make work, it didn’t work when inserted in the header.php or footer.php or template-homepage-xxx.php .

Although as far as i know, it should work if its included in any of those files, its just not the “best practice” way of doing things to keep things clean. The theme already has a custom.js file loaded so i thought the best way would be to initialize it from there

so here is the custom.js snippet: it already contains many small snippets of code for carousels/effects..etc.etc. I’ve tried using the standard $(), as well as jQuery()

var $j = jQuery.noConflict();
$j(document).ready(function () {
$j('.d1').contenthover({
    effect:'slide',
    slide_speed:300,
    overlay_background:'#000',
    overlay_opacity:0.8
});
});

Errors and outputs:

  1. With $() i get is undefined error in firebug console.
  2. With jQuery() and $j()i get Error: Permission denied to access property ‘toString’ on firebug console. not sure if thats related.
  3. Ive experimented with the sequence of scripts hoping that maybe its an issue related to the scripts being loaded in the wrong sequence, but no luck there.
  4. My last consideration would have to be lookin into the jquery.contenthover.js file it self to see if there are any conflicts that could arise with wordpress? would that be a wise thing to try and wrestle with?
  5. I’m sure this effect can be done vanilla and maybe with some clever CSS3 but i’m new to wordpress and want to figure the ins and outs so i can install custom scripts later on.

So thanks in advance, if there is anything thats unclear, or scripts you’d like to see. or perhaps a live example, just let me know. I would appreciate anything just a push in the right direction. Thanks all for your time.

2 Answers
2

You can load the scripts like this:

function wpa_90150_scripts() {
    wp_enqueue_script(
        'contenthover', 
        get_template_directory_uri() . '/js/jquery.contenthover.js', 
        array('jquery'), 
        '', 
        true 
    );
    wp_enqueue_script(
        'custom', 
        get_template_directory_uri() . '/js/custom.js', 
        array('jquery','contenthover'), 
        '', 
        true 
    );
}
add_action('wp_enqueue_scripts', 'wpa_90150_scripts');

Which I think you’re mostly doing correctly, especially if they are being loaded on your site.

And then initialize the jQuery scripts like this:

jQuery(document).ready(function($) {
    $('.d1').contenthover({
        effect:'slide',
        slide_speed:300,
        overlay_background:'#000',
        overlay_opacity:0.8
    });
});

You don’t know how long I struggled to get my first jQuery script integrated into WordPress! I wanted to break all the things. A lot of jQuery plugin documentation does not work until you do it the WordPress way which is what I posted above… opening with jQuery and passing the $ variable into the function. Basically, WP’s jQuery is already set to noConflict mode and so you must use the correct wrapper.

Leave a Comment