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.

smart way to use jquery in wordpress theme

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

1function my_init() {
2 if (!is_admin()) {
3 wp_enqueue_script('jquery');
4 }
5}
6add_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.

1function my_init() {
2    if (!is_admin()) {
3 
4        wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js', false, '1.4.2');
5 
6    }
7}
8add_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

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

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

1jQuery(document).ready(function($) {
2 
3//Your custom code will goes here.
4 
5})

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@purabtech.in

Published by

Purab

I am Purab from India, Software development is my profession and teaching is my passion. Programmers blog dedicated to the JAVA, Python, PHP, DevOps and Opensource Frameworks. Purab's Github Repo Youtube Chanel Video Tutorials Connect to on LinkedIn View all posts by Purab

3 thoughts on “smart way to use jquery in wordpress theme”

Very useful information about jquery and wordpress. Thanks for information.

jQuery itself is just a library, and if you need it, you probably will have some custom javascript code (initializing jQuery plugins like sliders, carousels etc) in your custom scripts.js (app.js or whatever). So, the smartest way to include jQuery is to call it as a dependency for your custom script.

good ……… thankyou for this wordpres theme