How to implement jQuery-Plugin to Wordpress

Question

I'm still trying to implement the jquery.contenthover.js-Plugin into wordpress, but I just can't make it work.

First, I have unregistered the jQuery loaded by wordpress, because the plugin needs a higher version, and registered & enqueued a higher one.. and then enqueued the plugin-js .. for this I added following to my functions.php

function init_js_scripts() {
    if (!is_admin()) {

        wp_deregister_script('jquery');
        wp_register_script('jquery','//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js',false, '2.1.4');
        wp_enqueue_script('jquery');                        

        wp_enqueue_script('contenthover', get_template_directory_uri() . '/assets/js/jquery.contenthover.min.js', array('jquery'), false, true);


    }
}

add_action( 'init', 'init_js_scripts');

Whatever I try, it won't word :/ .. in the Firefox-Debugger the new jquery is loaded correctly but the jquery.contenthover.min.js is grayed out(?) .. how can I fix that?

EDIT:

Thanks to Jeremy, I now know, that the Plugin-Js is loaded correctly.. but it still won't wirk.. when I extract the code into a new HTML (away from wordpress) it all works fine.. in WP it doesnt.. .. I use

<script type="text/javascript"><!--//--><![CDATA[//><!--
var $j = jQuery.noConflict();
$j(document).ready(function () {

$j('#d1').contenthover({
    effect:'slide',
    slide_speed:300,
    overlay_background:'#000',
    overlay_opacity:0.8
});
});
 //--><!]]//></script>

but with no effort. Can someone tell me, what I do wrong?

Where is your script tag on your page? It must appear after the other scripts are included. To be sure that it's the case, you should write this script in an external file and enqueue it the same you you enqueued the library (be sure you indicate contenthover as a dependency). — Jeremy
– Jeremy, Commented Nov 11, 2015 at 15:24
the jQuery-2.1.4 is in the header as the fist js that is loaded.. the contenthover.js and the contenthoverInit ( here I have put the initialisation-code for the DIV) are at the bottom of the sourcecode.. close to the </body>-tag — AdmiralCrunch
– AdmiralCrunch, Commented Nov 12, 2015 at 9:38
Are you sure that #d1 exists? Also make sure the function is called, with console.log() for example. — Jeremy
– Jeremy, Commented Nov 12, 2015 at 15:23

Jeremy · Accepted Answer · 2015-11-11 14:45:38Z

1

Firefox shows in gray scripts that are minified, like the one you include. So actually, there's no problem: your script is included.

However, you should avoid using the init action for enqueuing scripts, as wp_enqueue_scripts is a better action here. Also, you indicated that the new jQuery is a dependency for your script, so you don't need to enqueue it by yourself. I wrote a complete guide about wp_enqueue_script() if you want to learn more about it.

answered Nov 11, 2015 at 14:45

Jeremy

5485 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to implement jQuery-Plugin to Wordpress

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related