• Hi guys, I’m having big problems at the moment with one of the sites I’m working on. Basically, I have a small javascript file to load onto the page (I’m using a twentytwelve child theme) and my javascript file called script_1.js is located in the root directory of the child theme. So, I managed to load the file in the page with the functions.php file, here it is here:

    <?php
    
    function theme_enqueue_styles() {
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array('parent-style')
        );
    }
    function wpb_adding_scripts(){
    	wp_register_script('my_script', get_stylesheet_directory_uri() . '/script_1.js', array(),'1.1', true);
    	wp_enqueue_script('my_script');
    
    }
    add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
    add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
    
    ?>

    but the problem is that the file is loaded inside the body tag and not inside the <head>, where the automatically loaded jquery file is, and the result of this is that my javascript file doesn’t work because it needs jquery (so I get the typical $(document) is not a function error). You can see the site here https://antonioborrillo.co.uk/andys/ and you’ll see the error in the console. Now, to get around this, it seems obvious to me that the javascript file needs to come after the jquery script, how do I accomplish this?
    By the way my script_1.js contains only this:
    $(document).ready(function(){console.log("scriptLoaded!");});
    thanks

  • The topic ‘my javascript files is positioned before jquery’ is closed to new replies.