Responsive jQuery Menu native to WP theme

3 Views

I am working on a responsive dropdown menu for a custom wordpress theme http://www.imlivingart.com/testimonials (note: this question is not related to the splash page so please dont visit just imlivingart.com)

The vision: When I resize my browser to 900 a menu bar should appear. When I click on that menu bar the WP menu list drops down. When I click the menu bar again the WP menu list is hidden.

Read More

The current reality: I am trying to use some simple jQuery to toggle the menu up and down. Unfortunately I can’t seem to connect my custom jQuery to my WP theme.

The jquery (currently located at /js/resp-menu.js): 

jQuery(document).ready(function() {
    $('#show-rmenu').click(function() {
            $('.r-menu').slideToggle("fast");
    });
});

All the relative code seems to work in this jsfiddle (adjusted for non WP): http://jsfiddle.net/QRfK7/1/

But this does not translate to my WP theme. In my function file I have tried to call on jQuery and my custom script a variety of ways. Most recently I tried this (from http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/): 

function my_init() {
if (!is_admin()) {
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.10.1', true);
    wp_enqueue_script('jquery');

    // load a JS file from my theme: js/theme.js
    wp_enqueue_script('my_script', get_bloginfo('template_url') . '/js/resp-menu.js', array('jquery'), '1.10.1', true);
}
}
add_action('init', 'my_init');

I hope that’s enough information. Ugh. I’m a newbie to jQuery and WP Enqueue Script and I’ve been wrecking my brain for 2 days over this. I tried googling and found sort of similar questions here on StackOverflow but they didnt seem to make it work. Maybe my problem is more specific? Sigh…any help would be much appreciated! Thanks!!!

Edit

Ok, I managed to make it work using this tutorial: http://wpwizard.net/jquery/add-jquery-to-your-theme-or-plugin/

This involved coding the jQuery directly into my WP theme header. Even so, it would be nice to figure out how I could have linked to my custom jquery external script sheet. Thanks!

Post Views: 3

Related posts

Leave a Reply

1 comment

  1. I am not sure why you are deregistering the jQuery library and then adding it back in. I would write this like below.

    Also if you were to use
    bloginfo(‘template_url’);

    You would need to call it like this,
    get_bloginfo(‘template_url’);

    You should be using
    get_template_directory_uri();

    You should also be using the wp_enqueue_scripts action, not init.

    Notice I added the $ inside the function arguments, that is because the WP jQuery lib does not recognize $. The other option would be to replace all instances of $ with jQuery.

    jQuery(document).ready(function($) {
    $('#show-rmenu').click(function() {
        $('.r-menu').slideToggle("fast");
    });
});


// Register Javascript with wp_enqueue
function my_init() {
 if (!is_admin()) {

 // Register Script
 wp_register_script('my_script', get_template_directory_uri() . '/js/resp-menu.js', array('jquery'), '1.10.1', true);

 wp_enqueue_script('my_script');
}

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