1

This seems like a common problem but as I modify my child themes style.css the parent style.css rules override any changes I make.

One of the main solutions seems to be to correctly enqueuing your functions.php file. I have no experience in php but I have copy and pasted a number of versions of doing so with no luck. Here is my functions.php code in my child theme folder.

<?php
//
// Recommended way to include parent theme styles.
//  ( Please see https://codex.wordpress.org/Child_Themes#How_to_Create_a_Child_Theme )
//  

add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );

function theme_enqueue_styles() {

    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array('parent-style')
    );
}

//
// Your code goes below
//

My parent theme is Adios. Here is the PHP from the parent theme. It was in rs-actions-config.php. I didn't exclude any code because I'm not sure what is and isn't relevant.

Edit: Here is the relevant code:

/**
* @return null
* @param none
* loads all the js and css script to frontend
**/
if( !function_exists('adios_enqueue_scripts')) {

  function adios_enqueue_scripts() {

    if( ( is_admin() ) ) { return; }

    if ( is_singular() ) { wp_enqueue_script( 'comment-reply' ); }


    // enqueue script
    wp_enqueue_script( 'adios-scrollify',        get_template_directory_uri() .'/js/jquery.scrollify.min.js',array('jquery'), ADIOS_THEME_VERSION,true);
    wp_enqueue_script( 'adios-wow',              get_template_directory_uri() .'/js/wow.min.js',array('jquery'), ADIOS_THEME_VERSION,true);
    wp_enqueue_script( 'adios-count',            get_template_directory_uri() .'/js/jquery.countTo.js',array('jquery'), ADIOS_THEME_VERSION,true);
    wp_enqueue_script( 'adios-isotope',          get_template_directory_uri() .'/js/isotope.pkg.min.js',array('jquery'), ADIOS_THEME_VERSION,true);
    wp_enqueue_script( 'adios-img-loaded',       get_template_directory_uri() .'/js/jquery.imageloaded.js',array('jquery'), ADIOS_THEME_VERSION,true);
    wp_enqueue_script( 'adios-all',              get_template_directory_uri() .'/js/all.js',array('jquery'), ADIOS_THEME_VERSION,true);

    // register script
    wp_register_script( 'adios-gmapsensor', '     http://maps.google.com/maps/api/js?sensor =false',array('jquery'), ADIOS_THEME_VERSION,true);
    wp_register_script( 'adios-swiper',           get_template_directory_uri() .'/js/swiper.min.js',array('jquery'), ADIOS_THEME_VERSION,true);
    wp_register_script( 'adios-cd-google-map',    get_template_directory_uri() .'/js/map.js',array('adios-gmapsensor'), ADIOS_THEME_VERSION,true);
    wp_register_script( 'adios-youtube',          get_template_directory_uri() .'/js/jquery.youtubebackground.js',array('jquery'), ADIOS_THEME_VERSION,true);

    wp_localize_script('adios-cd-google-map', 'get',
      array(
        'ajaxurl' => esc_url(admin_url( 'admin-ajax.php' )),
        'siteurl' => get_template_directory_uri()
      )
    );

    wp_enqueue_style( 'adios-fonts',       adios_fonts_url(), null, ADIOS_THEME_VERSION );
    wp_enqueue_style( 'adios-bootstrap',   get_template_directory_uri(). '/css/bootstrap.min.css',null, ADIOS_THEME_VERSION);
    wp_enqueue_style( 'adios-main-style',  get_template_directory_uri(). '/css/style.css',null, ADIOS_THEME_VERSION);
    wp_enqueue_style( 'adios-fonttello',   get_template_directory_uri(). '/css/fontello.css',null, ADIOS_THEME_VERSION);
    wp_enqueue_style( 'adios-animate',     get_template_directory_uri(). '/css/animate.css',null, ADIOS_THEME_VERSION);

    // register
    wp_register_style('adios-swiper',      get_template_directory_uri(). '/css/idangerous.swiper.css',null, ADIOS_THEME_VERSION);


    // Custom CSS
    $css_code = adios_get_opt('css_editor');
    $style = '';
    $style .= ( !empty($css_code)) ? $css_code:'';
    wp_add_inline_style('main-style', $style);
  }
  add_action( 'wp_enqueue_scripts', 'adios_enqueue_scripts' );
}

