Child Theme style.css takes no effect

@threadi So this works out of the box?

function get_stylesheet_directory_uri() {
	$stylesheet         = str_replace( '%2F', '/', rawurlencode( get_stylesheet() ) );
	$theme_root_uri     = get_theme_root_uri( $stylesheet );
	$stylesheet_dir_uri = "$theme_root_uri/$stylesheet";

	/**
	 * Filters the stylesheet directory URI.
	 *
	 * @since 1.5.0
	 *
	 * @param string $stylesheet_dir_uri Stylesheet directory URI.
	 * @param string $stylesheet         Name of the activated theme's directory.
	 * @param string $theme_root_uri     Themes root URI.
	 */
	return apply_filters( 'stylesheet_directory_uri', $stylesheet_dir_uri, $stylesheet, $theme_root_uri );
}

And does it enque for editor?

Yes, the function should give you the correct URL to your child-theme. You just need to replace get_stylesheet_uri() in your code with get_stylesheet_directory_uri().

It already says: get_stylesheet_directory_uri()

First line. Does it bring stuff to the editor?

Script break my site….

So maybe stay with this and get it to work….

add_action( 'wp_enqueue_scripts', 'draupnir_9_enqueue_styles' );
add_action( 'enqueue_block_editor_assets', 'draupnir_9_enqueue_styles' );

function draupnir_9_enqueue_styles() {
	wp_enqueue_style( 
		'draupnir-9-style', 
		 get_stylesheet_uri() . '/style.css'
	);
}

Can path be relative and relative to what? To root or theme root? So since style is in theme root, the above link should be accurate? /style.css. Do I remove slash?

@threadi Chat GPT siger dette spiller??

add_action( 'wp_enqueue_scripts', 'draupnir_9_enqueue_styles' );
add_editor_style( 'editor-style.css' );  // Correct usage

function draupnir_9_enqueue_styles() {
    wp_enqueue_style(
        'draupnir-9-style', 
        get_stylesheet_uri()
    );

    wp_enqueue_style( 
        'twentytwentyfour-primary',
        get_parent_theme_file_uri( 'assets/css/primary.css' )
    );
}

• This reply was modified 2 weeks, 4 days ago by hebhansen.

@threadi So messing with this again!!!!

Inspired by chatGPT I have expanded the enque to more css files residing in assets/css/files.css. All of this works as supposed except the most central style.css of my theme………

 // Theme WordPress default does not enque parent style.css nor the child style.css, when creating a child,
 // We call/enque child css display effect on frontend and also inside block theme editor.
function draupnir_9_enqueue_styles() {
    // Enqueue the child theme's style.css
    wp_enqueue_style(
        'draupnir-9-style', 
        get_stylesheet_uri()
    );

    wp_enqueue_style( 
        'twentytwentyfour-primary',
         get_template_directory_uri() . '/assets/css/button-outline.css'
    );


        // Enqueue global.css for general styles
    wp_enqueue_style(
        'draupnir-9-global',
        get_stylesheet_directory_uri() . '/assets/css/global.css', // Correct path to global.css
        array(), // No dependencies
        null, // No version number
        'all' // Load for all media types
    );

        // Enqueue forms.css for general styles
        wp_enqueue_style(
            'draupnir-9-forms',
            get_stylesheet_directory_uri() . '/assets/css/forms.css', // Correct path to forms.css
            array(), // No dependencies
            null, // No version number
            'all' // Load for all media types
    );
    

    // Enqueue woo.css for WooCommerce styles (conditionally loaded if WooCommerce is active)
    if ( class_exists( 'WooCommerce' ) ) {
        wp_enqueue_style(
            'draupnir-9-woo',
            get_stylesheet_directory_uri() . '/assets/css/woo.css', // Path to woo.css
            array(), // No dependencies
            null, // No version number
            'all' // Load for all media types
        );
    }

    // Enqueue wcfm.css for WCFM styles (conditionally loaded if WCFM is active)
    if ( class_exists( 'WCFM' ) ) {
        wp_enqueue_style(
            'draupnir-9-wcfm',
            get_stylesheet_directory_uri() . '/assets/css/wcfm.css', // Path to wcfm.css
            array(), // No dependencies
            null, // No version number
            'all' // Load for all media types
        );
    }

    // Enqueue product-page.css on product pages (conditionally loaded on product pages only)
    if ( is_product() ) {
        wp_enqueue_style(
            'draupnir-9-product-page',
            get_stylesheet_directory_uri() . '/assets/css/product-page.css',
        );
    }
}

add_action( 'wp_enqueue_scripts', 'draupnir_9_enqueue_styles' );
add_action( 'enqueue_block_editor_assets', 'draupnir_9_enqueue_styles' );
//add_editor_style( 'editor-style.css' );

Everything tested but style.css does not enque and takes no effect. I am getting seriously annoyed with this. Also I do not see styling in editor.. I have upgraded to 6.7 and tested in 67 that all works but not style.css. Am I not supposed to style in style.css???

Testing with debug code reveals correct url to style.css

Debus:

    $child_style_uri = get_stylesheet_uri();
    // Debugging output: Check the URL of style.css
    echo '<!-- Child theme style URI: ' . $child_style_uri . ' -->';

Output in source:

<!-- Child theme style URI: https://my-cool-site.com/wp-content/themes/draupnir-9/style.css -->

I clear cache all the time

I added above url to my browser and I see this old css that got changed maybe 1 hour ago:

.has-red-background {
    color: var(--wp--preset--color--draupnir-red) !important;
  }

I checked in my code editor to see if file was actually updated. I also checked from c panel > file manager > style.css and it has latest edits….

.has-styling-style {
    color: var(--wp--preset--color--post-it-yellow) !important;
  }

So why this latency?

And now finally testing from Chrome Incognito where style.css shows correct?????? What is causing this delayed style applied, and how can I get around it. Obviously it’s impossible to style css if you do not the effect….