How to add inline css/js inside a shortcode

by

I’m working on creating a shortcode which is meant to change the css and js dynamically for that shortcode based on the situation. Now the problem is that I not getting a clue about how to use add_action() inside a add_shortcode(). Let me give you an example snippet code so that you guys can better understand me:

add_shortcode('example', function( $atts ) {
    //extracting the shortcode attributes
    extract( shortcode_atts( array(
        'value1' => null,
        'value2' => null, 
        'value3' => null
    ), $atts ) );

    //Now here I wll do my code for the shortcode
    // But the shortcode needs some js and css to work
    // so, I'm trying like this

    //For the CSS
    add_action('wp_head', function() {
        echo '<style type="text/css">
            .class {
                background-color: '. $value2 .';
            }
        </style>';
    });

    //For the JS
    add_action('wp_footer', function() {
        echo '<script type="text/javascript">
            var a=". $value3 ."
        </script>';
    });

});

Now obviously it is not working, so I was hoping if any of you can guide me how to the similar thing in the proper way.

If you can, please help instead of negative voting the question.

2 Answers
2

Nope, that won’t work. By the time WordPress starts evaluating the shortcode in your content, the head of the site has already been assembled, so you can no longer add an action to it.

Looking at the execution order of hooks gives you a clue how to do this.

First, you must avoid echoing scripts. Rather, wp_enqueue_script (which is the same as wp_enqueue_style) is the method to use if you want to avoid conflicts between scripts. Since the scripts go in the head, you want your action to be declared before wp_head is called. Given that you need to extract information from a post, you must hook in after WP knows which post is on this page. That hook is wp. Here you must pre-evaluate the post content to extract the relevant shortcode using regex. Roughly your function will look like:

add_action ('wp', 'add_shortcode_script');

function add_shortcode_script () {
  global $post;
  ... use regex to scan $post->$post_content for your shortcode
  ... and extract $value2 and $value3
  wp_enqueue_script (...vars based on $value2...);
  wp_enqueue_style (...vars based on $value3...);
}

Above is what you need if the shortcode indicates the addition of a css/js file. In your example you only add a snippet, which supposedly alters the behaviour of a main css/js file. This means you should use wp_add_inline_script and wp_add_inline_style. The latter part of the code then becomes:

  wp_enqueue_script ('my_script','http:/.../main.js');
  wp_enqueue_style ('my_style','http:/.../main.css');
  wp_add_inline_script ('my_script', $string_based_on_value2);
  wp_add_inline_style ('my_style', $string_based_on_value3);

Leave a Comment