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>";
}