Javascript Not Working in WordPress

0 Views

My site is built with WordPress, and recently I’ve been adding some basic javascript to it: RossPW.com

However, all the javascript I’ve added doesn’t seem to work, and I can’t figure out why for the life of me!

Read More

For example, I added the following simple snippet to the header, to fade in the — but this doesn’t work: 

<script type="text/javascript">
$('body').hide();
$('body').fadeIn(3000);
</script>

To try and troubleshoot this so far, I have tried two things:

1) Properly added wp_enqueue to the header.php (this has been known to cause some problems with wordpress in the past: 

<?php wp_enqueue_script("jquery"); ?>
<?php wp_head(); ?>

2)I also tried included javascript as an external .js file here, with some basic JS to animate the header or scroll to the top — this hasn’t worked either.

Any help would be much appreciated — thanks!

UPDATE:
In order to ensure that js/jquery are loaded properly. I’ve tried this basic alert — which does in fact work! 

<script type="text/javascript">
       alert('ALERT!')
</script>

However, all the other javascript I’ve written does not — and I can’t figure out why. The javascript I’ve written seems to be fine, as seen here: jsfiddle.net/v9NSR/

Post Views: 0

Related posts

Leave a Reply

4 comments

  1. Two Things to fix –

    Let me know if it works for you or not.

    Try to use Firebug for debugging.

    For better Understanding Check this screenshot –

    As you are using jquery before its been loaded.

    jQuery

  2. The first thing you had wrong in your code was using the $ sign to call jQuery. When you are coding jQuery in WordPress, you have to make sure there is no conflict with the code libraries as WordPress may use other libraries and it might mess up.

    The proper way to use jQuery in WordPress is jQuery(); instead of $(); which in your case would be:

    <script type="text/javascript">
$('body').hide();
$('body').fadeIn(3000);
</script>

    Another way to do it would be to wrap the jQuery code with the jQuery $.noConflict() function, such as:

    jQuery.noConflict();
   (function( $ ) {
       $(function() {
          // your code here
       });
   })(jQuery);

    Check this out for more information and full documentation about the noConflict function.

    Hope it works for you!

  3. It looks like you are calling your jquery functions before the script tag that is loading jquery.js.

    Line 70-71:

    $('body').hide();
$('body').fadeIn(3000);

    This gives an exception:
    Uncaught ReferenceError: $ is not defined

    But jquery.js isn’t loaded until line 94:

    <script type='text/javascript' src='http://rosspw.com/wp-includes/js/jquery/jquery.js?ver=1.8.3'></script>

    You can do one of two things:

    1. Move your jquery.js reference to the top of the page.

    2. Call your jquery functions after the document has been loaded. Something like:

      function fadeInBody() {
      $(‘body’).hide();
      $(‘body’).fadeIn(3000);
      }
      window.onload = fadeInBody;

  4. try adding jquery on the footer just before wp_footer() followed by your script

    <?php
    wp_enqueue_script('jquery');
    wp_enqueue_script('myscript', 'myscript.js', array('jquery'));
    wp_footer();
?>

    then on you external script:

    $(document).ready(function () {
    $('body').hide();
    $('body').fadeIn(3000);
});