wp_enqueue_scripts not being called

I have seen many questions at StackOverflow and other websites about why 'wp_enqueue_scripts' not working but none of was what I was looking for.

I want to import a script to my Wordpress theme and I have copied one code snipped from main the main developer Wordpress website.

I have the following code in my 'functions.php'and output is 'OUTPUT 1OUTPUT 4'. It seems 'wpdocs_theme_name_scripts()' never gets call.

/**
 * Proper way to enqueue scripts and styles.
 */
function wpdocs_theme_name_scripts() {
    echo "OUTPUT 2";
    wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/main.js', array(), '1.0.0', true );
    echo "OUTPUT 3";
}
echo "OUTPUT 1";
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
echo "OUTPUT 4";

Solution

Note that wpdocs_theme_name_scripts() will not be called after echo "OUTPUT 1"; and before echo "OUTPUT 4";

add_action() will only register a callback which will be ran when wp_head() is encountered. You can find more details about that in this answer.

Did you add wp_head() in the theme? It is normally added in header.php just before the </head> tag, something like:

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title><?php wp_title(); ?></title>
    <?php wp_head(); ?>
</head>