0

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.

7
  • Why would you add CSS footer? That’s just a recipe for causing layout shifts. Jan 25, 2022 at 15:45
  • Looking thru the suggested solutions, some suggest trying to load inline styles in the footer. Jan 25, 2022 at 15:50
  • Solutions for what? 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. 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. Jan 25, 2022 at 23:26

1 Answer 1

0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.