1

In the last month I have been creating my very first website. Before this I had no coding knowledge so everyhting I learnt was new to me.

My problem over the last week is that my child theme .css files (and php. file but that is a different matter) are not overriding their parent .css files. I have been trying to search for a solution all week but have had no success so far.

This is the code I put into the child functions.php file

=============================================================== (5) - This code allows the child-theme to be read last, but some other css (that must rely on something else?) causes some errors/

<?php
function my_theme_enqueue_styles() {

    $parent_style = 'adforest-original-modern'; // This is 'adforest-style' for the AdForest theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri().'/css/modern.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri().'/modern.css',
        array( $parent_style ),
        wp_get_theme()->get('1.0.0'));
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

function wp_67472455() { 
  wp_dequeue_style( 'adforest-theme-modern' );
  wp_deregister_style( 'adforest-theme-modern' );
} 
add_action( 'wp_print_styles', 'wp_67472455', 100 );
?>

==========================================================

(6) - THIS FOLLOWING CODE WORKS, CAN ANYONE SEE POTENTIAL ISSUES WITH THIS CODE?

<?php
function my_theme_enqueue_styles() {
  /* =================== modern.css ==========================*/
    $parent_style = 'adforest-original-modern'; // This is 'adforest-style' for the AdForest theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri().'/css/modern.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri().'/modern.css',
        array( $parent_style ),
        wp_get_theme()->get('1.0.0'));

   /* =================== default.css ==========================*/
    wp_enqueue_style( 'defualt-original-color', get_template_directory_uri().'/css/colors/defualt.css' );
    wp_enqueue_style( 'child-defualt-color',
        get_stylesheet_directory_uri().'/defualt.css',
        array( 'defualt-original-color' ),
        wp_get_theme()->get('1.0.0'));
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 100 );



function wp_67472455() { 
  /* =================== modern.css ==========================*/
  wp_dequeue_style( 'adforest-theme-modern' );
  wp_deregister_style( 'adforest-theme-modern' );

  /* =================== default.css ==========================*/
  wp_dequeue_style( 'defualt-color' );
  wp_deregister_style( 'defualt-color' );
} 
add_action( 'wp_print_styles', 'wp_67472455', 1 );
?>
Improve this question
5
  • to debug this you have 2 places to study. first place is the HTML source of a page, look there if there is a css file declaration missing. the second place is the page inspector of you browser to look the priority of the CSS rules. look theses places and edit your question to add the result of the debug.
    – mmm
    May 17, 2018 at 10:05
  • Thanks, im going to sound like an idiot, but using Inspect on Chrome, how can I find the priority line of code?
    – harrison
    May 17, 2018 at 10:14
  • I don't know how it's work in this browser. in Firefox, lines that are stop by another rule are struck.
    – mmm
    May 17, 2018 at 11:00
  • When you right click an element and select 'Inspect element' under the 'Styles' tab of the inspected element a the top are the rules that have the most priority. Below that the lines that have a strikethrough are rules that are being overridden by the rules on the top.
    – D. Dan
    May 17, 2018 at 11:03
  • Hi guys, I looked at the page source (view-source:parthunter.com.au), and yes on line 138 it seems to re-load the parent css (modern.css) for a 2nd time, after my child theme modern.css was loaded on line 123. How can I continue to solve this issue? Thanks
    – harrison
    May 17, 2018 at 11:58

3 Answers 3

Reset to default
0

Try running two seperate functions with an incremental priority.. 

