By Citizen


2012-06-22 15:58:32 8 Comments

I read the Codex and a few blog posts about using jQuery in WordPress, and its very frustrating. I've got as far as loading jQuery in functions.php file, but all of the guides out there are crappy because they assume you already have a ton of WordPress experience. For instance, they say that now that I'm loading jQuery through the functions.php file, now all I have to do is load my jQuery.

How exactly do I do this? What files, specifically, do I add code to? How exactly do I add it for a single WordPress page?

16 comments

@codehead 2019-11-25 08:15:05

The solutions I've seen are from the perspective of adding javascript features to a theme. However, the OP asked, specifically, "How exactly do I add it for a single WordPress page?" This sounds like it might be how I use javascript in my Wordpress blog, where individual posts may have different javascript-powered "widgets". For instance, a post might let the user change variables (sliders, checkboxes, text input fields), and plots or lists the results.

Starting from the JavaScript perspective:

  1. Write your JavaScript functions in a separate “.js” file

Don’t even think about including significant JavaScript in your post’s html—create a JavaScript file, or files, with your code.

  1. Interface your JavaScript with your post's html

If your JavaScript widget interacts with html controls and fields, you’ll need to understand how to query and set those elements from JavaScript, and also how to let UI elements call your JavaScript functions. Here are a couple of examples; first, from JavaScript:

var val = document.getElementById(“AM_Freq_A_3”).value;

And from html:

<input type="range" id="AM_Freq_A_3" class="freqSlider" min="0" max="1000" value="0" oninput='sliderChanged_AM_widget(this);'/>
  1. Use jQuery to call your JavaScript widget’s initialization function

Add this to your .js file, using the name of your function that configures and draws your JavaScript widget when the page is ready for it:

jQuery(document).ready(function( $ ) {
    your_init_function();
});
  1. In your post’s html code, load the scripts needed for your post

In the Wordpress code editor, I typically specify the scripts at the end of the post. For instance, I have a scripts folder in my main directory. Inside I have a utilities directory with common JavaScript that some of my posts may share—in this case some of my own math utility function and the flotr2 plotting library. I find it more convenient to group the post-specific JavaScript in another directory, with subdirectories based on date instead of using the media manager, for instance.

<script type="text/javascript" src="/scripts/utils/flotr2.min.js"></script>
<script type="text/javascript" src="/scripts/utils/math.min.js"></script>
<script type="text/javascript" src="/scripts/widgets/20161207/FreqRes.js"></script>
  1. Enqueue jQuery

Wordpress registers jQuery, but it isn’t available unless you tell Wordpress you need it, by enqueuing it. If you don’t, the jQuery command will fail. Many sources tell you how to add this command to your functions.php, but assume you know some other important details.

First, it’s a bad idea to edit a theme—any future update of the theme will wipe out your changes. Make a child theme. Here’s how:

https://developer.wordpress.org/themes/advanced-topics/child-themes/

The child’s functions.php file does not override the parent theme’s file of the same name, it adds to it. The child-themes tutorial suggest how to enqueue the parent and child style.css file. We can simply add another line to that function to also enqueue jQuery. Here's my entire functions.php file for the child theme:

<?php
add_action( 'wp_enqueue_scripts', 'earlevel_scripts_enqueue' );
function earlevel_scripts_enqueue() {
    // styles
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( $parent_style ),
        wp_get_theme()->get('Version')
    );

    // posts with js widgets need jquery
    wp_enqueue_script('jquery');
}

@codehead 2019-11-25 17:50:09

Another alternative is to use a javascript manager plugin. That may be a good way for some, but I prefer not being dependent on many plugins and updating.

@Aman Dhanda 2019-02-15 21:11:25

In WordPress, the correct way to include the scripts in your website is by using the following functions.

wp_register_script( $handle, $src )
wp_enqueue_script( $handle, $src )

These functions are called inside the hook wp_enqueue_script.

For more details and examples, you can check Adding JS files in Wordpress using wp_register_script & wp_enqueue_script

Example:

function webolute_theme_scripts() {
    wp_register_script( 'script-name', get_template_directory_uri() . '/js/example.js', array('jquery'), '1.0.0', true );
    wp_enqueue_script( 'script-name' );
}
add_action( 'wp_enqueue_scripts', 'webolute_theme_scripts' );

