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

admin2025-01-07 7

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?

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()).

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

Share Improve this question edited Aug 4, 2017 at 8:49 Johansson 15.4k11 gold badges43 silver badges79 bronze badges asked Jan 13, 2016 at 13:43 Bunjip 3719 silver badges20 bronze badges

3 You have a serious issue somewhere, styles are never loaded in the footer, and should also never be as link tags are invalid outside the head tags. This is not default behavior. Something broke something else as it is impossible for styles to load in the footer. Coming from your previous question, make sure that you did not remove something that is truly needed. – Pieter Goosen Commented Jan 13, 2016 at 16:05
Here is what I removed according to my previous question pastebin.com/k2XjTV3E Oh, and I'm not the the only one with this issue, see wordpress.org/support/topic/wp_enqueue_style-add-to-head – Bunjip Commented Jan 13, 2016 at 16:12
2 OK, I have tested your code, by removing the three following hooks from wp_head causes a lot of issues, so you need to remove it from your code, locale_stylesheet, wp_generator and wp_print_styles. Clear your browser cache and restart your browser after removing that code. Everything should work normally – Pieter Goosen Commented Jan 13, 2016 at 16:35
What also strange is @Bunjip in your code, maybe it is lack of knowledge from my side, the code you show here <code>add_action( 'wp_enqueue_scripts', 'mytheme_scripts', false);</code> , what is that <code>false</code> doing there? – Charles Commented Jan 13, 2016 at 16:42
@Charles, that's a good question ;). Guess, that comes from playing around with all kind of parameters and forgetting to clean off some trials... – Bunjip Commented Jan 13, 2016 at 16:45

| Show 1 more comment

2 Answers 2

Sorted by: Reset to default 0

hook into init action on your initial plugin function

add_action('init', array(__CLASS__, 'your_function_within_class'));

and add the function

public static function your_function_within_class()
{
    
    wp_register_style('myfirstplugin-admin-css', '/wp-content/plugins/myfirstplugin/assets/style.css', false);
    
    wp_enqueue_style('myfirstplugin-admin-css');
}

hope this help

You can change the hook to get_footer so files are inserted in the footer

try changing

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

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

转载请注明原文地址:http://conceptsofalgorithm.com/Algorithm/1736261491a745.html

theme developmentHow to output wpenqueuestyle() in HTML head instead of footer

最新回复(0)