How to output wp_enqueue_style() in HTML head instead of footer


I added some actions to wp_enqueue_scripts to load my custom css and js files in the header section by using wp_head(); right before the closing </head> tag.

function mytheme_scripts(){
    // Load our main stylesheet
    wp_enqueue_style( 'mytheme-css', get_template_directory_uri() . '/css/styles.min.css', false);
    // Load concatenated vendors JavaScript file
    wp_enqueue_script( 'vendors-js', get_template_directory_uri() . '/js/vendors.min.js');
    // Load our main JavaScript file
    wp_enqueue_script( 'mytheme-js', get_template_directory_uri() . '/js/app.min.js', array( 'vendors-js' ));

add_action( 'wp_enqueue_scripts', 'mytheme_scripts', false);

While both *.js files are loaded in the HTML <head> section the custom *.css file is loaded in the footer of the page (probably triggered by wp_footer()).

I have read about the fact that wp_enqueue_scripts() could be placed anywhere in the source code since any earlier WP version. I’ve also read that wp_enqueue_script() has a parameter $in_footer to control the output location. However, wp_enqueue_style() doesn’t have such an option.

Now, how can I have my custom stylesheet link be placed in HTML head section without hard-coding it into header.php?

, , Bunjip 2 years 2020-09-02T20:10:40-05:00 0 Answers 52 views 0

Leave an answer