Title: Include jQuery in header.php… PLEASE HELP ?!
Last modified: August 19, 2016

---

# Include jQuery in header.php… PLEASE HELP ?!

 *  [w1cky](https://wordpress.org/support/users/w1cky/)
 * (@w1cky)
 * [16 years, 11 months ago](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/)
 * I’m **trying** to include the jQuery library and trigger my script (tested and
   working on standard HTML page), but not having any luck. Can anybody help… it’s
   driving me nuts?
 * I’ve scoured the forums and Google and tried everything that I’ve come across,
   but it’s just not happening.
 * This is what I’ve currently got i the header.php:
 * I have placed this:
 *     ```
       <?php wp_enqueue_script('jquery'); ?>
       <?php wp_enqueue_script('myjsfile', '/wp-content/themes/my-theme/js/myjsfile.js', array('jquery')); ?>
   
       <script type="text/javascript">
       jQuery(document).ready(function() {
       jQuery('.rOver').myjsfile({speed: 100, delay: 400});
       });
       </script>
       ```
   
 * Immediately before this:
 * `<?php wp_head(); ?>`

Viewing 15 replies - 1 through 15 (of 20 total)

1 [2](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/page/2/?output_format=md)

 *  [stvwlf](https://wordpress.org/support/users/stvwlf/)
 * (@stvwlf)
 * [16 years, 11 months ago](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/#post-1052337)
 * hi
 * you are close
 * put this `<?php wp_enqueue_script('jquery'); ?>`
    Immediately before this: `<?
   php wp_head(); ?>`
 * put the script AFTER `<?php wp_head(); ?>`
 * That is because the jQuery main script doesn’t get enqueued UNTIL wp_head, while
   your custom script has already been loaded and failed to run before the jQuery
   library is loaded
 *  Thread Starter [w1cky](https://wordpress.org/support/users/w1cky/)
 * (@w1cky)
 * [16 years, 11 months ago](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/#post-1052387)
 * Many thanks for the feedback, but unfortunately I’m still not getting there.
 * This is what I’ve got:
 *     ```
       <?php wp_enqueue_script('jquery'); ?>
   
       <?php wp_head(); ?>
   
       <?php wp_enqueue_script('myjsfile', 'wp-content/themes/my-theme/js/myjsfile.js', array('jquery')); ?> 
   
       <script type="text/javascript">
       jQuery(document).ready(function() {
       jQuery('.rOver').myjsfile({speed: 100, delay: 400});
       });
       </script>
       ```
   
 * But I’ve also tried this:
 *     ```
       <?php wp_enqueue_script('jquery'); ?>
       <?php wp_enqueue_script('myjsfile', 'wp-content/themes/my-theme/js/myjsfile.js', array('jquery')); ?> 
   
       <?php wp_head(); ?>
   
       <script type="text/javascript">
       jQuery(document).ready(function() {
       jQuery('.rOver').myjsfile({speed: 100, delay: 400});
       });
       </script>
       ```
   
 * with the same lack of success.
 * When I look at the HTML output, there is no reference to the called javascript
   only to the embedded bit.
 * Anything else I could try?
 *  [stvwlf](https://wordpress.org/support/users/stvwlf/)
 * (@stvwlf)
 * [16 years, 11 months ago](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/#post-1052494)
 * Hi
 * re:
 *     ```
       <?php wp_enqueue_script('myjsfile', 'wp-content/themes/my-theme/js/myjsfile.js', array('jquery')); ?>
       ```
   
 * you definitely must place his BEFORE wp_head()
 * I think your problem is this
 * >  **SRC**
   >  (string) (Optional) Path to the script **from the root directory 
   > of WordPress**. Example: “**/wp-includes**/js/scriptaculous/scriptaculous.js”.
   > This parameter is only required when WordPress does not already know about 
   > this script. Defaults to false.
 * You have given a relative path – no leading / on the wp-includes.
    Change it 
   to /wp-content and try again
 *  If you have installed WP in a folder and that doesn’t work, try adding the folder
   name
 * example – if installed in folder “wp”
    `/wp/wp-content/themes/my-theme/js/myjsfile.
   js`
 *  Thread Starter [w1cky](https://wordpress.org/support/users/w1cky/)
 * (@w1cky)
 * [16 years, 11 months ago](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/#post-1052658)
 * Thanks for the feedback.
 * Actually, it seems that the jQuery is loading and the problem is actually triggering
   the js file.
 * before </head> i’ve got this:
 *     ```
       <script type="text/javascript" src="/wp-content/themes/my-theme/js/bettertooltip.js"></script>
       <script type="text/javascript">
             jQuery(document).ready(function(){
                jQuery('.tTip').bettertooltip({speed: 150, delay: 300});
             });
       </script>
       ```
   
 * But although I’ve tested this and got it working in a straight HTML page, there’s
   still no joy in WP.
 * I also tried enqueueing before the wp-head(), like this:
 *     ```
       <?php wp_enqueue_script('jquery'); ?>
       <?php wp_enqueue_script('bettertooltip', '/wp-content/themes/my-theme/js/bettertooltip.js', array('jquery')); ?>
   
       <?php wp_head(); ?>
   
       <script type="text/javascript">
             jQuery(document).ready(function(){
                jQuery('.tTip').bettertooltip({speed: 150, delay: 300});
             });
       </script>
       ```
   
 * … still no joy.
 * Any ideas/ feedback VERY much appreciated.
 * Thanks
 *  [stvwlf](https://wordpress.org/support/users/stvwlf/)
 * (@stvwlf)
 * [16 years, 11 months ago](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/#post-1052662)
 * when you put this (change mydomain of course)
 * [http://mydomain.com/wp-content/themes/my-theme/js/bettertooltip.js](http://mydomain.com/wp-content/themes/my-theme/js/bettertooltip.js)
   
   in your browser address bar, is it displaying the javascript? (IE will try to
   run it). My point being, checking that is the valid path to the script.
 * I actually haven’t used enqueue_script on the individual script files – I use
   it on the jquery library itself – I declare the script files in the normal way
   below “wp_head”. Its probably correct to enqueue, but since you are not getting
   results I would try it without that.
 * I’m not certain but I think I’ve had to go into a few jQuery plugin script files
   and change the $ to jQuery. They are supposed to be declared in a way where that
   is not necessary but not all of them do. I just took a look – if this is the 
   bettertooltips.js from the nettuts tutorial, that file has a number of $ in it
   that should be changed to jQuery
 *  Thread Starter [w1cky](https://wordpress.org/support/users/w1cky/)
 * (@w1cky)
 * [16 years, 11 months ago](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/#post-1052674)
 * Thanks for the reply stvwlf.
 * Yes in this particular example I’ve followed the nettuts tutorial, but I’m having
   issues with some plugins taken from the main jQuery site too.
 * All paths are correct when checked as per your advice.
 * What you’ve written with regard to changing “$” to “jQuery” makes sense to me
   but doesn’t seem to resolve the issue. Just to clarify… does this mean ALL instances
   of “$”.
 * Also, I came across this in the codex:
    [http://codex.wordpress.org/Function_Reference/wp_enqueue_script](http://codex.wordpress.org/Function_Reference/wp_enqueue_script)
 * Does (should) the following negate the need to change the “$” in the scripts,
   or do I misunderstand:
 *     ```
       jQuery(document).ready(function($) {
           // $() will work as an alias for jQuery() inside of this function
       }
       ```
   
 *  [stvwlf](https://wordpress.org/support/users/stvwlf/)
 * (@stvwlf)
 * [16 years, 11 months ago](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/#post-1052678)
 * Hi
 * Yes, I’d say you are interpreting the revised jQuery header info correctly.
 * I haven’t completely learned yet where in WP you can leave the $ in and where
   you have to change it to jQuery, so to be on the safe side I have tended to change
   them all to jQuery because at least it works.
 * Above you said jQuery is loading but the script is not being triggered. The next
   thing I would do is temporarily move the entire contents of the external file
   into header.php and comment out the call to the external file. This must be pasted
   in below wp_head() ( Get rid of the $.) Does it work correctly when loaded this
   way? If it does this shows the problem is with the call to the external file.
   If not, on to the next thing…
 * Another thing – are you positive nothing in the CSS is overriding the class .
   tTip? Its one thing to work correctly on a test HTML page with only one example
   on it, and another being placed in a fullblown site with a lot of classes and
   a long stylesheet. Sometimes for example the jQuery selector has to be something
   like #content .tTip instead of just .tTip (depending on the theme)
 *  [lexpresso](https://wordpress.org/support/users/lexpresso/)
 * (@lexpresso)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/#post-1052780)
 * I’ve done all of the above, including calling only jQuery to test a simple alert
   script to see if it works and yet, it does not. Are there some simple checks 
   I’m not performing? It’s like jQuery is not even there and I’ve checked and double
   checked the paths. Does the ?ver=… affect the script? It get appended automatically
   even to scripts in my theme directory.
 * Cheers!
 *  [evansharp](https://wordpress.org/support/users/evansharp/)
 * (@evansharp)
 * [16 years, 10 months ago](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/#post-1052783)
 * Hi All,
    I’m having the identical difficulty with `enqueue`. I chimed-in just
   to get email updates on this thread. If it helps anyone see anything new, here
   is my current (non-functional) snippet:
 *     ```
       <?php
       wp_enqueue_script('jquery');
       wp_enqueue_script('jquery-ui-core');
       wp_enqueue_script( 'onLoad', '/wp-content/themes/my-theme/js/onLoad.js', array( 'jquery' ) );
       wp_head();
       ?>
       ```
   
 * I have also done the ‘my code in the header below `wp_head()`‘ test my script
   is fine. We’re missing something in translation here. Where is Otto when we need
   him?
 * Evan
 *  [evansharp](https://wordpress.org/support/users/evansharp/)
 * (@evansharp)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/#post-1052784)
 * [@everyone](https://wordpress.org/support/users/everyone/): I found a solution.
   I’m not sure if this will comply with the best practices for `wp_enqueue_spript()`,
   but this is working for me now:
 * I put my `wp_enqueue_script()` statements into the functions.php file of my theme;
   including the call for my own javascript file. What remains in the header.php
   is just `<?php wp_head(); ?>`
 * Then in the functions.php:
 *     ```
       <?php
       wp_enqueue_script('jquery');
       wp_enqueue_script('jquery-ui-core');
       wp_enqueue_script( 'onLoad', '/wp-content/themes/my-theme/js/onLoad.js', array( 'jquery' ) );
       ?>
       ```
   
 * Give it a go!
 * Also, don’t forget that loading jQuery this way puts it into .noConflict(). So
   you need to either use the full “jQuery” object refrence (instead of “$”) or 
   force some other variable, like I did:
 *     ```
       var $j = jQuery.noConflict();
       $j(document).ready(
       	function(){
       		footerSlider();
       		dropDownMenus();
       	});
       ```
   
 * Best,
    Evan
 *  [Dzikri Aziz](https://wordpress.org/support/users/kucrut/)
 * (@kucrut)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/#post-1052791)
 * wp_enqueue_script should be used with the file URL, not the PATH. Here’s what
   I use in my functions.php:
 *     ```
       # Template Location
       define('THEME', get_bloginfo('template_url'), true);
       # CSS files location
       define('THEME_CSS', THEME . '/style', true);
       # JS files location
       define('THEME_JS', THEME . '/script', true);
   
       # Enqueue JS
       function mytheme_js() {
         if (is_admin()) return;
         wp_enqueue_script('jCycle', THEME_JS . '/jquery_cycle.js', 'jquery');
         wp_enqueue_script('myScript', THEME_JS . '/myScript.js', 'jquery');
       }
       add_action('init', mytheme);
       ```
   
 *  [Dzikri Aziz](https://wordpress.org/support/users/kucrut/)
 * (@kucrut)
 * [16 years, 9 months ago](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/#post-1052795)
 * Oops. The last line of the above code should be:
    `add_action('init', mytheme_js);`
 *  [belindajohnstone](https://wordpress.org/support/users/belindajohnstone/)
 * (@belindajohnstone)
 * [16 years, 8 months ago](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/#post-1052797)
 * I was struggling all day with this.
 * Had my jQuery sdSwitch working perfectly on a regular html page, but couldn’t
   get it going in WordPress. I did as Evan mentioned above.
 * At the top of my **functions.php** I pasted:
 *     ```
       <?php wp_enqueue_script('jquery'); ?>
       <?php wp_enqueue_script('sdswide', 'http://demo1.thedesignweb.com.au/wp-content/themes/default/js/sdswide.js', array('jquery')); ?>
       <?php wp_enqueue_script('slide', 'http://demo1.thedesignweb.com.au/wp-content/themes/default/js/slide.js', array('jquery')); ?>
       ```
   
 * It wasn’t working originally, but I must have had the path wrong.
 * In my **slide.js** I made sure the `$` was replaced with `jQuery`:
 *     ```
       jQuery(document).ready(function() {
       	    jQuery('#test').sdswitch({
       	    	time: 5000,
       	    	animateTime: 1000,
       	    	startElement: 0,
       	    	showWindow: true,
       	    	showTitle: true
       	    });
       });
       ```
   
 * And it worked! Just wanted to share this because I tried so many things and this
   worked.
 * I called my css in **header.php**, I think that’s right:
    `<link rel="stylesheet"
   href="http://demo1.thedesignweb.com.au/wp-content/themes/default/sdswitch.css"
   type="text/css" media="screen" />` but I think I need to fix it a bit.
 * And here it is:
    [http://demo1.thedesignweb.com.au](http://demo1.thedesignweb.com.au)
 * Thanks for all your help, don’t know what I’d do without forums!
 *  [cole20444](https://wordpress.org/support/users/cole20444/)
 * (@cole20444)
 * [16 years, 8 months ago](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/#post-1052798)
 * I have created a website using wordpress and I wanted to include JQuery like 
   I have in many websites to provide more functionality. After failing initially
   and then figuring out that I had to use the wp_enqueue_script I thought I had
   figured it out. Well I still can’t get JQuery to work. Here’s my steps:
 * In my functions.php file I put these lines to include Jquery and a test script
   that calls the alert function:
 * <?
    wp_enqueue_script(‘jquery’); wp_enqueue_script(‘jquery-ui-core’); wp_enqueue_script(‘
   init’, ‘/wp-content/themes/starkers2.2-WP2.6.2/starkers/init.js’, array( ‘jquery’));?
   >
 * My header.php just has
 * <? wp_head();?>
 * My init.js file looks like this
 * jQuery(document).ready(function(){
    alert(“HELLO”); });
 * I have tried everything that I can think of and still nothing works.
    Thank you
   in advance for any help. I have really struggled with this and am not getting
   anywhere.
 *  [inetwerx](https://wordpress.org/support/users/inetwerx/)
 * (@inetwerx)
 * [16 years, 5 months ago](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/#post-1052830)
 * i have followed this threat today and got jquery to work in wordpress. this is
   my header.php code
 *     ```
       <?php wp_enqueue_script('jquery'); ?>
   
       <?php wp_head(); ?>
       <script type="text/javascript" src="<?php bloginfo("template_directory"); ?>/js/menu.js"></script>
   
       </head>
       ```
   
 * my javaScript file looks like this:
 *     ```
       jQuery(document).ready(function() {
   
       	jQuery("ul.nav li").hover(function() { //On hover...
   
       		var thumbOver = jQuery(this).find("img").attr("src"); //Get image url and assign it to 'thumbOver'
   
       		//Set a background image(thumbOver) on the <a> tag - Set position to bottom
       		jQuery(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
   
       		//Animate the image to 0 opacity (fade it out)
       		jQuery(this).find("span").stop().animate({opacity: 0}, 300);
   
       	} , function() { //on hover out...
   
       		//Animate the image back to 100% opacity (fade it back in)
       		jQuery(this).find("span").stop().animate({opacity: 1}, 300);
   
       	});
   
       });
       ```
   
 * –> i replaced every $ in my javascript file with jQuery and got it to work. I’m
   not sure how correctly done it is, but it works.

Viewing 15 replies - 1 through 15 (of 20 total)

1 [2](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/page/2/?output_format=md)

The topic ‘Include jQuery in header.php… PLEASE HELP ?!’ is closed to new replies.

## Tags

 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [jquery](https://wordpress.org/support/topic-tag/jquery/)
 * [wp_enqueue_script](https://wordpress.org/support/topic-tag/wp_enqueue_script/)

 * 20 replies
 * 12 participants
 * Last reply from: [playingwpixels](https://wordpress.org/support/users/playingwpixels/)
 * Last activity: [16 years ago](https://wordpress.org/support/topic/include-jquery-in-headerphp-please-help/page/2/#post-1052855)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics