Skip to content
Home Blog Web Design How to use jQuery in WordPress

How to use jQuery in WordPress

  • Web Design
Blueprint Digital
Blueprint Digital

jQuery is a JavaScript library that is widely used in front end development today. jQuery is popular because it works with all major browsers and simplifies client-side scripting. jQuery also works in smartphones and tablets as opposed to Flash, which isn’t supported. jQuery enables some cool features such as slideshows and carousels, which are commonly found on the home page of a website.

WP Enqueue Script

Did you know jQuery is already included in WordPress? All you have to do is use a WordPress function, wp_enqueue_script().

<?php wp_enqueue_script('jquery'); ?>

The above code will include jQuery in your WordPress website. You could place the code above <?php wp_head(); ?> in header.php.

Including jQuery in your WordPress site

jQuery, and all JavaScript, should really be placed in the footer of a web page, if possible, because that is a good practice for improving page load time. The standard format for jQuery is as follows:

<script>
    $('#foo')...
<script>

However, because WordPress also comes with other libraries, jQuery is in a “no conflict” mode, which means jQuery has to be included like this:

<script>
    jQuery('#foo')...
<script>

jQuery noConflict wrapper

There is a problem though. Using ‘jQuery’ throughout instead of ‘$’ is cumbersome and makes the size of the script larger, making the page load slower. So what could be done to prevent that is to put the jQuery in a noConflict wrapper. If you are including jQuery in the footer, then this would be the format you use to include jQuery in a noConflict wrapper:

(function($) {
    $('#foo')...
})(jQuery);

Sometimes, it’s not always possible to include jQuery in the footer. If you are including jQuery in the <head>, then you could do this instead to put jQuery in a noConflict wrapper:

jQuery(document).ready(function($) {
    $('#foo')...
});

Conclusion

jQuery is really cool to use in your web development project. Now you know how to use jQuery properly in WordPress! For more information, you could read the WordPress Codex on this topic.

Ready to Dominate Online and Grow Your Business?

Schedule time to connect with Blueprint about your online goals, or request a free review of marketing campaigns.

Related Posts

How We Helped A Healthcare Company Reposition Their Brand

After a car accident, the search for care starts within minutes, on a phone, before the shock wears off, and the patient commits to the first brand that reads as competent, calm, and ready to take the whole problem off their hands. In personal-injury healthcare, the brand that wins at first contact wins the rest:[...]
The B2B Lead Generation Funnel: From First Touch to Closed Deal

The B2B Lead Generation Funnel: From First Touch to Closed Deal

Most B2B marketing teams can generate leads. Fewer can predict them. The month a big trade show or a strong campaign lands, the pipeline looks healthy; through the quiet months that follow, sales starts asking where the opportunities went. The difference between a lucky pipeline and a predictable one is whether you treat lead generation[...]
Creating Better and Faster Landing Pages with AI

Creating Better and Faster Landing Pages with AI

Landing pages have always been one of the most important assets in a performance marketing program. They can support SEO campaigns, email campaigns, sales enablement, product launches, event promotion, and plenty of other initiatives. But for teams focused on paid media and lead generation, landing pages carry even more weight because they often determine whether[...]
Previous
Next

Partner with BLUEPRINT to reach your online goals, grow your business and reshape your story.

Get in touch with BLUEPRINT

Reach out to request a discovery call, a free campaign review, or for all other inquiries.

Subscribe to our newsletter