I'm using this PHP code to modify default CSS inline via functions.php however its not working.

<?php
add_action( 'wp_enqueue_scripts', 'inline_bar_width' );

function inline_bar_width() {

    if ( is_category( 'ratings' ) ) {

        $theme_version = wp_get_theme()->get( 'Version' );

        $bar = bar_width();

        $css = '';

        $css .= sprintf(
            '.bar {width: %s%%;}',
            $bar
        );

        if ( $css ) {
            wp_add_inline_style( $theme_version, $css );
        }
    }
}

I have tried wrapping wp_enqueue_scripts in different hooks but it doesn't work.

I'm working via child theme using this to load parent styles

add_action( 'wp_enqueue_scripts', 'child_enqueue_parent_styles' );
function child_enqueue_parent_styles() {

       wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

Update : The value for the width is not changing using this code. It's supposed to control the width based on the PHP code. $bar returns a width. The problem has something to do with using wp_add_inline_style( 'twentytwenty', $css ); in a twenty twenty child theme or the way i'm using it on based on this code.

I'm using this PHP code to modify default CSS inline via functions.php however its not working.

<?php
add_action( 'wp_enqueue_scripts', 'inline_bar_width' );

function inline_bar_width() {

    if ( is_category( 'ratings' ) ) {

        $theme_version = wp_get_theme()->get( 'Version' );

        $bar = bar_width();

        $css = '';

        $css .= sprintf(
            '.bar {width: %s%%;}',
            $bar
        );

        if ( $css ) {
            wp_add_inline_style( $theme_version, $css );
        }
    }
}

I have tried wrapping wp_enqueue_scripts in different hooks but it doesn't work.

I'm working via child theme using this to load parent styles

add_action( 'wp_enqueue_scripts', 'child_enqueue_parent_styles' );
function child_enqueue_parent_styles() {

       wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

}

Update : The value for the width is not changing using this code. It's supposed to control the width based on the PHP code. $bar returns a width. The problem has something to do with using wp_add_inline_style( 'twentytwenty', $css ); in a twenty twenty child theme or the way i'm using it on based on this code.

• wp-enqueue-style

• Why would you add CSS footer? That’s just a recipe for causing layout shifts. – Jacob Peattie Commented Jan 25, 2022 at 15:45
• Looking thru the suggested solutions, some suggest trying to load inline styles in the footer. – Brad Dalton Commented Jan 25, 2022 at 15:50
• Solutions for what? – Jacob Peattie Commented Jan 25, 2022 at 16:18
• Maybe using $theme_version as the handle is wring! Maybe i should use the child theme or parent theme handle. – Brad Dalton Commented Jan 25, 2022 at 17:40
• Well that’s what the documentation says. You still haven’t said what problem you’re trying to solve. – Jacob Peattie Commented Jan 25, 2022 at 23:26

1 Answer 1

You need to add enqueue your child themes style sheet as well

add_action( 'wp_enqueue_scripts', 'inline_bar_width' );
function inline_bar_width() {

wp_enqueue_style( 'twentytwenty-style', get_stylesheet_directory_uri() . '/style.css' );

if ( is_category( 'ratings' ) ) {

    $bar = bar_width();

    $css = '';

    $css .= sprintf('.bar {width: %s%%;}', $bar );

    if ( $css ) {
        wp_add_inline_style( 'twentytwenty-style', $css );
    }
  }
}