How do I implement jPanelMenu?

Question

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..

Michael

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'
        });
    });
</script>

}

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.