I have serious problems trying to implement jPanelMenu to the theme I'm building. The theme is nearly finished, I'm just trying to figure out this menu and I can finally start using it. Anyways, if anyone can help me understand how I can implement this to my site I'd be grateful :)

I think my main problem is that I still haven't grasped how to properly implement jQuery scripts and link them up to a generated element, like the nav-bar in Wordpress.

This is what I've done this far:

  1. Downloaded jPanelMenu and put it in a js folder.

  2. Used this code to implement it in functions:

    function jpanelmenu_scripts_with_the_lot()  {  
        // Register the script like this for a theme:  
        wp_register_script( 'jpanelmenu', get_template_directory_uri() . '/js/jpanelmenu.js', array( 'jquery', 'jquery-ui-core' ), '20120208', true );
        // For either a plugin or a theme, you can then enqueue the script:  
        wp_enqueue_script( 'jpanelmenu' );  
    add_action( 'wp_enqueue_scripts', 'jpanelmenu_scripts_with_the_lot' );`
  3. Then i call the navigation in header.php:

    wp_nav_menu( array( 'theme_location' => 'header-menu', 'container_class' => 'menu' ) );

This is where I'm stuck with what I'm supposed to do. I'm doing something wrong, because at this moment i get no results..


  • What do you have so far? Where exactly are you getting stuck? Jul 22, 2013 at 21:12
  • 1
    @DavidKryzaniak I've updated my questions with what I've done as of now. Jul 22, 2013 at 23:15
  • You need to actually call the jpanaelmenu using some javascript, which is documented on the site you linked
    – Wyck
    Jul 23, 2013 at 3:41
  • @Wyck Alright, where should I implement it? In the head section, or right after/before I call the navigation? Jul 23, 2013 at 8:34
  • You would call it on dom ready, but at that point you should be referring to the jpanelmenu documentation. Remember, jPanelMenu is not a WordPress plugin, it's a generic javascript library for the frontend. It doesn't know anything about your calls to wp_nav_menu, you need to tell it what to do
    – Tom J Nowell
    Oct 5, 2015 at 1:15

1 Answer 1


You can "initialize" the script any time after it has been loaded on the page. I usually do that in wp_footer (Especially if you enqueue the script in the footer) but you can add it to wp_head too.

add_action( 'wp_footer', 'wpa_107420_footer_script' );

function wpa_107420_footer_script(){ ?>

<script type="text/javascript">
    jQuery(document).ready(function($) {
        // Stuff to do as soon as the DOM is ready;
            var jPM = $.jPanelMenu({
            menu: '#custom-menu-selector',
            trigger: '.custom-menu-trigger-selector'


You'll need to modify the script part per the instructions on the jPanelMenu plugin. That part's off-topic here, but this is how you'd add the script to WordPress.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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