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=jQuery.noConflict();

$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.