What else do I need to run jquery in wordpress?

1 Views

I have been trying to get jquery to run in a wordpress theme that I’m building. I can get it to work if I use the traditional method for non-worpress sites: 

<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>

But I have read that this is not the correct way to use jquery in wordpress as it can cause conflicts and other problems. I’ve read the wordpress codex and this site: http://www.ericmmartin.com/5-tips-for-using-jquery-with-wordpress/ which was actually more helpful than the codex. I’ve checked into similar questions here on StackOverflow and tried the solutions listed there but jquery still won’t load. Other sites I found about this topic were not very clear. Here is the code that I have so far in my functions.php file, but it’s still not working:

Read More
function jqry_init() {
    if (!is_admin()) {
        // comment out the next two lines to load the local copy of jQuery
        wp_deregister_script('jquery');
        wp_register_script('jquery', 'http://code.jquery.com/jquery-latest.min.js', false);
        wp_enqueue_script('jquery');
    }
}

add_action('init', 'jqry_init');

I’ve tried loading it from Google, directly from jquery, and referencing a copy of jquery that I have in a file on the site. Non of these work. I should mention that I’m doing all of this with xampp on localhost if that makes a difference. What am I missing?

Update:
Here are the snippets / other scripts I’m running: 

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/scripts/isotope.js"></script>

        <script type="text/javascript">
            JQuery(document).ready(function($) {
                var $container = $('#content');
                $container.isotope({
                    filter: '*',
                    animationOptions: {
                        duration: 750,
                        easing: 'linear',
                        queue: false,
                    }
                });

                JQuery('#nav a').click(function($) {
                    var selector = $(this).attr('data-filter');
                    $container.isotope({
                        filter: selector,
                        animationOptions: {
                            duration: 750,
                            easing: 'linear',
                            queue: false,
                        }
                    });
                    return false;
                });

            });
        </script>
Post Views: 1

Related posts

Leave a Reply

1 comment

  1. You want to use the wp_enqueue_scripts hook to add scripts. You don’t need the check for admin as there is another hook for admin scripts admin_enqueue_scripts

    function jqry_init() {

    // comment out the next two lines to load the local copy of jQuery
    wp_deregister_script('jquery');
    wp_register_script('jquery', 'http://code.jquery.com/jquery-latest.min.js', false);
    wp_enqueue_script('jquery');

}

add_action('wp_enqueue_scripts', 'jqry_init');

    If your jQuery snippet is still not working it may be due to a noconflict wrapper.

    For example if the following isn’t working and you are getting the $ is not defined error:

    $( document ).ready( function() {
   //do stuff here
});

    You need to change that to

    jQuery( document ).ready( function( $ ) {
    //do stuff here with the $ shorthand
});

    Update

    In your header.php
    before the closing </head> tag please ensure you have
    <?php wp_head();?>

    wp_head() is important because this is where functions added to wp_enqueue_scripts will be run. Without it they won’t be run.