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.