Question posted in
The full documentation can be found here.

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

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 ?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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.


  2. 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).

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search