WordPress.org

Ready to get started?Download WordPress

Forums

Include jQuery in header.php... PLEASE HELP ?! (21 posts)

  1. w1cky
    Member
    Posted 5 years ago #

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

  2. stvwlf
    Member
    Posted 5 years ago #

    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

  3. w1cky
    Member
    Posted 5 years ago #

    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?

  4. stvwlf
    Member
    Posted 5 years ago #

    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

  5. w1cky
    Member
    Posted 5 years ago #

    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

  6. stvwlf
    Member
    Posted 5 years ago #

    when you put this (change mydomain of course)

    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

  7. w1cky
    Member
    Posted 5 years ago #

    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

    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
    }
  8. stvwlf
    Member
    Posted 5 years ago #

    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)

  9. lexpresso
    Member
    Posted 5 years ago #

    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!

  10. evansharp
    Member
    Posted 5 years ago #

    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

  11. evansharp
    Member
    Posted 5 years ago #

    @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

  12. Dzikri Aziz
    Member
    Posted 5 years ago #

    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);
  13. Dzikri Aziz
    Member
    Posted 5 years ago #

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

  14. belindajohnstone
    Member
    Posted 5 years ago #

    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

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

  15. cole20444
    Member
    Posted 5 years ago #

    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.

  16. inetwerx
    Member
    Posted 4 years ago #

    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.

  17. inetwerx
    Member
    Posted 4 years ago #

    thanks to everyone that posted. you guys really helped me.well done!!!

  18. jtancil@yahoo.com
    Member
    Posted 4 years ago #

    was having the same problems as others on this thread. I followed inetwerx's suggestions (enqueue and replace all $ with jQuery) and the script worked again. thank you!!!

  19. harrybargis
    Member
    Posted 4 years ago #

    This is why I love the wordpress forum. Came here to ask the same question and find all the answers I need. Thanks everyone.

    Harry

  20. Gerald
    Member
    Posted 4 years ago #

    Just a small tip:

    I was reading through the thread and noticed that many are taking to replacing all $ signs within the code. You don't need to change all the $ sign to jQuery in your code...

    You just need to wrap all your code within

    jQuery(document).ready(function($) {
     //code.
    });

    Note the $ in the function bracket which alot of examples above miss out.

    All the $ within your code would still be interpreted correctly.

    Cheers!

  21. playingwpixels
    Member
    Posted 4 years ago #

    Excellent info. This solved a problem I've spent weeks researching. I added

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

    and then followed geraldyeo's suggestion above. I then watched in wonder as I saw javascript doing what it's supposed to do. Thank you for giving me my time back to tackle the next coding mystery. Til we commiserate and solve again!

Topic Closed

This topic has been closed to new replies.

About this Topic