0

I have a plugin with shortcode. Shortcode returns some html in page. I will have some dynamically generated css that I want to place in the page as well. I tried using wp_add_inline_style (to hook to my main css file added with wp_enqueue_style) however I can still see FOUC in this case. I would like an alternative like this, to echo some dynamic style to head. This works fine (I get style with my css in the head), however, I also get this script tag shown in my shortcode output alongside my html that shortcode returns. How can I not have this script tag shown in my shortcode output?

Simplified example:

add_shortcode('foo', 'add_player');
function add_player($atts){

   $css = ".a{color:red;}";

   ?>
    <script>
        var css = "<?php echo ($css); ?>";
        var div = document.createElement('div');
        div.innerHTML = "<style>" + css + '</style>';
        document.getElementsByTagName('head')[0].appendChild(div.childNodes[0]);
    </script>
   <?php


   return "<div class='a'></div>";

}
1

I also get this script tag shown in my shortcode output alongside my html that shortcode returns. How can I not have this script tag shown in my shortcode output.

Never use echo statement in a shortcode. A shortcode should only return something to display on front-end. As per WordPress Codex :

Note that the function called by the shortcode should never produce output of any kind. Shortcode functions should return the text that is to be used to replace the shortcode. Producing the output directly will lead to unexpected results. This is similar to the way filter functions should behave, in that they should not produce expected side effects from the call, since you cannot control when and where they are called from.

So modify your code as:

add_shortcode('foo', 'add_player');

function add_player($atts){

   $css = ".a{color:red;}";

    $o = '<script>
        var css = "'.$css'.";
        var div = document.createElement("div");
        div.innerHTML = "<style>" + css + "</style>";
        document.getElementsByTagName("head")[0].appendChild(div.childNodes[0]);
    </script>';

   return $o."<div class='a'></div>";

}

Or alternatively, you can use ob_start() and ob_get_clean() as follows:

add_shortcode('foo', 'add_player');
function add_player($atts){

   $css = ".a{color:red;}";
   ob_start();
   ?>
    <script>
        var css = "<?php echo $css; ?>";
        var div = document.createElement('div');
        div.innerHTML = "<style>" + css + '</style>';
        document.getElementsByTagName('head')[0].appendChild(div.childNodes[0]);
    </script>
   <?php

   $o = ob_get_clean();
   return $o. "<div class='a'></div>";

}

Visit Wordpress Codex for more detail...
I hope this helps.

  • I have tested both, it still shows this script tag above my html in page source. How can I have it not add this script to page, only execute? – Toniq Feb 25 at 18:04
  • So it shows this css in my head and also in body above my html is <div class='a'></div> (there is says var css=".a{color:red;}") – Toniq Feb 25 at 18:10
  • Before its execution, the script must be present somewhere in the page or an external .js file. You can't execute a js (or any other) code without its existence. Your shortcode does the same: create js code in the page to add css to head. – Qaisar Feroz Feb 25 at 18:37

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.