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()
).
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
?
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);
to
add_action( 'get_footer', 'mytheme_scripts', false);
link
tags are invalid outside thehead
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:05wp_head
causes a lot of issues, so you need to remove it from your code,locale_stylesheet
,wp_generator
andwp_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