What's WP
Our everything is about WordPress - best choice of WordPress users!
How to Start WordPress with jQuery Correctly

How to Start WordPress with jQuery Correctly

jQuery is an open-source, cross-platform, and rich-featured JavaScript library that is licensed under the Massachusetts Institute of Technology (MIT). It is designed to simplify the operation of HTML and JavaScript with the powerful API that comes with a high level of flexibility and extensibility.

jQuery and WordPressWithout doubt, using jQuery properly with WordPress can achieve a lot of fantastic results with ease, such as double-click on page scrolling, double-click for comment editing, and some attractive pop-up layers. However, there are many WordPress developers just fail to use jQuery scripts in a right way, which may cause the compatibility issue in WordPress themes and plugins.

Here, we have listed some of the most common mistakes and the resolutions, with a view to helping our readers start WordPress with jQuery correctly.

Use Script Tag in Header Section

When loading jQuery script, many developers use the script tag into the head section of the header.php file. This practice can cause you brief, for any themes or plugins using jQuery will break.

To load up jQuery properly, you need to use the PHP code showed in the following.

add_action( 'wp_enqueue_script', 'textdomain_load_jquery' );

function textdomain_load_jquery() {
    wp_enqueue_script( 'jquery' );
}

Use the “No Conflict” Mode Improperly

In order to avoid the future possibility of conflict with any other JavaScript libraries included with WordPress, you need to use the No Conflict Mode correctly as WordPress loads jQuery with it.

Generally, the number one mistake in this part is the improper usage of $ shortcut. The standard $ shortcut can cause conflict with Prototype, so we highly suggest you replacing it to jQuery in the noConflict() mode. Check the right example as below.

jQuery(document).ready(function(){
    jQuery(#somefunction) ...
});

In case you really like to use the shortcut of “$”, you can make use of the wrapper into your code.

Execute the code after the document being loaded:

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

Execute the code in an anonymous function:

(function($) {
})(jQuery);

Note that the $() works as an alias for jQuery() inside this function, and any other libraries using this shortcut are not accessible under it.

Load jQuery from Google CDN

In fact, there are a lot of people who load jQuery script from Google CDN, and you can do this too if you really have some reasons. After all, this practice causes no big issue. However, according to our own experience, we don’t suggest you doing this. As we have mentioned before, the jQuery script used with WordPress is set to noConflict() mode, but loaded from Google doesn’t. In this circumstance, you may encounter some compatibility or even security problems.

Author

Susan Rose is a freelance writer who has a deep knowledge about WordPress. She loves everything related to website building since the freshman year at Christopher Newport University, and loves to share her experience with people all over all the world. This girl is popular among our readers as she is outgoing and energetic. In the daily life, Susan loves detective novels as it can train her logical thinking and creativity.

Close

Want to Learn More About WordPress?

Get Our Free Themes, Plugins, Support, SEO Tips, and Other Tutorials!

Email *