treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Can't get jquery to load in my Wordpress theme. Please help.

  • It's driving me nuts!
    This is what I've got in my theme header.php:


    <?php wp_enqueue_script('jquery'); ?>

    <?php wp_head(); ?>

    <script type=\"text/javascript\" src=\"/wp-content/themes/my-theme/js/myjsfile.js\"></script>

    <script type=\"text/javascript\">
    jQuery(document).ready(function() {
    jQuery('.rOver').myjsfile({speed: 100, delay: 400});
    });
    </script>


    But doesn't seem to work?!

    Is there anyway to test if the jQuery library is loaded... something equivalent to phpinfo.php ?
  • I always use the google hosted version and never have a problem. Just add this to your header before you call your js file:
    <script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js\"></script>
  • Really looks like you got that correct. Live link would be the only way we could see what's going on and help.
  • you can try this

    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
  • "chriscoyier" said:
    Really looks like you got that correct. Live link would be the only way we could see what's going on and help.


    It's still on my dev server at the mo.

    Actually after a bit more testing it turns out that the lib is loading and the problem appears to be with the jQuery plugins that I'm using (or maybe how they're called). Some work and some don't in WP, but all work in static test HTML.

    Example:

    To try and get my head 'round jQuery, I've followed this tut:
    http://net.tutsplus.com/tutorials/javas ... esomeness/

    It work's fine in a straight HTML page, so now I'm trying to use it with WP.

    In WP I've got the following immediately before </head>:


    <script type=\"text/javascript\" src=\"/wp-content/themes/my-theme/js/bettertooltip.js\"></script>
    <script type=\"text/javascript\">
    jQuery(document).ready(function(){
    jQuery('.tTip').bettertooltip({speed: 150, delay: 300});
    });
    </script>


    I also tried enqueueing the "bettertooltip.js" after jquery ( before the wp_head(); ), but that doesn't work either. Like this:


    <?php wp_enqueue_script('jquery'); ?>
    <?php wp_enqueue_script('bettertooltip', '/wp-content/themes/my-theme/js/bettertooltip.js', array('jquery')); ?>

    <?php wp_head(); ?>

    <script type=\"text/javascript\">
    jQuery(document).ready(function(){
    jQuery('.tTip').bettertooltip({speed: 150, delay: 300});
    });
    </script>


    Thanks for the feedback so far, much appreciated!