WordPress.org

Ready to get started?Download WordPress

Forums

Child theme scripts loading via wp_enqueue_scripts but not working (6 posts)

  1. tangobango
    Member
    Posted 1 year ago #

    Hi. I'm new to theme development, using a child theme, and am having a problem replacing hardcoded script references with enqueued scripts (like all the advice I see says to do,)

    If I do this in my header.php, the scripts load and work:

    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory');?>/js/jquery-1.8.3.js"></script>
    <script type='text/javascript' src='<?php bloginfo('stylesheet_directory');?>/js/menu.js' ></script>
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory');?>/js/jquery.kwicks.js"></script>

    If I do this in functions.php, the scripts load but don't work:

    function load_my_scripts() {
            wp_deregister_script( 'jquery' );
            wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
            wp_enqueue_script('jquery');
            wp_register_script('menu', get_stylesheet_uri().'/js/menu.js', array('jquery') );
            wp_enqueue_script('menu');
            wp_register_script('kwicks', get_stylesheet_uri().'/js/jquery.kwicks.js', array('jquery') );
            wp_enqueue_script('kwicks');
            wp_register_script('equalheights', get_stylesheet_uri().'/js/jquery.equalheights.js', array('jquery') );
            wp_enqueue_script('equalheights');
    
        }  
    
    add_action('wp_enqueue_scripts', 'load_my_scripts');

    Can someone see what I'm doing wrong?

    Thanks.

  2. Frumph
    Member
    Posted 1 year ago #

    Try using:

    get_stylesheet_directory_uri()
    wp_enqueue_script('equalheights', get_stylesheet_directory_uri().'/js/jquery.equalheights.js', array('jQuery'), null, true);

    ^ the true part loads in the footer, you really don't need the register and add_action parts just to test it out

    test the get_stylesheet_directory_uri() with var_dump too

    var_dump(get_stylesheet_directory_uri().'/js/jquery.equalheights.js');

    to see if that's the output you want for the uri

  3. tangobango
    Member
    Posted 1 year ago #

    Thanks. Changing to get_stylesheet_directory_uri() fixed the problem.

    Followup: When should I load a script in footer and when in header?

    Thanks again.

  4. Frumph
    Member
    Posted 1 year ago #

    You should always load stuff up in the footer, as long as it will work that way

  5. tangobango
    Member
    Posted 1 year ago #

    Oops. I was wrong. It still is loading the js files but not executing them if I put get_stylesheet_directory_uri(). (I forgot to take the lines out of header.php so I thought it was working.)

    so, my scripts load and run with`<script type="text/javascript" src="<?php bloginfo('stylesheet_directory');?>/js/jquery-1.8.3.js"></script>
    <script type='text/javascript' src='<?php bloginfo('stylesheet_directory');?>/js/menu.js' ></script>
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory');?>/js/jquery.kwicks.js"></script>in the header but don't withfunction load_my_scripts() {
    //wp_deregister_script( 'jquery' );
    //wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
    wp_enqueue_script('jquery');
    wp_register_script('menu', get_stylesheet_directory_uri().'/js/menu.js', array('jquery') );
    wp_enqueue_script('menu');
    wp_register_script('kwicks', get_stylesheet_directory_uri().'/js/jquery.kwicks.js', array('jquery') );
    wp_enqueue_script('kwicks');
    wp_register_script('equalheights', get_stylesheet_directory_uri().'/js/jquery.equalheights.js', array('jquery') );
    wp_enqueue_script('equalheights');

    }

    add_action('wp_enqueue_scripts', 'load_my_scripts');in functions.php .(Source of page shows files loaded:<script type='text/javascript' src='http://localhost/themebuilder/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>
    <script type='text/javascript' src='http://localhost/themebuilder/wp-content/themes/conside/js/menu.js?ver=3.4.2'></script>
    <script type='text/javascript' src='http://localhost/themebuilder/wp-content/themes/conside/js/jquery.kwicks.js?ver=3.4.2'></script>
    <script type='text/javascript' src='http://localhost/themebuilder/wp-content/themes/conside/js/jquery.equalheights.js?ver=3.4.2'></script>
    <script type='text/javascript' src='http://localhost/themebuilder/wp-includes/js/comment-reply.js?ver=3.4.2'></script>`

    Any ideas?

  6. tangobango
    Member
    Posted 1 year ago #

    Sorry for the mess of code. I must have missed a backtick. Here are the three blocks:

    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory');?>/js/jquery-1.8.3.js"></script>
    <script type='text/javascript' src='<?php bloginfo('stylesheet_directory');?>/js/menu.js' ></script>
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory');?>/js/jquery.kwicks.js"></script>
    function load_my_scripts() {
            //wp_deregister_script( 'jquery' );
            //wp_register_script('jquery', '//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js');
            wp_enqueue_script('jquery');
            wp_register_script('menu', get_stylesheet_directory_uri().'/js/menu.js', array('jquery') );
            wp_enqueue_script('menu');
            wp_register_script('kwicks', get_stylesheet_directory_uri().'/js/jquery.kwicks.js', array('jquery') );
            wp_enqueue_script('kwicks');
            wp_register_script('equalheights', get_stylesheet_directory_uri().'/js/jquery.equalheights.js', array('jquery') );
            wp_enqueue_script('equalheights');
    
        }  
    
    add_action('wp_enqueue_scripts', 'load_my_scripts');
    <script type='text/javascript' src='http://localhost/themebuilder/wp-includes/js/jquery/jquery.js?ver=1.7.2'></script>
    <script type='text/javascript' src='http://localhost/themebuilder/wp-content/themes/conside/js/menu.js?ver=3.4.2'></script>
    <script type='text/javascript' src='http://localhost/themebuilder/wp-content/themes/conside/js/jquery.kwicks.js?ver=3.4.2'></script>
    <script type='text/javascript' src='http://localhost/themebuilder/wp-content/themes/conside/js/jquery.equalheights.js?ver=3.4.2'></script>
    <script type='text/javascript' src='http://localhost/themebuilder/wp-includes/js/comment-reply.js?ver=3.4.2'></script>

Topic Closed

This topic has been closed to new replies.

About this Topic