I am locally hosting my site so I can't share a link to it.

I'm assuming there is a problem with this code but in all honesty I'm up for any other solutions someone may have. Been stuck on this problem for awhile. Cheers.

Improve this question
12
  • May be try to remove this array of your "array('parent-style')" and call your child theme's css without this array like in the same way, you called parent theme's css in which you haven't used any array.
    – Rishabh
    Nov 2, 2016 at 4:19
  • Thanks for the attempt but no luck there :/
    – Max Power
    Nov 2, 2016 at 4:56
  • Then try to call your child theme's style.css file like this "wp_enqueue_style( 'child-style', get_stylesheet_uri() );" instead of this "wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() .'/style.css', array('parent-style'));"
    – Rishabh
    Nov 2, 2016 at 5:02
  • @MaxPower, you are doing it correctly. I think the styles that are being overidden have greater specificity than that you have in child theme's style.css.
    – bravokeyl
    Nov 2, 2016 at 6:05
  • @bravokeyl Thanks I thought my functions.php was right. And not a bad idea but they have the same specificity. I pasted the parents css onto the childs then modified it from there.
    – Max Power
    Nov 3, 2016 at 10:20

1 Answer 1

Reset to default
1

After looking at your parent theme's source code related to enqueuing styles, the original code you posted looks close. You just need to use the handle from the parent theme, adios-main-style. Add wpse244754_child_theme_enqueue_styles() to your child theme's functions.php file:

add_action( 'wp_enqueue_scripts', 'wpse244754_child_theme_enqueue_styles' );
function wpse244754_child_theme_enqueue_styles() {

    // Enqueue the parent theme's stylesheet
    wp_enqueue_style( 'adios-main-style', get_template_directory_uri() . '/css/style.css');

    // Enqueue the child theme's stylesheet, specifying the parent theme's
    // styles as a dependency.
    wp_enqueue_style( 'child-style',
            get_stylesheet_directory_uri() . '/style.css',
            array( 'adios-main-style' ) // dependency
    );
}

The child theme's functions.php (and its includes) will be loaded before the parent theme's functions.php.

Looking at wpse244754_child_theme_enqueue_styles(), the parent theme's style.css will be loaded first. We've specified adios-main-style as a dependency for the child theme's styles, ensuring that the child theme's styles will load after the parent theme's styles.

When the parent theme tries to enqueue adios-main-style, it won't be loaded again, thanks to the way that wp_enqueue_style() works.

Another approach The parent theme's adios_enqueue_scripts() function is pluggable. So another alternative would be to copy that entire function to your child theme and customize it as needed, e.g.:

