Include jQuery in header.php… PLEASE HELP ?!

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

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?

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

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

when you put this (change mydomain of course)

https://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

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:
https://codex.www.ads-software.com/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
}

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)

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!

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

@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

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);

Oops. The last line of the above code should be:
add_action('init', mytheme_js);

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', 'https://demo1.thedesignweb.com.au/wp-content/themes/default/js/sdswide.js', array('jquery')); ?>
<?php wp_enqueue_script('slide', 'https://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="https://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:
https://demo1.thedesignweb.com.au

Thanks for all your help, don’t know what I’d do without forums!

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.

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.