CODEWITHSUNDEEP
wordpressdivi
Alf Fonti
Alf Fonti

Reputation: 61

Enqueueing a Different CSS File (/assets/css/index.css) in Divi Child Theme

I'm facing an issue with enqueueing a custom CSS file in the Divi Child theme. Unlike the traditional structure where a child theme's style.css is automatically enqueued, I'm using a different directory structure for my custom styles. My goal is to enqueue a CSS file located at /assets/css/index.css.

The problem is that the parent Divi theme automatically includes both the child theme's style.css and its own style.css, which doesn't fit my desired structure. I've been trying to enqueue my custom CSS file (index.css) located at /assets/css/index.css, but I can't seem to get it to work properly.

Here's what I've tried so far:

function enqueue_custom_styles() {
    wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/assets/css/index.css', array());
}
add_action( 'wp_enqueue_scripts', 'enqueue_custom_styles' );

The et_divi_enqueue_stylesheet() function in the functions.php in the parent theme is loading the style.css file in both parent and child theme. I suspect that Divi might have its own way of handling stylesheet enqueues, that's why I can't load my own stylesheet.

Has anyone encountered a similar issue or managed to enqueue a custom CSS file successfully in the Divi theme, specifically when it's not the standard style.css and is located in a different directory? Any insights or solutions would be greatly appreciated!

Upvotes: 0

Views: 274

Answers (1)

HTML CSS Hupp Technologies
HTML CSS Hupp Technologies

Reputation: 335

You can try these options:

  1. Set the order of parent and child style like this:
function enqueue_child_theme_styles() {
    // Define custom path to child theme's stylesheet
    $child_stylesheet_path = get_stylesheet_directory_uri() . '/assets/css/index.css';

    // Enqueue Child Theme Stylesheet from the custom path
    wp_enqueue_style( 'child-style', $child_stylesheet_path );

    // Enqueue Parent Theme Stylesheet after the child theme's stylesheet
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css', array(), false, 'all' );
}
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles' );
  1. If CSS is less then you can use Divi theme custom CSS Option.

Go to "Divi" > "Theme Options." and Look for the "Custom CSS" box

If this not work, you need to provide some more detail to debug issue.

Upvotes: -1

Related Questions