Ideal inline dynamic CSS injection

Question

There is a code in here that dynamically load custom script.

<?php
function my_styles_method() {
    wp_enqueue_style(
        'custom-style',
        get_template_directory_uri() . '/css/custom_script.css'
    );
        $color = get_theme_mod( 'my-custom-color' ); //E.g. #FF0000
        $custom_css = "
                .mycolor{
                        background: {$color};
                }";
        wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );
?>

I actually need to load only dynamic CSS part ($custom_css) and I don't need to load custom_script.css. According to this document hook like wp_print_styles is discouraged. What would be the best way to load inline style in WordPress. Maybe I am missing something.

I have rejected wp_head also from the same reason as wp_print_styles.

Are you using the default style.css stylesheet from the theme? If that's the case you could attach your inline styles to it. If not, if you pass '/' to wp_enqueue_style as the second argument, the inline styles will be printed directly in the head. — Luis Sanz
– Luis Sanz, Commented May 2, 2016 at 21:49
Yes, wp_enqueue_style( 'slug', get_stylesheet_uri() ); is good solution since style.css is required in any theme. The inline styles will just follow. Would you like to add this answer @LuisSanz? — prosti
– prosti, Commented May 5, 2016 at 11:20

Luis Sanz · Accepted Answer · 2016-05-07 17:38:01Z

wp_add_inline_style needs to be tied to an existing stylesheet in order to work properly. The inline styles will only be printed when the stylesheet they are attached to is enqueued. This is quite handy to control the scope of the inline styles. If the idea is to have them printed globally, the safest handle to tie them to is that of the active theme main stylesheet.

The way to attach the inline scripts to a stylesheet is by passing that stylesheet handle as the first parameter to wp_add_inline_style. The stylesheet handles may change depending on the theme and also depending on the viewed page, so they have to be found out. An easy way to know the full list of stylesheets and their handles loaded for a given page is using the following code:

global $wp_styles;
echo '<pre>' . var_export( wp_list_pluck( $wp_styles->registered, 'src', 'handle' ), true ) . '</pre>';

Supposing the theme's main stylesheet handle is 'active-theme-style', then the call would be:

wp_add_inline_style( 'active-theme-style', $custom_css );

Some old or badly written themes might not load the css in a proper way. In that case, it's safer to enqueue a stylesheet. If that's not an option, this will work:

wp_enqueue_style( 'any-handle', '/' );
wp_add_inline_style( 'any-handle', $css );

It feels a bit hacky but the alternative, printing a style tag directly to wp_head, is not good either.

the wp_enqueue_style( 'any-handle', '/' ); would also yield the browser errors in my case so definitely not an option. — prosti
– prosti, Commented May 7, 2016 at 21:13
Does it? And if you pass true instead? The only check that it's done in wp_enqueue_style is a simple if ( $src ) {}. If it still throws an error I will edit the answer. — Luis Sanz
– Luis Sanz, Commented May 7, 2016 at 21:41

prosti · Accepted Answer · 2016-05-07 21:11:41Z

Only to append the solution from @luis-sanz, I will add the note that every theme has to have the style.css file enqueued. Following the example https://codex.wordpress.org/Function_Reference/wp_add_inline_style from the codex, we can use get_stylesheet_uri() function and append the dynamic CSS data using the wp_add_inline_style function in the following way.

<?php
function my_styles_method() {
    wp_enqueue_style( 'active-theme-style', get_stylesheet_uri() );

    $color = get_theme_mod( 'my-custom-color' ); //E.g. #FF0000
    $custom_css = ".mycolor{ background: {$color}; }";
    wp_add_inline_style( 'active-theme-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );
?>

Must admit the usage of the '/css/custom_script.css' custom script is absolutely not needed, and the dynamic script will go just after the default style inclusion of the <head> section.

Stack Exchange Network

Ideal inline dynamic CSS injection

2 Answers 2

Your Answer

Hot Network Questions

Ideal inline dynamic CSS injection

2 Answers 2

Your Answer

Sign up or log in

Post as a guest

Related

Hot Network Questions