32

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.

3 Answers 3

39

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.

5
  • No problem! Glad I could help.
    – SkyShab
    Nov 19, 2014 at 20:28
  • If (like me) you want to add custom inline CSS to dashboard pages, you can use the admin_head action. Jan 29, 2018 at 14:05
  • @SkyShabwhy is there an asterisk after style> Aug 10, 2020 at 18:13
  • @MichaelRogers it's just example CSS styles. The "*" is a "universal selector". This would give all elements the color red.
    – SkyShab
    Aug 21, 2020 at 16:34
  • oh, haha thanks Aug 22, 2020 at 1:54
35

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; }' );
5
  • 3
    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, 2018 at 11:33
  • 1
    Using false as the source of wp_register_style also isn't allowed per the documentation codex.wordpress.org/Function_Reference/…
    – 16patsle
    Feb 13, 2019 at 12:56
  • @16patsle - I'm not sure if you are right. If you use false stylesheet is an alias of other stylesheets it depends on. That's all.
    – kanlukasz
    Oct 25, 2020 at 15:21
  • I assume the documentation was updated since I posted that comment, it does indeed seem to be allowed now. (I don't think passing false with no deps is explicitly allowed, but I guess it probably still works)
    – 16patsle
    Oct 26, 2020 at 16:51
  • 1
    As of today (Sept 2022) the documentation has been moved to developer.wordpress.org/reference/functions/wp_register_style and now explicitly condones this technique of setting the source to 'false' with the following explanation: "If source is set to false, stylesheet is an alias of other stylesheets it depends on."
    – ChrisM
    Sep 15, 2022 at 1:37
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 );
}
3
  • 2
    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, 2018 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, 2018 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, 2018 at 20:47

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.