csswordpresscustom-post-type

Wordpress - how to override Divi's custom post type stylesheet


When enqueueing a Wordpress child theme stylesheet the correct way the new styles override the parent's styles.

However, since Divi introduced Builder support for custom post types, a new stylesheet style-cpt.css has been added.

All the styles in this stylesheet (a lot of which unfortunately have !important after them) are declared after enqueued child styles, so will override any matching ones.

Is there any way of overriding such "custom" stylesheets?


Solution

  • After some experimentation, I found that the following code in functions.php works... (please note, this will enqueue both the standard theme stylesheet as well as Divi's custom post child theme). You can include all the styles you want to override in your own style-cpt.css file in your child theme folder.

    function my_theme_enqueue_styles() {
    
        $parent_style = 'divi-style';
        $template_directory = get_template_directory_uri();
        $stylesheet_directory = get_stylesheet_directory_uri();
    
        wp_enqueue_style( $parent_style, $template_directory . '/style.css' );
        wp_enqueue_style( 'child-style',
            $stylesheet_directory . '/style.css',
            array( $parent_style ),
            wp_get_theme()->get('Version')
        );
    
        $parent_style = 'divi-cpt-style'; 
    
        wp_enqueue_style( $parent_style, $template_directory . '/style-cpt.css' );
        wp_enqueue_style( 'child-cpt-style',
            $stylesheet_directory . '/style-cpt.css',
            array( $parent_style ),
            wp_get_theme()->get('Version')
        );
    }
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );