Enqueue jQuerry: Fatal error: Call to undefined function jQuery() in

  • Hi everyone,

    I am currently working on a child-theme for my website, and I would like to enqueue jQuerry to be able to work with the .addClass function.

    Here is what I added to my functions.php sheet:

    <?php
function penscratch_child_scripts() {
    wp_enqueue_script( 'penscratch-sticky-menu', get_template_directory_uri() . '/js/jquery.js', array(), '1.11.2', false );
    add_action( 'wp_enqueue_scripts', 'penscratch_scripts_child' );
}
?>

    I want my script to be used on the entire website, so I added the following in my header.php sheet:

    <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jquery.js"></script>
    <?php
jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 1){
    jQuery('header').addClass("fixed");
  }
  else{
    jQuery('header').removeClass("fixed");
  }
});
?>

    Once I reach this step and I try to test my code in the browser I get this message:

    Fatal error: Call to undefined function jQuery() in C:\Wamp\etc.

    plus a table called call stack with a bunch of different info.

    I am fairly new at PHP and after spending 4 hours looking for tutorials I cannot figure out how to solve that.

    Thank you for your help!

    Teddy

Viewing 6 replies - 1 through 6 (of 6 total)

  • The part that you went wrong is that the jquery code is JavaScript, not PHP, so you can’t call it from your PHP code.

    You need to have this part (without the PHP tags):

    jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 1){
    jQuery('header').addClass("fixed");
  }
  else{
    jQuery('header').removeClass("fixed");
  }
});

    saved to an external file, like myscript.js, and then enqueue that as well as your jQuery and scrolling scripts. so it would be something like this:

    <?php
function penscratch_child_scripts() {
    wp_enqueue_script( 'penscratch-sticky-menu', get_template_directory_uri() . '/js/jquery.js', array(), '1.11.2', false );
    wp_enqueue_script( 'myscript', get_template_directory_uri() . '/js/myscript.js', array( 'jquury', 'penscratch-sticky-menu' ) );
}

add_action( 'wp_enqueue_scripts', 'penscratch_scripts_child' );
    Thread Starter Teddy_c

    (@teddy_c)

    Thank you! I don’t get any errors anymore.

    However, it doesn’t add the class .fixed to my header when scrolling down.

    Add some debugging to your JavaScript code then. something like this…

    jQuery(window).scroll(function() {
if (jQuery(this).scrollTop() > 1){
    jQuery('header').addClass("fixed");
console.log( 'Set class FIXED' );
  }
  else{
    jQuery('header').removeClass("fixed");
conosle.log( 'Remove class FIXED' );
  }
});

    See if those show up in you JavaScript console. If they do, then they should be workign correctly. If they dont then you shoudl go back and look at the documentation for the script that you’ve got to see where you’re going wrong.

    Thread Starter Teddy_c

    (@teddy_c)

    Thanks for the help. I have tried to make the changes, unfortunately it does not work. It does not add my class.

    Because I am new at PHP and Javascript/jQuery, I can’t figure it out.

    Here is what I have so far

    functions.php:

    <?php
function makeSticky() {
    wp_enqueue_script( 'makeSticky', get_template_directory_uri() . '/js/sticky.js', array('jquery'), false );
add_action( 'wp_enqueue_scripts', 'penscratch_scripts_child' );
}
?>

    header.php:

    <head>
<script type="text/javascript" src="/js/sticky.js"></script>
</head>

    sticky.js

    jQuery(document).ready(function($) {
function makeSticky() {
    var myWindow = $( window),
        myHeader = $(".site-header");

    myWindow.scroll(function() {
        if ( myWindow.scrollTop() == 0) {
            myHeader.removeClass( "sticky-nav");
        } else {
            myHeader.addClass( "sticky-nav");
        }
    });
}

    I feel like I miss something in header.php, but I can’t figure it out. I went through the codex again and again, following the recommendations, without success.

    Thank for any advice or help. I really appreciate!

    Thanks

    Teddy

    Without looking at too much I can already see a few problems very quickly.

    First, when you’re uisng WordPress you should always use jQjery and not $. Secondly, you have a function defined in your JavaScript, but you don’t actually call that function anywhere, so it never happens.

    jQuery(document).ready(function($) {
    makeSticky ();
});

function makeSticky() {
    var myWindow = jQuery( window),
        myHeader = jQuery(".site-header");

    myWindow.scroll(function() {
        if ( myWindow.scrollTop() == 0) {
            myHeader.removeClass( "sticky-nav");
        } else {
            myHeader.addClass( "sticky-nav");
        }
    });
}

    You’ve also removed the enqueue parts, whcih is the preferred way to add the JavaScript files to the head, and not directly in the header.php file.

    my final point is that you really need to look at a JavaScript console in yoru browsers debugger. That will show you a lot of information about errors, and any de-bugging calls that you add in (like I gave you an example ofr before). Without that you’ll be pretty much blidn to anything that’s happening, or not happening as the case may be.

    Thread Starter Teddy_c

    (@teddy_c)

    Thank you very much for your help! I have tried to use the console to debug my code without success.

    I think I just don’t have the right skills yet (being a beginner at PHP/JS). So the best things to do right now is just to explain what I am trying to achieve:

    I want to add a class to my header on scroll to be able to restyle it => make it sticky, integrate my logo on the left/right side in a smaller version, etc.

    If anyone has any ideas on how to do that thanks for your help. ??

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Enqueue jQuerry: Fatal error: Call to undefined function jQuery() in’ is closed to new replies.