The right way to include jquery and javascript files in wordpress theme or plugin, learn how to add jquery and javascript in wordpress and use it in theme or plugin.

How To Include jQuery And JavaScript

Using wp_enqueue_script() function we will add jquery or javascript files in wordpress theme or plugin.

Include jQuery

Use this code in your wordpress theme or plugin:

function include_my_jquery(){
    wp_enqueue_script( 'my-jquery-bla-bla-bla', false, array('jquery'), null);
}
add_action( 'wp_enqueue_scripts', 'include_my_jquery' );

Include jQuery With JavaScript

To include jquery with javascript file in your wordpress plugin, use this code:

function include_jquery_and_javascript(){
    wp_enqueue_script( 'my-script-bla-bla-bla', plugins_url( '/my-path/my-javascript-file.js', __FILE__ ), array('jquery'), null);
}
add_action( 'wp_enqueue_scripts', 'include_jquery_and_javascript' );

To include jquery with javascript file or javascript file only in wordpress theme, replace “plugins_url()” function, and use get_template_directory_uri() function, for example:

function my_lightbox(){
    wp_enqueue_script('my-lightbox', get_template_directory_uri() . '/my-path/jquery.fancybox.js', array( 'jquery' ), null);
}
add_action('wp_enqueue_scripts', 'my_lightboxs');

Include jQuery Plugins

You can include jquery plugins in wordpress theme or plugin easily using this list, for example we will include jquery form plugin:

function include_jquery_form(){
    wp_enqueue_script( 'jquery-form-bla-bla-bla', false, array('jquery-form'), null);
}
add_action( 'wp_enqueue_scripts', 'include_jquery_form' );

Include JavaScript File Only

function include_my_javascript_file(){
    wp_enqueue_script(  'my-javascript-bla-bla-bla', plugins_url( '/my-path/my-javascript-file.js', __FILE__ ), null );
}
add_action( 'wp_enqueue_scripts', 'include_my_javascript_file' );

Include jQuery In Posts And Pages Only

You can include jquery in single post or page only, use this code:

function include_jquery_in_single_post_and_page_only(){
    if( is_single() or is_page() ){
        wp_enqueue_script('my-jquery-bla-bla', false, array( 'jquery' ), null);
    }
}
add_action('wp_enqueue_scripts', 'include_jquery_in_single_post_and_page_only');

Wrong Way

Do not include jquery or javascript files in header.php or footer.php file like this:

<head>
    <script src="http://my-website.com/my-script.js"></script>
</head>

But you can use javascript code or jquery code in wp_head or wp_footer action, code only! not file! for example:

function my_code_in_header(){
    ?>
        <script type="text/javascript">
            var options = { bg:'#000000', id:'alobaidi-loading-bar' };
            var nanobar = new Nanobar( options );
            nanobar.go(100);
        </script>
    <?php
}
add_action('wp_head', 'my_code_in_header');

Now your code will be in <head> tag.

You can read tutorial about include css file in wordpress.