How to load jQuery into WordPress properly

Question

I have a WordPress site that I would like to use a jQuery plugin called DataTables. I've been having troubling figuring out the right way to load the jQuery script and the DataTables script into WordPress.

I know I'm supposed to use something with: wp_enqueue_script("jquery") - but I do not know where to put it or how to load the other jQuery plugin i need.

The last bit I tried was putting this in the header.php file for my WordPress site:

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

<?php wp_head(); ?>

Any help would be greatly appreciated!

score 15 · Accepted Answer · edited Oct 18 '17 at 06:23

jQuery is included in WordPress core and when you include your javascript, you can declare that your script is dependent on jquery being loaded as the third parameter of wp_enqueue_script: http://codex.wordpress.org/Function_Reference/wp_enqueue_script.

The proper way to use wp_enqueue_script is to include it in a callback that is attached to a specific action hook. That sounded incredibly complicated to me when I started with WordPress, but it's actually a really good system because it allows you to specify when your code should run during the initialization of WordPress.

So, in your functions.php or a plugin, you add your hook.

add_action( 'wp_enqueue_scripts', 'my_js_include_function' );

Then, in that function, you running the actual inclusion, and declare that your script is dependent on jquery.

function my_js_include_function() {
    wp_enqueue_script( 'my_script.js', '/path/to/myscript.js', array('jquery') );
}

The first parameter of wp_ennqueue_script() is an arbitrary name you are assigning to your script. If you were to then declare another script was dependent on the original one, that's how you would refer to it in the third parameter.

Straight from the docs: `Required to use core-bundled scripts rather than including their own version of that script. For example jQuery.`. Do not host your own jQuery. — User, Mar 08 '17 at 16:38

score 0 · Answer 2 · answered Mar 06 '14 at 20:42

If you can't use any WordPress methods, you can still include your Jquery plugin manually inside your extension_name.php, right after your wp_enqueue_script("jquery");

echo "<script src='http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js'></script>";

score 0 · Answer 3 · answered Mar 06 '14 at 20:49

Best way to do this is through the functions.php file,

URL: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Sample:

/**
 * Proper way to enqueue scripts and styles
 */
function theme_name_scripts() {
    wp_enqueue_style( 'style-name', get_stylesheet_uri() );
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/example.js', array(), '1.0.0', true );
}

add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

What this code reads is that you are creating a function called "theme_name_scripts", now you are calling wp_enqueue_script(), this takes 5 parameters "Script Name", "URL","ARRAY","Version","True/False" (True loads in the Header, and False in the Footer)...

Add_action part is a hook to attach this to the WordPress. It is self explanatory, you need it in order to make the function work. It says wp_enqueue_scripts from function 'theme_name_scripts' or the function name..

Best of luck, if you need more help try Googleing "WordPress, enqueue Scripts tutorial"

score 0 · Answer 4 · answered Apr 14 '16 at 13:33

in my functions.php:

function mytheme_scripts() {
    wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/myscript.js', array('jquery'), false, true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

function custom_shortcode3() {

echo "wp_enqueue_scripts();";
}
add_shortcode( 'totaldeprodutos', 'custom_shortcode3' );

in my /js/myscript.js:

<div id="show"></div>

<script type="text/javascript" src="jquery.js"></script>

<script type="text/javascript">

                    function total() {
        setInterval(function () {
            $('#show').load('datatotaldeprodutos.php')
        }, 1000);
    };

I need shortcode show to function total()

How to load jQuery into WordPress properly

4 Answers4

Linked