Advertise on Site! You can Advertise on our site. Find out More

smart way to use jquery in wordpress theme

I created many wordpress themes for various purpose and clients. Jquery is common requirement for all the project. That is for menu, slider or validation and for effects. In wordpress adding the Jquery is very easy because wordpress itself uses the Jquery for admin panel. They provided the wordpress api for adding the jquery in wordpress theme files. wp developers are always looking for wordpress jquery plugin, wordpress include jquery, wordpress jquery ui, wordpress jquery noconflict, wordpress jquery theme, wordpress jquery version, wordpress jquery slider, wordpress jquery not working. Here is the solution

Following is the simplest way to add jquery in wordpress theme.You just need to use the following code in your wordpress theme  functions.php file.


function my_init() {
 if (!is_admin()) {
 wp_enqueue_script('jquery');
 }
}
add_action('init', 'my_init');

This way you can easily add the juqery in wordpress theme.

You can add the jquery from google also. Because google also like jquery. You just need to put the following function in your functions.php file.

function my_init() {
	if (!is_admin()) {

		wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2');

	}
}
add_action('init', 'my_init');

Main reason adding jquery from google is that will load the jquery faster in your site.

How you can use jquery in your theme.

you can use the jquery anywhere in theme file as follows


jQuery(function ($) {
 /* You can safely use $ in this code block to reference jQuery */
});

For DOM ready function or onload event you can use the juqery as follows.


jQuery(document).ready(function($) {

//Your custom code will goes here.

})

You can use the above function for slider or menu and any effect in your wordpress theme.

If you want to know about more Jquery and wordpress then you can refer following articles.

wordpress and jquery conflicts – How to solve that
100+ jquery and CSS techniques and Tips and tutorials
jquery tips for wordpress theme developers
Fadein and Fadeout effect through javascript
minimize, restore, maximize and hide functionality with javascript without using jquery
Complete Javascript form Validation now easy ( Checkbox, Websites, Email, Maxlength)

If you face any issue using jquery with wordpress then please write comment or email me on support@wordpressapi.com

7 Comments

Add a Comment

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