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?

Improve this question
6
  • 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

2 Answers 2

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

Improve this answer
-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);
Improve this answer
2
  • Please explain downvote :)
    – Diego Betto
    Commented Feb 2, 2017 at 23:25
  • 3
    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
    Commented Oct 29, 2017 at 3:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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