18

I need to add custom inline styles to the header of a custom theme I'm creating. I've come across the wp_add_inline_style() function, which works but doesn't really suit me as it depends of a specific stylesheet. I'd need to add inline styles at the end of the head tag without a stylesheet dependency.

I've tried to set either the theme stylesheet or a non-existent one. In both cases, it works but it's a bit of a dirty hack IMO (either load the theme stylesheet twice or refer to a ghost file...). Is there a proper way to add inline styles in head without depending of a stylesheet?

Of course, I could add them directly in the header.php file but I'd like to avoid this.

24

You just need to add the styles directly to the page head. The best way to do this is to use the 'wp_head' action hook, assuming you are using a theme that has the hook. Like so:

add_action('wp_head', 'my_custom_styles', 100);

function my_custom_styles()
{
 echo "<style>*{color: red}</style>";
}

Check out the WP codex to learn more about action hooks.

  • No problem! Glad I could help. – SkyShab Nov 19 '14 at 20:28
  • If (like me) you want to add custom inline CSS to dashboard pages, you can use the admin_head action. – That Brazilian Guy Jan 29 '18 at 14:05
16

You could simply use a "dummy" handle:

wp_register_style( 'dummy-handle', false );
wp_enqueue_style( 'dummy-handle' );

wp_add_inline_style( 'dummy-handle', '* { color: red; }' );
  • I really like this solution because my style has a handle and is enqueued as if it's included from a .css file. – dev_masta Nov 7 '18 at 11:33
  • Using false as the source of wp_register_style also isn't allowed per the documentation codex.wordpress.org/Function_Reference/… – 16patsle Feb 13 '19 at 12:56
3

Your theme most certainly has a default stylesheet (otherwise it wouldn't it even be loaded as a theme). Just use this very stylesheet as the handler for your inline CSS. An example can be found in the functions.php of the theme TwentyFifteen (code skipped for brevity):

function twentyfifteen_scripts() {
    wp_enqueue_style( 'twentyfifteen-style', get_stylesheet_uri() );

}
function twentyfifteen_post_nav_background() {
    wp_add_inline_style( 'twentyfifteen-style', $css );
}
  • 1
    The OP specifically asked for a method other than using wp_add_inline_style(). Both methods work, and I haven't found any compelling reason to go with wp_add_inline_style(). If you know of a reason, I would like know about it. – SkyShab Jan 30 '18 at 15:24
  • Your solution works, but it's still "hacky" according to something I heard from someone of the WP team once (if I'm not mistaken); not exactly my opinion. I think that the OP was thinking there was no way to do this without loading the style sheet twice or using a ghost hook. Anyway, if they're not authoring a plugin, there's always a theme's style sheet to go along. I'm also editing my answer as your solution is documented in the Codex. :) – Casper Jan 30 '18 at 19:37
  • I played around with wp_add_inline_style(), and this is what I found. The benefit of attaching the styles to a stylesheet is that if it gets dequeued, the styles won't be printed out. But either method prints them inline in the head. So say you are a plugin developer, and your styles are printed out in the head. This has nothing to do with the theme styles, and so if a child theme dequeued the main theme styles to use it's own, now your plugin styles are not being output. So, the OP may have specified that part of the request for this reason. – SkyShab Jan 31 '18 at 20:47

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.