Why should I insert wp_head() for wp_enqueue_scripts?

Question

I have add this code to functions.php but startwordpress_scripts() function didn't run.

function startwordpress_scripts() {
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '3.3.6' );
    wp_enqueue_style( 'blog', get_template_directory_uri() . '/css/blog.css' );
    wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '3.3.6', true );
}

add_action( 'wp_enqueue_scripts', 'startwordpress_scripts' );

So I added following code in header.php and they worked well.

<?php wp_head(); ?>

Now I want to know the magic role of wp_head() function. Thanks.

Answer 1

In WordPress, actions and filters are considered as hooks . Hooks allow us to modify the WordPress default behaviour without modifying the code found in the core.

Anytime you have an add_action('xxx', 'callback') , the callback function will be called when do_action('xxx') is executed.

In other words: when you have add_action( 'wp_enqueue_scripts', 'startwordpress_scripts' ); , it means that WordPress will run startwordpress_scripts() when do_action('wp_enqueue_scripts') is executed.

Now, let's look at the code in the WordPress core.

If you look at its function definition, wp_head() is a "shortcut" to do_action( 'wp_head' );

function wp_head() {
        /**
         * Print scripts or data in the head tag on the front end.
         *
         * @since 1.5.0
         */
        do_action( 'wp_head' );
}

In other words, wp_head() will execute all callbacks that were defined withadd_action('wp_head') .

If you now look at the wp-includes/default-filters.php file, you'll see:

add_action( 'wp_head', 'wp_enqueue_scripts',1 );

It means that when wp_head() is encountered in your template, a function called wp_enqueue_scripts() is being executed, since it is hooked to wp_head , shown in the line of code above.

the function definition of wp_enqueue_scripts() is:

function wp_enqueue_scripts() {
    /**
     * Fires when scripts and styles are enqueued.
     *
     * @since 2.8.0
     */
    do_action( 'wp_enqueue_scripts' );
}

The do_action( 'wp_enqueue_scripts' ); above is what tells WordPress to execute the callback function of all add_action('wp_enqueue_scripts', 'callback') that are defined.

In short:

1. wp_head() calls do_action('wp_head')
2. do_action('wp_head') executes callback functions of all add_action('wp_head','callback')
3. wp_enqueue_scripts() is one callback of add_action('wp_head','callback')
4. wp_enqueue_scripts() calls do_action('wp_enqueue_scripts')
5. do_action('wp_enqueue_scripts') executes callback functions of all add_action('wp_enqueue_scripts','callback')
6. startwordpress_scripts() is one callback of add_action('wp_enqueue_scripts','callback')
7. Your JS/CSS defined in startwordpress_scripts() are included

Answer 2

The wp_head action hook is triggered within the section of the user's template by the wp_head() function.

If you remove wp_head() function then all action add_action('wp_head','your_custom_action'); is not working also plugin also use wp_head action action to add css or js.

If you remove wp_head function from header.php file then below function not add any JS in header.

function startwordpress_scripts() {
    wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '3.3.6' );
    wp_enqueue_style( 'blog', get_template_directory_uri() . '/css/blog.css' );
    wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '3.3.6', true );
}

add_action( 'wp_enqueue_scripts', 'startwordpress_scripts' );

If you want to remove wp_head() function then you need to add like below.

<link rel='stylesheet' id='bootstrap-css' href='http://www.siteurl.com/wp-content/themes/your-theme/css/bootstrap.min.css?ver=3.3.6' type='text/css' media='all' />
<link rel='stylesheet' id='blog-css' href='http://www.siteurl.com/wp-content/themes/your-theme/css/blog.css?ver=1.0' type='text/css' media='all' />
<script type='text/javascript' src='http://www.siteurl.com/wp-content/themes/your-theme/js/bootstrap.min.js?ver=3.3.3'></script>

See Link for wp_enqueue_script function and args

Answer 3

There are no errors in your code shown above and I've double checked to see it working correctly in a fresh WP install. It should not be the cause of your errors.

Take a look at the DEBUG section of the codex to change that. This might need to be dropped into your wp-config.php.

// allow debugging 
defined( 'WP_DEBUG' ) or define( 'WP_DEBUG', true );

// log errors to wp-content/debug.log
defined( 'WP_DEBUG_LOG' ) or define( 'WP_DEBUG_LOG', true );

// show errors on screen
defined( 'WP_DEBUG_DISPLAY' ) or define( 'WP_DEBUG_DISPLAY', true );