Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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.

share|improve this question

migrated from stackoverflow.com Mar 9 '13 at 23:34

This question came from our site for professional and enthusiast programmers.

    
Check the site using Inspector. Is the jQuery library successfully loaded at the first place? –  Terry Mar 9 '13 at 13:17
    
Hey Terry! Yes all the files are loaded up i checked, there are other jquery sliders and such in the theme so i know the jquery lib are loaded. Checked custom.js and the content.hover.js both are loaded, but i think custom loads first. if that may be an issue i'm not sure. –  TheSabz Mar 9 '13 at 13:25
    
Is there a reason you are using noconflict? and are you using custom.js to house your js for the plugin? –  David Chase Mar 9 '13 at 14:26
    
@DavidChase That was the last iteration of testing, ive tried with and without, i mainly tried it to test if the are any conflicts with other scripts loaded on the theme. And yes i'm using custom.js to house the js initialization for the plugin. inserting in footer.php/header.php/template-home.php doesn't work either. Thats why i'm forced to conclude the problem lies with the plugin itself –  TheSabz Mar 9 '13 at 15:23
    
I tested the plugin just now and i have to tell you theres no problem with the plugin. It must be the way you are trying to use it. Do you have a public facing version of the site? –  David Chase Mar 9 '13 at 15:33

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.

share|improve this answer
    
+1. Note: the add_action() call also needs to be pulled out of the pluggable-function conditional wrapper. –  Chip Bennett Nov 1 '13 at 13:55

try adding in the following format. Could also add all your javascript to one plugins file to cut down on requests.

add_action( 'wp_enqueue_scripts', 'load_my_files' );

// Register some javascript files. 

function load_my_files() {


  wp_register_script( 'plugins', get_stylesheet_directory_uri() . '/js/plugins.js',array('jquery'),false,true );
  wp_register_script( 'scripts', get_stylesheet_directory_uri() . '/js/script.js',array('plugins'),false,true );


wp_enqueue_script('jquery');
wp_enqueue_script( 'plugins');
wp_enqueue_script('scripts');


}
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.