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.

I have successfully been using jpanelmenu in my wordpress themes for some time, loading jquery from the google api, like this:

if ( !is_admin() ) {

    // jQuery
    wp_deregister_script('jquery');
    wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"), false);
    wp_enqueue_script('jquery');

    // load jPanelMenu
    wp_enqueue_script('jpanelmenu', get_bloginfo('template_directory') . "/js/jquery.jpanelmenu.js");

}

I'd rather use the version of jquery that comes included with wordpress, but can't figure out how to make that happen. Can anyone advise me on how to do that, or tell me if I'm wrong in thinking that using wp's built-in jquery would be better than what I'm doing in the code above?

I am instantiating jpanelmenu like this:

$(document).ready(function () {
    var jPM = $.jPanelMenu({
    duration: 100,
    openPosition: "240px",
    direction: "left",
    keyboardShortcuts: false
    });
    jPM.on(); // turn on jPanelMenu
});

Thanks in advance!

edited

Based on the answers below I tried the following, but jpanelmenu would not function (clicking on the menu trigger does not reveal the off-canvas menu):

function wpa_132328_enqueue_scripts(){
if ( !is_admin() ) {

        // jQuery
        wp_enqueue_script('jquery');

        // load jPanelMenu
        wp_enqueue_script('jpanelmenu', get_bloginfo('template_directory') . "/js/jquery.jpanelmenu.js");

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

and

if ( !is_admin() ) {

    // jQuery
    wp_enqueue_script('jquery');

    // load jPanelMenu
    wp_enqueue_script('jpanelmenu', get_bloginfo('template_directory') . "/js/jquery.jpanelmenu.js");

}

and

wp_enqueue_script('jpanelmenu', get_bloginfo('template_directory') . "/js/jquery.jpanelmenu.js", array('jquery') );

and

if ( !is_admin() ) {

    wp_enqueue_script('jpanelmenu', get_bloginfo('template_directory') . "/js/jquery.jpanelmenu.js", array('jquery') ); 

}
share|improve this question
    
Define "would not function". We can't help you unless you give us information to go on. Holding back on the code and the surrounding situation won't get you any answers you can use. –  Otto Feb 4 at 2:14
    
Apologies for not going into greater detail. When jpanelmenu is functioning correctly, clicking on the menu trigger reveals the off-canvas menu. By "would not function" I mean that clicking on the menu trigger does nothing. The off-canvas menu is not revealed. Nothing happens at all. My sense is that jquery is not being loaded and so the jpanelmenu script can't function. I'll happily give more information if needed, just let me know if I'm not being clear or providing enough context. Thanks so much for your time! I really appreciate it. –  dadra Feb 4 at 2:31
    
I also tried deactivating all plugins and stripping out all other functions from function.php. Just trying to rule out any conflicts. Again, clicking on the menu trigger does not reveal the off-canvas menu. Nothing happens on click. Thanks! –  dadra Feb 4 at 4:26
add comment

2 Answers 2

up vote 0 down vote accepted

To use the WordPress-bundled version, simply stop de-registering it and replacing it with the Google version.

function wpa_132328_enqueue_scripts(){
    if ( !is_admin() ) {

        // jQuery
        wp_enqueue_script('jquery');

        // load jPanelMenu
        wp_enqueue_script('jpanelmenu', get_bloginfo('template_directory') . "/js/jquery.jpanelmenu.js");

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

"$ is not defined" errors means you aren't in noconflict mode. Adjust your code as follows:

jQuery(document).ready(function ($) {
    var jPM = $.jPanelMenu({
    duration: 100,
    openPosition: "240px",
    direction: "left",
    keyboardShortcuts: false
    });
    jPM.on(); // turn on jPanelMenu
});
share|improve this answer
    
Thanks for the quick response! I replaced my code with your suggestion but jpanelmenu no longer functioned. Any other thoughts? –  dadra Feb 3 at 23:48
    
It's possible that the jpanelmenu code is not correctly written for jquery noconflict mode, but without knowing what's in that code, there's no way to answer. –  Otto Feb 4 at 0:03
    
Look in your web developer console (F12 in chrome), what kind of script errors are you getting? Also, you haven't posted it but did you instantiate the plugin by calling the plugin constructor function? Just loading the core plugin isn't enough if you never tell it to 'turn on'. See the "how do I use this thing" over at the jPanel site. –  helgatheviking Feb 4 at 9:46
    
Thanks Helga. I have edited my original question to show how I've been instantiating the plugin. When trying your solution, Chrome javascript console flags my instantiating code and says: Uncaught ReferenceError: $ is not defined (anonymous function) When trying Otto's code, I get this: Uncaught TypeError: Property '$' of object [object Object] is not a function (anonymous function) –  dadra Feb 4 at 15:37
    
That error means you aren't in noconflict mode. See my edit. –  helgatheviking Feb 4 at 17:05
show 2 more comments

The correct way to enqueue something that depends on jQuery is like so:

wp_enqueue_script('jpanelmenu', get_bloginfo('template_directory') . "/js/jquery.jpanelmenu.js", array('jquery') );

You don't need to enqueue jQuery itself. The dependency takes care of that for you.

And if you're hooking it to the wp_enqueue_scripts action hook correctly, you don't need the is_admin check.

share|improve this answer
    
Thanks Otto. I just tried that but jpanelmenu stopped working. Might this be because of the potential noconflict mode incompatibility you mentioned in your other comment? –  dadra Feb 4 at 0:13
    
Yes, please provide more information about what this jpanelmenu is, where we can see the code, etc. –  Otto Feb 4 at 0:14
    
Thank you! Here you go: jpanelmenu.com –  dadra Feb 4 at 0:19
1  
The code shown here is fine and will work with jquery in noconflict mode: jpanelmenu.com/jquery.jpanelmenu.js If you're still having trouble, try editing your question and showing what you're doing now that you say does not work. –  Otto Feb 4 at 0:24
1  
What you posted doesn't help, because you don't give us any clues as to what is not working for you. My answer is correct, and I tested it myself just to be sure. It works fine. So, what exactly does not work for you? –  Otto Feb 4 at 2:12
show 2 more comments

Your Answer

 
discard

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.