0

I really read a lot of articles relating adding dynamic inline stylesheet. but this one drives me crazy. i have a simple dev setup. this is my global style:

function bootstrap_scripts_styles() {
    wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri().'/style.css', array(), '2016-07-18' );
}
add_action( 'wp_enqueue_scripts', 'bootstrap_scripts_styles' );

because i need to trigger custom styles from single.php, i added some sample code here:

$custom_css = ".intro { background: red; }";
wp_add_inline_style( 'custom-style', $custom_css );

using this, nothing happens. i don't see any inline style in frontend code. But when i debug WP_Styles() and look for "custom-style" i can see, the style is being appended:

[custom-style] => _WP_Dependency Object
                (
                    [handle] => custom-style
                    [src] => http://localhost/westerland/wp-content/themes/westerland/style.css
                    [deps] => Array
                        (
                        )

                    [ver] => 2013-07-18
                    [args] => all
                    [extra] => Array
                        (
                            [after] => Array
                                (
                                    [0] => .intro { background: red; }
                                )

                        )

                )

so i wonder why it does not get printed?! i found a way to print it, but then, it gets printed in <body> instead right behind the <link> tag of global style:

$custom_css = ".intro { background: red; }";
wp_add_inline_style( 'custom-style', $custom_css );
WP_Styles()->print_inline_style("custom-style");

so this feels a little bit "hacky" because i want this as clean as possible to appear in the <head> tag. is this some kind of bug? i am using latest WP.

2
  • Where do you call wp_add_inline_style;
    – Laxmana
    Mar 3 '17 at 12:04
  • as i wrote in single.php :)
    – nicmare
    Mar 3 '17 at 18:16
1

Check if the following works for you. Just adapt the is_single() to is_singular('custom-post-type') if you want this on a single custom post type template specifically. Hope this helps.

function bootstrap_scripts_styles() {
  wp_enqueue_style('custom-style',get_template_directory_uri() . '/bootstrap.css');
  $custom_css = ".intro { background: red; }";
  wp_add_inline_style( 'custom-style', $custom_css );
}


function enqueue_inline_style( $query ) {
    if ( $query->is_single()) {
        add_action( 'wp_enqueue_scripts', 'bootstrap_scripts_styles' );
    }
}

add_action( 'pre_get_posts', 'enqueue_inline_style' );

edit: obviously just enqueue the main stylesheet separately.

1

Thanks Svartbaart. Your answer lead me to the right direction. So the main problem with my approach was that i ran it in the single.php where it won't execute the print of the inline style. so what i did is to insert it in functions.php in its own function which gets triggered by wp_enqueue_scripts hook. the final code is this:

function inline_style() {
    global $post;
    if(is_single()) {
            $custom_css = ".intro { background:red }";
            wp_add_inline_style('custom-style', $custom_css);
    }
}
add_action( 'wp_enqueue_scripts', 'inline_style' );
1
  • Or in wp_head :)
    – Laxmana
    Mar 4 '17 at 11:00

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.