Use of jQuery in customizing WordPress themes
JQuery can be downloaded and installed on your server directly but this simple method comes with a cost. As we know, several plugins use the JQuery library and they would need to load the library every time, regardless of its presence on the server. So, it’s better to use alternative and more efficient and customized way.
Since WordPress already includes a copy of JQuery, here is how you can load up jQuery in your theme the smart (and intended) way. Put the following code in your header.php file in the <head> section:
|
1 2 |
<?php wp_enqueue_script (“jquery”);?> <?php wp_head () ;?> |
Most probably, the theme would already contain the wp_head function, so all you need to do is to call the wp_enqueue_script function before that. And, again, after the wp_header function, you can call your own jQuery JavaScript file:
|
1 |
<script type = “text/javascript” src=”<php bloginfo (“template_url”);?>/js/yourScript.js”></script> |
The code is almost ready but minor modifications would make it even better. To include multiple libraries and yet avoid clash with other libraries, you can put jQuery into “no conflict” mode and use a different shortcut for jQuery. In this case “$j” instead of the default “$”. The standard “$”, for example, can conflict with Prototype. Here is an example of a safe bit of jQuery JavaScript:
|
1 2 3 4 5 6 7 8 9 10 11 12 |
var $j = jQuery().noConflict(); $j (function(){ $j(“#sidebar li a”).hover(function(){ $j(this).stop().animate({ paddingLeft: “20px&” },400); }, function(){ $j(this).stop().animate({ paddingLeft: 0 },400); }); }); |
With this simple bit of code, you can customize your blog or website with jQuery. With jQuery, you can utilize more features and faster libraries and hence considerably improve your WordPress blog or website.
BlueHost | HostGator | Media Temple
