Javascript Not Working in Wordpress

Question

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!

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/

Try adding the script at the end of body or wrapping the call in window.onLoad (or, better yet if you're using jQuery, $(document).ready() — John Dvorak
– John Dvorak, Commented Dec 27, 2012 at 3:55
In addition to running the code before jQuery is loaded, you're running it before the <body> element is rendered/available for manipulation (your code is in the <head> section) — Ian
– Ian, Commented Dec 27, 2012 at 4:53
Wordpress is the culprit -- here's a solution I found that proved to work: [wp.tutsplus.com/articles/… I either have to "enqueue" my script.js file using the crazy wordpress approach, or if I place scripts inside the DOM, I have to preface them : jQuery(document).ready(function($) { $('body').hide(); $('body').fadeIn(1000); }); [1]: wp.tutsplus.com/articles/… — RossPW
– RossPW, Commented Dec 27, 2012 at 6:35

swapnesh · Accepted Answer · 2012-12-27 04:11:43Z

3

Two Things to fix -

Error: SyntaxError: illegal character Source File: http://rosspw.com/wp-content/themes/rosspw2013/js/rosspw.js Line: 21, Column: 5 Source Code: }); ;â€‹
Try adding this JS code just before you are closing the body tag.

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

edited Dec 27, 2012 at 4:11

answered Dec 27, 2012 at 4:00

swapnesh

26.8k24 gold badges97 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

RossPW Over a year ago

Thanks for the screenshot. I am now loaded jquery before using any javascript, however, the actually javascript I've written is still not working. I tried just a simple js alert and that does in fact work -- so javascript is loading and working properly, its the specific javascript I've written that isn't correct. <script type="text/javascript"> alert('ALERT!') </script>

swapnesh Over a year ago

@RossPW JS is going to work, however jQuery is not as its not going to recognize $ symbol if used before the jquery library inclusion

demongolem · Accepted Answer · 2017-01-05 18:15:13Z

3

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!

edited Jan 5, 2017 at 18:15

demongolem

9,75436 gold badges97 silver badges107 bronze badges

answered Jan 5, 2017 at 17:46

martin schwartz

9818 silver badges17 bronze badges

Comments

Paul Kearney - pk · Accepted Answer · 2012-12-27 04:03:42Z

1

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:

Move your jquery.js reference to the top of the page.
Call your jquery functions after the document has been loaded. Something like:

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

answered Dec 27, 2012 at 4:03

Paul Kearney - pk

5,55328 silver badges28 bronze badges

1 Comment

Paul Kearney - pk Over a year ago

I can't seem to get the code at the bottom to format correctly.

Anthony · Accepted Answer · 2012-12-27 04:01:01Z

0

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);
});

answered Dec 27, 2012 at 4:01

Anthony

5993 silver badges15 bronze badges

Collectives™ on Stack Overflow

Javascript Not Working in Wordpress

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related