0

I'm using a child theme and I'm using a "styles.css" file to override things from the parent theme. My styles (there are many stylesheets) are enqueued like this:

function my_theme_enqueue_styles() {
    $parent_style = 'parent-style';
    wp_enqueue_style( $parent_style, get_stylesheet_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style ),
    wp_get_theme()->get('Version')
    );

    wp_enqueue_style('shopkeeper-top-bar', get_stylesheet_directory_uri() . '/css/header-topbar.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-headers', get_stylesheet_directory_uri() . '/css/headers.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-responsive', get_stylesheet_directory_uri() . '/css/responsive.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-custom', get_stylesheet_directory_uri() . '/css/custom_artiq.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-navigations', get_stylesheet_directory_uri() . '/css/navigations.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-animate', get_stylesheet_directory_uri() . '/css/animate.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-app', get_stylesheet_directory_uri() . '/css/app.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-defaults', get_stylesheet_directory_uri() . '/css/defaults.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-easyzoom', get_stylesheet_directory_uri() . '/css/easyzoom.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-header-centered-2menus', get_stylesheet_directory_uri() . '/css/header-centered-2menus.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-idangerous-swiper', get_stylesheet_directory_uri() . '/css/idangerous.swiper.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-nanoscroller', get_stylesheet_directory_uri() . '/css/nanoscroller.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-offcanvas', get_stylesheet_directory_uri() . '/css/offcanvas.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-owl-carousel', get_stylesheet_directory_uri() . '/css/owl.carousel.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-owl-theme', get_stylesheet_directory_uri() . '/css/owl.theme.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-responsive', get_stylesheet_directory_uri() . '/css/responsive.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-select2', get_stylesheet_directory_uri() . '/css/select2.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-woocommerce-overwrite', get_stylesheet_directory_uri() . '/css/woocommerce-overwrite.css', array(), '1.0', 'all' );
    wp_enqueue_style('shopkeeper-fontawesome', get_stylesheet_directory_uri() . '/inc/fonts/font-awesome/css/font-awesome.min.css', array(), '1.0', 'all' );

    wp_enqueue_style('shopkeeper-styles', get_stylesheet_directory_uri() . '/css/styles.css', array(), '1.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

But if I change something in "styles.css" in the child theme and then use the inspector in Chrome for example, I see that the styles coming from "index" (root/wordpress/:385) prevail. I have to use !important in the stylesheet to see any change. How can I solve this and what exactly is this index?

  • have you used the same CSS rule as in the parent file ? – mmm Jan 9 '18 at 11:35
  • Chrome css caching is notorius (use ctrl+f5 or a private tab), also could it be that that code you're trying to override is inline, or in a <style> block? If it's inline you have to use !important If it's not you could try using more descriptive selectors (adding a new selector could mean your css is prioritized). Finally try another browser, and see if you're wiser that way. – D. Dan Jan 9 '18 at 11:38
3
wp_enqueue_style( $parent_style, get_stylesheet_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( $parent_style ),
    wp_get_theme()->get('Version')
);

Look closer, specifically at the URLs you passed to enqueue style:

  • parent: get_stylesheet_directory_uri() . '/style.css'
  • child: get_stylesheet_directory_uri() . '/style.css'

They're identical, they're the same file, that's the problem. Your child themes stylesheet isn't overriding the parent, because the parent is never loaded, your code never tells WP to load it.

Some notes:

  • Use get_template_directory_uri to refer to the parent theme, and get_stylesheet_directory_uri for the child theme
  • indent, indent, indent, you've not indented your arguments, this is important
  • You declared the parent stylesheet as a dependency of the child, but you've already enqueued it, register the parent, then enqueue the child and it'll have the same impact
  • You're using the theme version as the version for the stylesheet, but it would be more efficient to use the file modification time else you'll have to flush browser cache during development
  • get_stylesheet_uri() returns the full path to the style.css so the .'/style.css' is unnecessary
  • The $parent_style variable is unnecessary

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.