function adios_enqueue_scripts() {

    if( ( is_admin() ) ) { return; }

    if ( is_singular() ) { wp_enqueue_script( 'comment-reply' ); }


    // enqueue script
    wp_enqueue_script( 'adios-scrollify',        get_template_directory_uri() .'/js/jquery.scrollify.min.js',array('jquery'), ADIOS_THEME_VERSION,true);
    wp_enqueue_script( 'adios-wow',              get_template_directory_uri() .'/js/wow.min.js',array('jquery'), ADIOS_THEME_VERSION,true);
    wp_enqueue_script( 'adios-count',            get_template_directory_uri() .'/js/jquery.countTo.js',array('jquery'), ADIOS_THEME_VERSION,true);
    wp_enqueue_script( 'adios-isotope',          get_template_directory_uri() .'/js/isotope.pkg.min.js',array('jquery'), ADIOS_THEME_VERSION,true);
    wp_enqueue_script( 'adios-img-loaded',       get_template_directory_uri() .'/js/jquery.imageloaded.js',array('jquery'), ADIOS_THEME_VERSION,true);
    wp_enqueue_script( 'adios-all',              get_template_directory_uri() .'/js/all.js',array('jquery'), ADIOS_THEME_VERSION,true);

    // register script
    wp_register_script( 'adios-gmapsensor', '     http://maps.google.com/maps/api/js?sensor =false',array('jquery'), ADIOS_THEME_VERSION,true);
    wp_register_script( 'adios-swiper',           get_template_directory_uri() .'/js/swiper.min.js',array('jquery'), ADIOS_THEME_VERSION,true);
    wp_register_script( 'adios-cd-google-map',    get_template_directory_uri() .'/js/map.js',array('adios-gmapsensor'), ADIOS_THEME_VERSION,true);
    wp_register_script( 'adios-youtube',          get_template_directory_uri() .'/js/jquery.youtubebackground.js',array('jquery'), ADIOS_THEME_VERSION,true);

    wp_localize_script('adios-cd-google-map', 'get',
        array(
            'ajaxurl' => esc_url(admin_url( 'admin-ajax.php' )),
            'siteurl' => get_template_directory_uri()
        )
    );

    wp_enqueue_style( 'adios-fonts',       adios_fonts_url(), null, ADIOS_THEME_VERSION );
    wp_enqueue_style( 'adios-bootstrap',   get_template_directory_uri(). '/css/bootstrap.min.css',null, ADIOS_THEME_VERSION);
    wp_enqueue_style( 'adios-main-style',  get_template_directory_uri(). '/css/style.css',null, ADIOS_THEME_VERSION);

    // *** Child theme style added here ***
    wp_enqueue_style( 'adios-child-style',  get_stylesheet_directory_uri(). '/style.css', array( 'adios-main-style' ), ADIOS_THEME_VERSION);

    wp_enqueue_style( 'adios-fonttello',   get_template_directory_uri(). '/css/fontello.css',null, ADIOS_THEME_VERSION);
    wp_enqueue_style( 'adios-animate',     get_template_directory_uri(). '/css/animate.css',null, ADIOS_THEME_VERSION);

    // register
    wp_register_style('adios-swiper',      get_template_directory_uri(). '/css/idangerous.swiper.css',null, ADIOS_THEME_VERSION);


    // Custom CSS
    $css_code = adios_get_opt('css_editor');
    $style = '';
    $style .= ( !empty($css_code)) ? $css_code:'';
    wp_add_inline_style('main-style', $style);
}
add_action( 'wp_enqueue_scripts', 'adios_enqueue_scripts' );

This approach is overkill if you just want to add a stylesheet for your child theme, but it can be handy if you're doing extensive customization.

Improve this answer
4
  • Hey Dave thanks a ton for the detailed reply. At first attempt the parent css isn't being applied from the first solution. And the child css isn't being applied in the second solution. I'll have a play around and see if I can figure something out. If not I may email the creators of adios, purchasing this theme gave me access to their support (just found this out).
    – Max Power
    Nov 7, 2016 at 7:45
  • You got it! I think we're really close here. I updated the answer to use the correct paths based on how the parent theme is set up: Parent styles are in /parent-theme-dir/css/style.css Child styles should be in /child-theme-dir/style.css.
    – Dave Romsey
    Nov 7, 2016 at 7:49
  • 1
    Tried the edit and same problem. I'm too tired to play with it now, but I'll make sure to work on it first thing tomorrow. Thanks again for the help Davey, I'll let you know how I go!
    – Max Power
    Nov 7, 2016 at 11:46
  • Still no luck dude, I have no clue what the problem is. I also tried using different child-theme creator plugins with no luck. I think I'll just use my child-theme css for everything although I'll need to fix a number of discrepancies.
    – Max Power
    Nov 8, 2016 at 23:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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