Let the child CSS file load last in the DIVI Theme Wordpress

Question

With the following code I integrate the CSS file from the Divi child theme.

add_action( 'wp_enqueue_scripts', 'divi_engine_dynamic_child_theme', 20 );
function divi_engine_dynamic_child_theme() {
    wp_enqueue_style( 'parent-theme', get_template_directory_uri() . '/style.css', array(), et_get_theme_version() );
    wp_dequeue_style( 'divi-style' );
    wp_enqueue_style( 'child-theme', get_stylesheet_uri(), array(), filemtime( get_stylesheet_directory() . '/style.css' ) );
 }

Below that a dynamic CSS file is loaded from the theme: cached-inline-styles.

<link rel='stylesheet' id='et-core-unified-tb-63-tb-46-48-cached-inline-styles-css'  href='https://domain.de/wp-content/et-cache/48/et-core-unified-tb-63-tb-46-48.min.css?ver=1630180326' type='text/css' media='all' />

The CSS file is generated in line 454 in Divi>core>components>PageResource.php.

/**
 * Enqueues static file for provided style resource.
 *
 * @param ET_Core_PageResource $resource
 */
protected static function _enqueue_style( $resource ) {
    if ( 'footer' === self::$current_output_location ) {
        return;
    }

    // Bust PHP's stats cache for the resource file to ensure we get the latest timestamp.
    clearstatcache( true, $resource->path );

    $can_enqueue = 0 === did_action( 'wp_print_scripts' );
    // reason: We do this on purpose when a style can't be enqueued.
    // phpcs:disable WordPress.WP.EnqueuedResources.NonEnqueuedStylesheet
    $template = '<link rel="stylesheet" id="%1$s" href="%2$s" />';
    // phpcs:enable
    $timestamp = filemtime( $resource->path );

    if ( $can_enqueue ) {
        wp_enqueue_style( $resource->slug, set_url_scheme( $resource->url ), array(), $timestamp );
    } else {
        // reason: this whole file needs to be converted.
        // phpcs:disable ET.Sniffs.ValidVariableName.UsedPropertyNotSnakeCase
        $timestamp = $timestamp ?: ET_CORE_VERSION;
        $slug      = esc_attr( $resource->slug );
        $scheme    = esc_url( set_url_scheme( $resource->url . "?ver={$timestamp}" ) );
        $tag       = sprintf( $template, $slug, $scheme );
        $onload    = et_core_esc_previously( self::$_onload );
        // phpcs:enable

        $tag = apply_filters( 'et_core_page_resource_tag', $tag, $slug, $scheme, $onload );

        print( et_core_esc_previously( $tag ) );
    }

    $resource->enqueued = true;
}

Anyone have any idea how I can load the child theme CSS file as the last css file ?

score 2 · Accepted Answer · answered Aug 31 '21 at 11:31

With the hook wp_footer I could load the custom CSS later!

add_action( 'wp_enqueue_scripts', 'custom_styles', 105 ); // 102 is the latest used number from parent theme
function custom_styles() {
    //wp_enqueue_style( 'parent-theme', get_template_directory_uri() . '/style.css', array(), et_get_theme_version() );
    wp_dequeue_style( 'divi-style' );
    wp_deregister_style( 'divi-style' );
    //wp_enqueue_style( 'child-theme', get_stylesheet_uri(), array(), filemtime( get_stylesheet_directory() . '/style.css' ) );
}

// add Child Theme CSS as last
add_action('wp_footer', 'custom_styles_footer'); 
function custom_styles_footer() { 
    wp_enqueue_style( 'child-theme', get_stylesheet_uri(), array(), filemtime( get_stylesheet_directory() . '/style.css' ) );
}

Credits to Andrei from Elegant Themes for the tip with the hook.

Can someone please tell me why this is even needs a 'workaround'? Why is there a weird workaround for something that seems so obvious? I mean, the reason you create a child theme is to 'override' the parent theme, most likely the CSS... I'm still trying to get it to work as I'd like and constantly find myself battling against the theme... Just my gripe. It would be recommended for Divi team to consider this and possibly provide a formal workaround with instructions or just make it work when using a child theme with CSS. The link below seems to overlap, be it slightly different re: caching. — JI-Web, Jul 12 '23 at 07:03

score 0 · Answer 2 · answered Aug 30 '21 at 04:05

0

If its not in production you can try to disable Static CSS File Generation, in Divi Theme Options > Builder > Advanced.

It seams update caused this to stop working.

There is an update to this snipped here: https://diviengine.com/set-divi-child-theme-dynamic-css/#comment-175924 (not working for me).

answered Aug 30 '21 at 04:05

Anderson Chagas

21
3

Thank you, I have already adjusted a few things, but the order has not changed so far. Adjusted my questions above. – Julian Aug 30 '21 at 19:38

Let the child CSS file load last in the DIVI Theme Wordpress

2 Answers2