0

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?

  • 2
    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 Jan 13 '16 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 Jan 13 '16 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 Jan 13 '16 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 Jan 13 '16 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 Jan 13 '16 at 16:45
-1

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);

to

add_action( 'get_footer', 'mytheme_scripts', false);
  • Please explain downvote :) – Diego Betto Feb 2 '17 at 23:25
  • 1
    I'm pretty sure the downvote is because this answer in no way addresses the question. Specifically, OP asked how to load css in the header, where your solution would cause them to load in the footer. – Hybrid Web Dev Oct 29 '17 at 3:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.