I am trying to add css code into head tag. the css style is from shortcodes. title text from shortcode and title color / font size.. etc. This is an example.

<?php wp_head(); ?>
.................. (some style, js) .................. 
/* I want to put all of css styles into head tag from into body tags */


//shortcode css from user custom option

add_action( 'wp_head', 'iulia_example' );

function iulia_example() { 

echo '<style type="text/css">
   .sc_title {color:#fff; font-weight:600;}
  <!-- shortcode -->
  <div class="sc_wrap">
   <h1 class="sc_title">Hello This is the title</h1>

I want to use wp_head hook to place css style in head tag. however it's not working. Is there another way to add the css code in head? wp_head is not working in "body tag" and it gets the custom css variables from shortcode and it's in BODY.

Thank you,

2 Answers 2


It's not working because you're calling add_action after the actual action is fired. If you move the action declaration before wp_head() it will work:

     add_action( 'wp_head', function () { 
          echo '<style type="text/css">.sc_title {color:#fff; font-weight:600;}</style>';
     <?php wp_head(); ?>

There's no easy way to add some code to the head from the body tag as that code would be evaluated later. If you really need to do so you can play with output buffering (evaluate first the body template and buffer it) but I can't see why you should.

In reply to the latests comments:

If I've understood right what you want to achieve is to have some css being put in the head when a shortcode is add in the content, right? In that case you might add a check in the header for the content of the post. If it match a given shortcode then you output your styles. You can add something like the following to your functions.php, but it's kind of an hack:

add_action('wp_head', function () {
    global $post;
    if ($post) {
        $content = get_the_content();
        preg_match('/\[my_shortcode\]/', $content, $matches);
        if ($matches) {
            echo '<style>.some_style { font-weight:800; }</style>';
  • Yes Micc, you are right. it doesn't work, if I use the hook after wp_head(). as you may know shortcode options (title color, button colors) get in "body tag". because it gets from database which you setup. so I can't use add_action in head tags. anyway thank you for your answer. I wanted to make sure that.
    – pulla
    Commented Sep 22, 2015 at 4:19
  • I also wonder how other authors handle css styles. they put in body? if it's not too long, they can put in the elementary (ex. <div style='..........'>). but mostly not that short.
    – pulla
    Commented Sep 22, 2015 at 4:21
  • Micc, why I want to do is that.. as you may know, style code should be in head tag. W3C. some ppl care it so much and we wanted to work on it. I had a look at buffering link. but it's also hard to get style css to head. because, the shortcode setting options get in BODY tag and after wp_head.
    – pulla
    Commented Sep 22, 2015 at 4:28
  • I edited my reply, check if it fits your needs. Commented Sep 22, 2015 at 7:33

Create a new folder in your theme for CSS. Put your custom styling in a separate file and save it in css folder. Let's say you named your file custom.css

Here is how you add it . In Functions.php:

wp_enqueue_style( 'custom-css', get_template_directory_uri() . '/css/custom.css', null, null, 'all'); 


  • This won't work either if called after wp_head(). Commented Sep 21, 2015 at 8:20

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.