3

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 doesnt 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 above example I used 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 dont 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.

2

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>";
}
  • Still not a solution which hooks to original css, but at least an alternative. – Toniq May 5 '17 at 7:53
  • @Toniq I've added an alternate solution where the inline styles use the original CSS as a dependency. Does that help? – Dave Romsey May 5 '17 at 8:45
  • is there a way to test the 'speed'? whether first solution maybe works faster then second, because I dont care, I am fine with both ones, I just dont understand why wp_add_inline_style requires wp_enqueue_style and wp_add_inline_style in the same function call, otherwise it doesnt work, which seems little but useless since then I can just enqueue all my css at that point. – Toniq May 5 '17 at 9:36
  • 1.) I don't think there would be any significant difference in the performance of either approach. 2.) wp_add_inline_style() requires that the stylesheet handle passed as the first parameter has not been printed yet. Since the shortcode is being handled much later (typically in the the_content filter) than the styles are printed (wp_print_scripts), the workaround from the article I referenced (and first solution I posted) are necessary. – Dave Romsey May 5 '17 at 20:27
0

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 priority is not working you can give more than 20
-2
         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 :)

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.