jQuery scripts not loading in WordPress

Question

I tried to attach my scripts to WordPress. I read all topics and tried all but did not get the solution, so i created a fake WordPress theme and uploaded it. Please, if you can solve this let me know.

Here is the file: my theme

Using Flexslider Sticky Header and Responsive Navigation I guess that wp_enqueue_script does not work.

function theme_name_scripts() {

wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/myscripts.js', array(),'1.0.0', true );
wp_enqueue_script( 'masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array(), '1.0.0', true );
wp_enqueue_script( 'flex-min', get_template_directory_uri() . '/js/jquery.flexslider-min.js', 'jquery' );   
wp_enqueue_script( 'flex', get_template_directory_uri() . '/js/jquery.flexslider.js', 'jquery' );   

}

Please edit my theme.

thanks

Answer 1

OK here are the steps to take to resolve your issue.

1) Check you've added necessary actions.

Open up header.php inside your theme folder. Check that before the tag you have the wp_head action.

<?php wp_head(); ?>

Open up footer.php and before the closing body tag check you have the wp_footer tag.

<?php wp_footer(); ?>

These tags are necessary for the scripts to be added correctly.

2) Check your JS exists.

Next up is really simple. Open the JS folder and check the files you're attempting to load exist. WordPress will ignore them completely if they don't exist instead of adding a broken URL.

3) Check you're using the correct hook.

I noticed some comments / answers suggested use of init or wp_footer as the hook to load your JS but this is incorrect. You need to use the wp_enqueue_scripts hook. This should be placed inside functions.php

function theme_name_scripts() {

    wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/myscripts.js', array(),'1.0.0', true );
    wp_enqueue_script( 'masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array(), '1.0.0', true );
    wp_enqueue_script( 'flex-min', get_template_directory_uri() . '/js/jquery.flexslider-min.js', 'jquery' );   
    wp_enqueue_script( 'flex', get_template_directory_uri() . '/js/jquery.flexslider.js', 'jquery' );   

}
add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

If you're still having an issue let me know and I'll go over further possibilities however the likelihood of that being necessary is slim. Also I'd like to highlight the name of the action is wp_enqueue_scripts. I've noticed a number of similar questions lately where the problem has been users have forgotten the 's'.

Answer 2

Try this

<?php

function theme_name_scripts() {

    wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/myscripts.js', array(),'1.0.0', true );
    wp_enqueue_script( 'masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array(), '1.0.0', true );
    wp_enqueue_script( 'flex-min', get_template_directory_uri() . '/js/jquery.flexslider-min.js', 'jquery' );   
    wp_enqueue_script( 'flex', get_template_directory_uri() . '/js/jquery.flexslider.js', 'jquery' );   
}
add_action('wp_footer', 'theme_name_scripts'); 


?>

Answer 3

Try to place your myscripts.js after you've included flexslider scripts:

function theme_name_scripts() {
    wp_enqueue_script( 'masonry', get_template_directory_uri() . '/js/masonry.pkgd.min.js', array(), '1.0.0', true );
    wp_enqueue_script( 'flex-min', get_template_directory_uri() . '/js/jquery.flexslider-min.js', 'jquery' );   
    wp_enqueue_script( 'flex', get_template_directory_uri() . '/js/jquery.flexslider.js', 'jquery' );
    wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/myscripts.js', array(),'1.0.0', true );
}