@Ahmed Elcheikh 2016-12-22 07:47:31

Answer from here: https://premium.wpmudev.org/blog/adding-jquery-scripts-wordpress/

Despite the fact WordPress has been around for a while, and the method of adding scripts to themes and plugins has been the same for years, there is still some confusion around how exactly you’re supposed to add scripts. So let’s clear it up.

Since jQuery is still the most commonly used Javascript framework, let’s take a look at how you can add a simple script to your theme or plugin.

jQuery’s Compatibility Mode

Before we start attaching scripts to WordPress, let’s look at jQuery’s compatibility mode. WordPress comes pre-packaged with a copy of jQuery, which you should use with your code. When WordPress’ jQuery is loaded, it uses compatibility mode, which is a mechanism for avoiding conflicts with other language libraries.

What this boils down to is that you can’t use the dollar sign directly as you would in other projects. When writing jQuery for WordPress you need to use jQuery instead. Take a look at the code below to see what I mean:

@Jitendra Damor 2015-07-07 05:23:26

You can add jQuery or javascript in theme's function.php file. The code is as below :

add_action( 'wp_enqueue_scripts', 'add_my_script' );

function add_my_script() {
wp_enqueue_script(
    'your_script_name', // your script unique name 
    get_template_directory_uri().'/js/your-script.js', //script file location
    array('jquery') //lists the scripts upon which your script depends
);
}

For more detail visit this tutorial : http://www.codecanal.com/add-simple-jquery-script-wordpress/

@Rob 2017-01-19 20:23:32

There are many tutorials and answers here how to add your script to be included in the page. But what I couldn't find is how to structure that code so it will work properly. This is due the $ being not used in this form of JQuery.

So here is my code and you can use that as a template.

jQuery(document).ready(function( $ ){
  $("#btnCalculate").click(function () {
        var val1 = $(".visits").val();
        var val2 = $(".collection").val();
        var val3 = $(".percent").val();
        var val4 = $(".expired").val();
        var val5 = $(".payer").val();
        var val6 = $(".deductible").val(); 
        var result = val1 * (val3 / 100) * 10 * 0.25;
        var result2 = val1 * val2 * (val4 / 100) * 0.2;
        var result3 = val1 * val2 * (val5 / 100) * 0.2;
        var result4 = val1 * val2 * (val6 / 100) * 0.1;
        var val7 = $(".pverify").val();
        var result5 = result + result2 + result3 + result4 - val7;
        var result6 = result5 * 12;
        $("#result").val("$" + result);
        $("#result2").val("$" + result2);
        $("#result3").val("$" + result3);
        $("#result4").val("$" + result4);
        $("#result5").val("$" + result5);
        $("#result6").val("$" + result6);
  });
});

@upendra tiwari 2016-03-30 06:52:59

you can write your script in another file.And enqueue your file like this suppose your script name is image-ticker.js.

wp_enqueue_script( 'image-ticker-1', plugins_url('/js/image-ticker.js', __FILE__), array('jquery', 'image-ticker'), '1.0.0', true ); 

in the place of /js/image-ticker.js you should put your js file path.

@Kenneth Odle 2016-02-13 18:38:34

Beside putting the script in through functions you can "just" include a link ( a link rel tag that is) in the header, the footer, in any template, where ever.

No. You should never just add a link to an external script like this in WordPress. Enqueuing them through the functions.php file ensures that scripts are loaded in the correct order.

Failure to enqueue them may result in your script not working, although it is written correctly.

@Vlad 2016-01-15 11:48:46

"We have Google" cit. For properly use script inside wordpress just add hosted libraries. Like Google

After selected library that you need link it before your custom script: exmpl

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

and after your own script

<script type="text/javascript">
$(document).ready(function(){
    $('.text_container').addClass("hidden");</script>

@sameeuor 2015-05-12 10:34:55

You can add custom javascript or jquery using this plugin.
https://wordpress.org/plugins/custom-javascript-editor/

When you use jQuery don't forget use jquery noconflict mode

@DibaCode 2015-02-24 09:57:48

If you use wordpress child theme for add scripts to your theme, you should change the get_template_directory_uri function to get_stylesheet_directory_uri, for example :

Parent Theme :

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
        'parent-theme-script', 
        get_template_directory_uri() . '/js/your-script.js', 
        array('jquery') 
    );

    wp_enqueue_script('parent-theme-script');
}