function my_enqueue_style_one() {
wp_register_style( 'style1', get_template_directory_uri() . '/style1.css' );
wp_enqueue_style( 'style1' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_style_one', 10 );

function my_enqueue_style_two() {
wp_register_style( 'style2', get_stylesheet_directory_uri() . '/style2.css' );
wp_enqueue_style( 'style2' );
}
add_action( 'wp_enqueue_scripts', 'my_enqueue_style_two', 20 );

also try registering the stylesheets prior to enqueuing them for additional control... like conditionally testing to see if they re already enqueued.

if ( ! wp_style_is( 'style1', 'enqueued') ) { ... }
Improve this answer
0

You should add these lines to the my_theme_enqueue_styles function:

wp_dequeue_style( 'adforest-theme-modern' );
wp_deregister_style( 'adforest-theme-modern' );

as it's under this name that they-re added. And you have already enqueued the parent css, in a way that it gets loaded before your css.

Edit: Try:

function my_theme_enqueue_styles() {

    $parent_style = 'adforest-theme-modern'; // This is 'adforest-style' for the AdForest theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri().'/css/modern.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri().'/modern.css',
        array( $parent_style ),
        wp_get_theme()->get('1.0.0'));
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

function wp_67472455() { 
  wp_dequeue_style( 'adforest-theme-modern' );
  wp_deregister_style( 'adforest-theme-modern' );
} 
add_action( 'wp_print_styles', 'wp_67472455', 100 );
Improve this answer
7
  • Do I add those two lines after or before I wp_enqueue_style the child theme in the code I posted?
    – harrison
    May 17, 2018 at 12:18
  • It doesn't matter. If it doesnt't work you should try it on the wp_print_styles action: function wp_67472455() { wp_dequeue_style( 'jquery-ui-core' ); } add_action( 'wp_print_styles', 'wp_67472455', 100 );
    – D. Dan
    May 17, 2018 at 12:26
  • No luck adding those two extra lines, the view source remains the same. Sorry I dont understand your suggestion code
    – harrison
    May 17, 2018 at 12:40
  • I edited my answer.
    – D. Dan
    May 17, 2018 at 13:17
  • Hi @D. Dan, I used your above code. As a result it overrided all of the parent theme modern.css. So I changed ' $parent_style = 'adforest-theme-modern' ' to ' $parent_style = 'adforest-original-modern' '. (Refer to my edited post for code (5) I used. Although now using this code, there are some css errors where I believed they must have relied on something else
    – harrison
    May 18, 2018 at 11:36
0

(Big thanks to @D. Dan for putting me in the right direction!)

This worked perfectly for me. Even after a parent theme update my child .css files were still active and override the equivalent parent .css files.

This code is for multiple .css files

<?php
function my_theme_enqueue_styles() {
  /* =================== modern.css ==========================*/
    $parent_style = 'adforest-original-modern'; // This is 'adforest-style' for the AdForest theme.

    wp_enqueue_style( $parent_style, get_template_directory_uri().'/css/modern.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri().'/modern.css',
        array( $parent_style ),
        wp_get_theme()->get('1.0.0'));

   /* =================== default.css ==========================*/
    wp_enqueue_style( 'defualt-original-color', get_template_directory_uri().'/css/colors/defualt.css' );
    wp_enqueue_style( 'child-defualt-color',
        get_stylesheet_directory_uri().'/defualt.css',
        array( 'defualt-original-color' ),
        wp_get_theme()->get('1.0.0'));

  /* =================== smart_wizard_theme_arrows.css ==========================*/
        wp_enqueue_style( 'defualt_smart_wizard_theme_arrows',          get_template_directory_uri().'/css/colors/smart_wizard_theme_arrows.css' );
    wp_enqueue_style( 'child-defualt_smart_wizard_theme_arrows',
        get_stylesheet_directory_uri().'/smart_wizard_theme_arrows.css',
        array( 'defualt_smart_wizard_theme_arrows' ),
        wp_get_theme()->get('1.0.0'));    

  /* =================== forest-menu.css ==========================*/
    wp_enqueue_style( 'original-forest-menu', get_template_directory_uri().'/css/forest-menu.css' );
    wp_enqueue_style( 'child-forest-menu',
        get_stylesheet_directory_uri().'/forest-menu.css',
        array( 'original-forest-menu' ),
        wp_get_theme()->get('1.0.0'));  

  /* =================== responsive-media-modern.css ==========================*/
    wp_enqueue_style( 'responsive-original-modern', get_template_directory_uri().'responsive-media-modern.css' );
    wp_enqueue_style( 'child-responsive-modern',
        get_stylesheet_directory_uri().'/responsive-media-modern.css',
        array( 'responsive-original-modern' ),
        wp_get_theme()->get('1.0.0'));

}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 100 );



function wp_67472455() {
  /* =================== modern.css ==========================*/
  wp_dequeue_style( 'adforest-theme-modern' );
  wp_deregister_style( 'adforest-theme-modern' );

  /* =================== default.css ==========================*/
  wp_dequeue_style( 'defualt-color' );
  wp_deregister_style( 'defualt-color' );

  /* =================== smart_wizard_theme_arrows.css ==========================*/
  wp_dequeue_style( 'adforest-wizard-arrows' );
  wp_deregister_style( 'adforest-wizard-arrows' );   

  /* =================== forest-menu.css ==========================*/
  wp_dequeue_style( 'forest-menu' );
  wp_deregister_style( 'forest-menu' );  

  /* =================== responsive-media-modern.css ==========================*/
  wp_dequeue_style( 'responsive-media-modern' );
  wp_deregister_style( 'responsive-media-modern' );

} 
add_action( 'wp_print_styles', 'wp_67472455', 1 );
?>
Improve this answer

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.