Using jQuery In The WordPress Admin Area

When you are coding in the WordPress admin area, there may be times when you want to code some functionality which requires Javascript.

Wordpress comes with an inbuilt Javascript library called jQuery. This is a Javascript framework which makes it very easy to do almost anything with your Javascript.

When working in the admin area jQuery is already included on all the pages and can be used in your own Javascript files.

But there is a common problem which some people get stuck on when working with jQuery and that is the use of the $ symbol.

Most people are used to using jQuery by loading the file using the script tag and using the $(document).ready() function to use your jQuery code.

$(document).ready(function () {
      $(body).append('Hello World');

Normally this code will work perfectly fine but not in WordPress, this is because WordPress jQuery automatically calls the function jQuery.noConflict(); which will allocate the $ symbol to the library which originally called it, meaning the jQuery library.

This means that to get jQuery working on the admin pages you need to replace the $ symbol with the word jQuery like the following.

jQuery(document).ready(function () {
      jQuery(body).append('Hello World');

The problem with this is that you have to type the whole word jQuery in whenever you want to use it, if your used to just using $ it can get annoying, so you can use the same thing as the jQuery library and call the jQuery.noConflict(); function.

This will allow you to set the jQuery library object to any variable you want, when I work with jQuery in this way I prefer to use the variable $j.


$j(document).ready(function() {
     $j(body).append('Hello World');

Now your able to use jQuery on your own created pages inside the WordPress admin area.

Back to top ^

Join Paulund

  • Get access to 100s of premium tutorials and downloadable content
  • Members content consists of Premium WordPress plugins, CSS packages, jQuery packages, tutorial demo files and templates for 100s of web development tutorials
  • In-depth development tutorials
  • Priority tutorial requests
  • Priority email development support
  • No ads

Here at Paulund you'll find Web Development tutorials and snippets focusing mainly on PHP, WordPress and CSS. Members will get access to premium tutorials that go into more detail about development with these languages. You will also get access to downloadable premium content based on the tutorial.

Join Paulund

Leave a Reply

Your email address will not be published. Required fields are marked *