wp_add_inline_style in plugin not working

Question

I am trying to use wp_add_inline_style in plugin. I want to add some style when shortcode runs.

add_action('wp_enqueue_scripts', 'cod_enqueue_scripts');
add_shortcode('cod', 'cod_process_shortcode');

function cod_enqueue_scripts() {
    wp_enqueue_style('cod-style', plugins_url('css/style.css', __FILE__));
}

function cod_process_shortcode(){
    $inline_css = "
        .icon-color{
            color:#ad3;
        }";

    wp_add_inline_style('cod-style', $inline_css);
}

This doesn't work, It will not hook to 'cod-style'.

It works if I do this: (first enqueue CSS then call wp_add_inline_style immediately afterwards)

function cod_process_shortcode(){
    wp_enqueue_style('cod-custom', plugins_url('css/blank.css', __FILE__));
    $inline_css = "
        .icon-color{
            color:#ad3;
        }";

    wp_add_inline_style('cod-custom', $inline_css);
}

In the above example, I used an empty CSS file (blank.css) for testing.

I though maybe my original css file is not loaded yet, but even if I enqueue empty css in cod_enqueue_scripts, it will wont do it, like this:

function cod_enqueue_scripts() {
    wp_enqueue_style('cod-style', plugins_url('css/blank.css', __FILE__));
}

function cod_process_shortcode(){
    $inline_css = "
        .icon-color{
            color:#ad3;
        }";

    wp_add_inline_style('cod-style', $inline_css);
}

I don't know what inline CSS I need until shortcode runs, and seems odd that the wp_add_inline_style will not hook to original wp_enqueue_style.

Answer 1

Here's a solution based on this post, which allows the inline CSS to be rendered by a shortcode using a dependency without a path (basically a null file).

// Optional base styles
add_action( 'wp_enqueue_scripts', 'cod_enqueue_scripts' );
function cod_enqueue_scripts() {
    wp_enqueue_style('cod-style', plugins_url('css/style.css', __FILE__));
}

// Shortcode handler which also outputs inline styles.
add_shortcode( 'cod', 'cod_process_shortcode');
function cod_process_shortcode() {
    $color = '#ff0000';
    $css = 'body { background-color: ' . $color . '; }';

    wp_register_style( 'cod-inline-style', false );
    wp_enqueue_style( 'cod-inline-style' );
    wp_add_inline_style( 'cod-inline-style', $css );

    return "<p>Shortcode output...</p>";
}

Alternatively, Rarst pointed out that the WordPress gallery shortcode outputs dynamic styles. The gallery shortcode does not make use of wp_add_inline_style(), but the end result is essentially the same.

Edit: Here's an alternate version where the inline styles use the dependency of the original styles.

// Base styles
add_action( 'wp_enqueue_scripts', 'cod_enqueue_scripts' );
function cod_enqueue_scripts() {
    wp_enqueue_style('cod-style', plugins_url('css/style.css', __FILE__));
}

// Shortcode handler which also outputs inline styles.
add_shortcode( 'cod', 'cod_process_shortcode');
function cod_process_shortcode() {
    $color = '#bada55';
    $css = 'body { background-color: ' . $color . '; }';

    wp_register_style( 'cod-inline-style', false, array( 'cod-style' )  );
    wp_enqueue_style( 'cod-inline-style' );
    wp_add_inline_style( 'cod-inline-style', $css );

    return "<p>Shortcode output...</p>";
}

Answer 2

This code is worked for me..

// Optional base styles 
add_action( 'wp_enqueue_scripts', 'cod_enqueue_scripts' );
function cod_enqueue_scripts() {
    wp_enqueue_style('cod-style', plugins_url('css/style.css', __FILE__));
}

// Shortcode handler which also outputs inline styles.
add_shortcode( 'cod', 'cod_process_shortcode');
function cod_process_shortcode() {
    // your fornt end html
}

function custom_inline_style(){
    $color = '#ff0000';
    $css = 'body { background-color: ' . $color . '; }';

    wp_add_inline_style( 'cod-style', $css ); // hook to add inline style
}
add_action( 'wp_enqueue_scripts', 'custom_inline_style', 20 ); // if 20 

If the priority is not working you can give more than 20.

Answer 3

         wp_enqueue_style( 'ninetheme-custom-style', get_template_directory_uri() . '/css/update.css' );
         $css = '.package .btn_acele { background-color: #333; }';
         wp_add_inline_style( 'my-custom-style', $css );
      }

You can use it in WordPress Shortcode, no need add_action :)