Child Theme :

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_register_script(
       'child-theme-script', 
       get_stylesheet_directory_uri() . '/js/your-script.js', 
       array('jquery') 
    );

    wp_enqueue_script('child-theme-script');
}

get_template_directory_uri : /your-site/wp-content/themes/parent-theme

get_stylesheet_directory_uri : /your-site/wp-content/themes/child-theme

@kdev 2012-08-19 09:23:00

I know what you mean about the tutorials. Here's how I do it:

First you need to write your script. In your theme folder create a folder called something like 'js'. Create a file in that folder for your javascript. E.g. your-script.js. Add your jQuery script to that file (you don't need <script> tags in a .js file).

Here is an example of how your jQuery script (in wp-content/themes/your-theme/js/your-scrript.js) might look:

jQuery(document).ready(function($) {
  $('#nav a').last().addClass('last');
})

Notice that I use jQuery and not $ at the start of the function.

Ok, now open your theme's functions.php file. You'll want to use the wp_enqueue_script() function so that you can add your script whilst also telling WordPress that it relies on jQuery. Here's how to do that:

add_action( 'wp_enqueue_scripts', 'add_my_script' );
function add_my_script() {
    wp_enqueue_script(
        'your-script', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/js/your-script.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

Assuming that your theme has wp_head and wp_footer in the right places, this should work. Let me know if you need any more help.

WordPress questions can be asked over at WordPress Answers.

@Ele Munjeli 2013-03-27 22:15:14

I had to add add_action( 'wp_enqueue_scripts', 'add_my_script' ); to get this to load, but it's still the clearest answer around.

@Francisco Corrales Morales 2014-01-23 20:17:13

in which file did you add it ? @EleMunjeli

@Screenack 2014-10-12 19:34:39

Thanks, Ele Munjeli, for the tip to add_action. ALSO: if you're working with a child theme, use get_stylesheet_directory_uri instead.

@The EasyLearn Academy 2014-10-29 12:57:40

thanks man. you save my day you snipped is working perfectly for me

@Lee 2014-12-18 15:52:58

Even following this, I'm still receiving Uncaught TypeError: Cannot read property 'fn' of undefined and Uncaught TypeError: undefined is not a function errors, even when another script is being queued in the functions file, and that works fine

@kdev 2014-12-21 18:14:44

@Lee That looks like it's either an error within the script, or maybe something to do with the order the scripts are loaded. I don't think it's a direct result of this code.

@Johnny Utahh 2016-05-23 01:41:43

@kdev Does it matter where in functions.php I add the above code? eg, does the code have to be specifically added before or after any other function calls, etc?

@kdev 2016-05-25 07:48:29

@JohnnyUtahh It shouldn't really matter where this goes in your functions.php file. The only thing I would say is that and include functions should always be at the top.

@Natalia 2017-01-30 19:49:57

how do I put my scripts (your-script.js) in the footer using this method? Thanks!

@Rajan471 2014-07-29 19:35:04

**#Method 1:**Try to put your jquery code in a separate js file.

Now register that script in functions.php file.

function add_my_script() {
    wp_enqueue_script(
      'custom-script', get_template_directory_uri() . '/js/your-script-name.js', 
        array('jquery') 
    );
}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

Now you are done.

Registering script in functions has it benefits as it comes in <head> section when page loads thus it is a part of header.php always. So you don't have to repeat your code each time you write a new html content.

#Method 2: put the script code inside the page body under <script> tag. Then you don't have to register it in functions.

@John Hascall 2016-02-13 19:00:00

Method 2 is playing with fire.

@user64745 2014-05-02 07:29:39

You can use WordPress predefined function to add script file to WordPress plugin.

wp_enqueue_script( 'script', plugins_url('js/demo_script.js', __FILE__), array('jquery'));

Look at the post which helps you to understand that how easily you can implement jQuery and CSS in WordPress plugin.

@josh.chavanne 2014-02-27 01:45:52

Beside putting the script in through functions you can "just" include a link ( a link rel tag that is) in the header, the footer, in any template, where ever. You just need to make sure the path is correct. I suggest using something like this (assuming you are in your theme's directory).

<script type="javascript" href="<?php echo get_template_directory_uri();?>/your-file.js"></script>

A good practice is to include this right before the closing body tag or at least just prior to your footer. You can also use php includes, or several other methods of pulling this file in.

<script type="javascript"><?php include('your-file.js');?></script>

@Phill Healey 2019-04-12 18:11:52

That's all around bad practice in 2019.

@josh.chavanne 2019-04-13 19:58:12

Agreed, but this was written 5 years ago. Enqueueing and what not of course is the best practice.

@Phill Healey 2019-04-14 20:35:36

Just worth pointing out since this post shows quite prominently on Google. I'd hate for someone to come here and start using bad practices because they stumbled upon an old q & a.

@Stan 2014-02-27 01:37:10

After much searching, I finally found something that works with the latest WordPress. Here are the steps to follow:

  1. Find your theme's directory, create a folder in the directory for your custom js (custom_js in this example).
  2. Put your custom jQuery in a .js file in this directory (jquery_test.js in this example).
  3. Make sure your custom jQuery .js looks like this:

    (function($) {
    $(document).ready(function() {
    $('.your-class').addClass('do-my-bidding');
    })
    })(jQuery);
    
  4. Go to the theme's directory, open up functions.php

  5. Add some code near the top that looks like this:

    //this goes in functions.php near the top
    function my_scripts_method() {
    // register your script location, dependencies and version
       wp_register_script('custom_script',
       get_template_directory_uri() . '/custom_js/jquery_test.js',
       array('jquery'),
       '1.0' );
     // enqueue the script
      wp_enqueue_script('custom_script');
      }
    add_action('wp_enqueue_scripts', 'my_scripts_method');
    
  6. Check out your site to make sure it works!

@David Taiaroa 2014-03-17 16:35:16

Thanks, this helped me a lot!. For anyone working with a child theme, use get_stylesheet_directory_uri() in place of get_template_directory_uri()

@marky 2015-06-02 13:48:23

Thanks for this step-by-step explanation, Stan! (and the note about using this with child themes, @DavidTaiaroa)

@HPWD 2019-07-23 00:08:52

This is working brilliantly but I only need it to fire on a spcific page. Is there a way to modify this so that it'll only fire on the page? Or is that an entirely different WP function needed for that behavior?

@Eli Cole 2012-06-22 17:01:17

Do you only need to load jquery?

1) Like the other guides say, register your script in your functions.php file like so:

// register scripts
if (!is_admin()) {
    // here is an example of loading a custom script in a /scripts/ folder in your theme:
    wp_register_script('sandbox.common', get_bloginfo('template_url').'/scripts/common.js', array('jquery'), '1.0', true);
    // enqueue these scripts everywhere
    wp_enqueue_script('jquery');
    wp_enqueue_script('sandbox.common');
}

2) Notice that we don't need to register jQuery because it's already in the core. Make sure wp_footer() is called in your footer.php and wp_head() is called in your header.php (this is where it will output the script tag), and jQuery will load on every page. When you enqueue jQuery with WordPress it will be in "no conflict" mode, so you have to use jQuery instead of $. You can deregister jQuery if you want and re-register your own by doing wp_deregister_script('jquery').

@Citizen 2012-06-26 18:19:59

No, i got this part figured out. Loading jquery is easy. What I need to know is what file to add my jquery code to, and how.

@Eli Cole 2012-07-20 19:38:39

Put wp_enqueue_script('name of script'); before the get_header() of the template you want that script to enqueue under.

Related Questions

Sponsored Content

65 Answered Questions

[SOLVED] How do I check whether a checkbox is checked in jQuery?

56 Answered Questions

[SOLVED] How do I check if an element is hidden in jQuery?

27 Answered Questions

[SOLVED] How can I refresh a page with jQuery?

36 Answered Questions

[SOLVED] How do I return the response from an asynchronous call?

42 Answered Questions

[SOLVED] Is there an "exists" function for jQuery?

  • 2008-08-27 19:49:41
  • Jake McGraw
  • 730248 View
  • 2677 Score
  • 42 Answer
  • Tags:   javascript jquery

58 Answered Questions

[SOLVED] How do I redirect to another webpage?

35 Answered Questions

[SOLVED] Add table row in jQuery

40 Answered Questions

[SOLVED] Setting "checked" for a checkbox with jQuery?

34 Answered Questions

Sponsored Content