Adding jQuery script to wordpress custom page

Question

trying to incorporate a jQuery script into a Wordpress site.

I created a custom page in my theme and added the following in the body tag:

<body>
...
<div id="msgid"> hello there
</div>
...
</body>

I also created a test.js file with the following:

$(document).ready(function(){
 $("#msgid").html("Hello world.");
});

I am loading the test.js in the footer.

I was expecting to see Hello world. in the div. But it doesn't show anything.

Any ideas?

Thanks.

kenttam · Accepted Answer · 2013-09-25 19:02:42Z

5

Wordpress by default uses the noConflict version of jQuery, which means it doesn't load jQuery to the $ sign.

You can do this:

jQuery(document).ready(function($){
   //inside of here you passed in the $ sign to be used as an alias of jQuery
   $("#msgid").html("Hello world.");
});

See here for more details on jQuery's noConflict function: http://api.jquery.com/jQuery.noConflict/

edited Sep 25, 2013 at 19:02

answered Sep 25, 2013 at 18:30

kenttam

7404 silver badges9 bronze badges

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

2 Comments

jdias Over a year ago

thanks. Do I have to use function($) or can I use function() and use jQuery("#msgid") instead of $("#msgid")? Thanks.

kenttam Over a year ago

@jdias You can use jQuery("#msgid") as well. The important thing to understand here is that by passing in the $ into function, you're essentially assigning jQuery to $. So imagine this is happening: $ = jQuery.

Collectives™ on Stack Overflow

Adding jQuery script to wordpress custom page

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related