Confusion About Child Themes

If you read the codex, there is this pertinent blurb:

Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. Instead, it is loaded in addition to the parent’s functions.php. (Specifically, it is loaded right before the parent’s file.)

So unlike the other PHP files, you do not want to make an exact copy of the theme’s functions.php. You start with an empty file and add the functions which you wish to override.

Hopefully, the function(s) that you are trying to override in the parent theme’s functions.php are “pluggable,” meaning there is code that is included that allows you to simply override the existing function by defining your own function with the same name in your child theme. For example, most, if not all, of the functions in the WordPress default themes (Twenty Ten, Eleven, Twelve, et) are pluggable, so you can override them in your child theme’s functions.php file by just writing a new function. Often, though, themes do not make their functions pluggable, so you have to override them in other ways. Here’s a guide to overriding functions in functions.php, in case your parent theme’s functions are not pluggable.

you should place just new code on the new functions.php file on that way you always keep the other theme.

Thank you both.

@crouchingbruin Thank you again and I assume as you said that this only applies to the functions.php file where you just add the functions edits into an empty functions.php file in the child theme directory.

I read the codex you provided and it seems I simply have to place the code “<?php // Opening PHP tag” at the top of the new functions.php file and that is it. Is that correct or do I need any additional code to start my functions.php file with?

I have also made some code edits to all the 5 following files too, plus the style.css and functions.php files. So in total I have 7 files that I edited.

Please note I am running a theme which uses the Easy Digital Downloads plugin, so some of the theme files listed below may not be so common. In fact, one of the php files is also in a sub-directory called edd_templates within the theme folder itself:

footer.php
header.php
searchform-downloads.php
single-download.php
shortcode-content-image.php

So I assume with all the above files I will need to make an exact copy into the child theme directory and then make my edits to them there.

I think I will also need to first create the edd_templates sub-directory in the child theme for the shortcode-content-image.php file that goes into the edd_templates sub-directory?

And if so, my same original question applies, if the theme author issues an update to the theme, and if he makes changes to any of the above files, then when I load the updated theme into my site any new code changes the author may have made to these files won’t be applied to the theme because my child theme files will override the new files anyway, correct?

Last question, with the style.css file, since I need to use the one that was created with the child theme header in the child theme directory, then I first need to copy all the code from the original style.css file into the style.css file within the child theme directory first and then make my edits to it?

Sorry for all the questions, but I think I am starting to get a better understanding. Thank you for your patience with my questions.

I read the codex you provided and it seems I simply have to place the code “<?php // Opening PHP tag” at the top of the new functions.php file and that is it. Is that correct or do I need any additional code to start my functions.php file with?

That is correct.

So I assume with all the above files I will need to make an exact copy into the child theme directory and then make my edits to them there.

Yes.

I think I will also need to first create the edd_templates sub-directory in the child theme for the shortcode-content-image.php file that goes into the edd_templates sub-directory?

Yes.

And if so, my same original question applies, if the theme author issues an update to the theme, and if he makes changes to any of the above files, then when I load the updated theme into my site any new code changes the author may have made to these files won’t be applied to the theme because my child theme files will override the new files anyway, correct?

That’s right. So that’s the only thing you have to worry about, if the theme author makes a critical change to one of the theme files and you don’t pick it up, it might adversely affect your site. I remember several months ago, the Twenty Thirteen theme had an update where the mobile menu button in the header was changed from like an h1 element to a button element and it screwed up the child themes of everyone who had made copies of the old header.php file because the new Javascript which came with the theme update was looking for the new element type.

Last question, with the style.css file, since I need to use the one that was created with the child theme header in the child theme directory, then I first need to copy all the code from the original style.css file into the style.css file within the child theme directory first and then make my edits to it?

No, you don’t want to copy over all of the original style.css contents. If you look at the top of the codex page, you’ll see that in your child theme’s function.php file, you want to add some code in your child theme’s function.php file to enqueue the parent theme’s style.css file. When you enqueue the parent theme’s stylesheet, it will be linked in before your child theme’s style.css file, so you only need to include any overriding CSS in your child theme’s style.css file.

Oh, perfect CrouchingBruin. Thank you so much for answering all of my questions. You are a savior! I think I got it all worked out now. At least in my head ??

I will create a copy of my site and create a test site from it to test it out before making the changes to my actual running site to avoid any downtime, etc in case something goes wrong.

The way I have been doing it until now without using a child theme is I make my code edits in a copy of the php file and then I rename the original corresponding php file as xxx-original.php for example and keep both of the files in the same folder on the site.

So I can just pull out the files I created with the edits, move them over to the child theme directory, then rename the original files in the main theme directory back to their correct names, and just create the functions.php file for the child theme and add in the needed changes to the style.css file that is already setup in the child theme directory.

Should be easy. At least in theory ??

Thanks again. I might be back if something goes wrong along the way.

I just want to add that in the end I decided not to use the Child Theme. The developer recently updated the theme I am using and I noticed that 2 of the files I had edited had some code changes made by the developer. So this would preclude me from using the child theme anyway.

So in the end I just made a list of all the code changes I had made in a MS Word file. Then I updated the theme and made them to the new version of the theme. It took all of 10 minutes to make the code changes to the new theme.

As long as I got that file with the changes noted I am good for the future. And I assume the developer isn’t going to update the theme that often. Maybe once every year or two and perhaps eventually wont support it anymore anyway. So I think I am good with it the way I am doing it. It was a nice idea though.

Hi Friends
i have created a child theme and its work propebly. i have a problem for overriding my css code in child theme.

I have problem to override all of my CSS changes by child theme. only css changes which I do not have in parents theme override(in child theme). And if I have css changes in both(Parents, child) the source of code becomes parent theme and my child theme does not run. as result some of my changes which I have in child theme do not apply Properly.

Hi, Sara. Can you please post a link to your site, and also post an example of a CSS rule from your child theme that is not overriding properly? Also, in the future, please start a new thread instead of attaching to an existing thread. Thanks.

hi Crouchingbruin
Thank you for your answer.
my website link is: https://www.meroeh.com/

for example:
.woocommerce-Price-amount.amount exists only in my child theme and override by my child theme. (i think it is true)

also .banner exists in both of them (child css and parent css) and override changes bychild theme. (i think it is true)

.main-titles .arrows which exists in both of them(child css and parent css) with a little changes in my child theme but it does not override by child theme and runs from parent css file. (i think it is false)

.navbar .open-panel which exists in both of them(child css and parent css) with a little changes in my child theme but it does not override by child theme and runs from parent css file. (i think it is false)

i am really helpless, thank you if you can do me a favor for help me.

If you do a view source of your page, this is the order in which the stylesheets are listed (I only included the significant ones):

<link rel='stylesheet' id='parent-style-css'  href='https://www.meroeh.com/wp-content/themes/webmarket/style.css?x36021' type='text/css' media='all' />
<link rel='stylesheet' id='parent-style-rtl-css'  href='https://www.meroeh.com/wp-content/themes/webmarket/rtl.css?x36021' type='text/css' media='all' />
<link rel='stylesheet' id='parent-style-main-css'  href='https://www.meroeh.com/wp-content/themes/webmarket/assets/stylesheets/main.css?x36021' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-css'  href='https://www.meroeh.com/wp-content/themes/webmarket-child/style.css?x36021' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-rtl-css'  href='https://www.meroeh.com/wp-content/themes/webmarket-child/rtl.css?x36021' type='text/css' media='all' />
<link rel='stylesheet' id='child-style-main-css'  href='https://www.meroeh.com/wp-content/themes/webmarket-child/assets/stylesheets/main.css?x36021' type='text/css' media='all' />
<link rel='stylesheet' id='main-css'  href='https://www.meroeh.com/wp-content/themes/webmarket/assets/stylesheets/main.css?x36021' type='text/css' media='all' />

Note that the parent theme’s main.css file comes after all of your child theme stylesheets.

So if you inspect your site using a web debugger like Firebug or Chrome Developer Tools, you’ll see that the rules which aren’t working in your child theme are located in main.css, and the reason they are not working is that the parent theme includes its own main.css after all of your child theme stylesheets. If you may remember, the way that CSS works is that if there are rules which have the same specificity in the selector, the rule which comes last will take precedence.

There’s a couple of things you can try. For one thing, you do not need to enqueue the parent theme’s main.css file in functions.php because the parent theme is already bringing it in. But when you enqueue your child theme’s main.css file, you want to make the dependency on the parent theme’s main.css file and not the parent’s style.css file. That is, in your functions.php file, you probably have a line that looks like this:

wp_enqueue_style( 'child-style-main',
    get_stylesheet_directory() . '/assets/stylesheets/main.css',
    array( $parent_style ),
    wp_get_theme()->get('Version')
);

Try changing the third parameter so it looks like this:

wp_enqueue_style( 'child-style-main',
    get_stylesheet_directory() . '/assets/stylesheets/main.css',
    array( $parent_style, 'main' ),
    wp_get_theme()->get('Version')
);

Hopefully, that will move your child theme’s main.css file after the parent theme’s main.css file.

If that doesn’t work, you can also make your rules more specific so they override the parent’s main.css file. For example, you can change this rule:

.main-titles .arrows { right: 1130px;}

to this:

.span12 .main-titles .arrows { right: 1130px;}

• This reply was modified 8 years, 1 month ago by CrouchingBruin.

<?php

first thank you veryyy much for spend times to answer my problem.
my functions.php code was the first time you check my website :

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {

wp_enqueue_style( ‘parent-style-main’, get_template_directory_uri() . ‘/assets/stylesheets/main.css’ );
wp_enqueue_style( ‘child-style-main’,
get_stylesheet_directory_uri() . ‘/assets/stylesheets/main.css’,
array(‘parent-style-main’)
);

wp_enqueue_style( ‘parent-style-bootstrap’, get_template_directory_uri() . ‘/assets/stylesheets/bootstrap.css’ );
wp_enqueue_style( ‘child-style-bootstrap’,
get_stylesheet_directory_uri() . ‘/assets/stylesheets/bootstrap.css’,
array(‘parent-style-bootstrap’)
);

wp_enqueue_style( ‘parent-style-rtl’, get_template_directory_uri() . ‘/rtl.css’ );

wp_enqueue_style( ‘child-style-rtl’,
get_stylesheet_directory_uri() . ‘/rtl.css’,
array(‘parent-style-rtl’)
);

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’)
);
}

after i read your recommendation i change it to this:
first time this:
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {

wp_enqueue_style( ‘child-style-main’,
get_stylesheet_directory_uri() . ‘/assets/stylesheets/main.css’,
array(‘parent-style-main’)
);

wp_enqueue_style( ‘child-style-bootstrap’,
get_stylesheet_directory_uri() . ‘/assets/stylesheets/bootstrap.css’,
array(‘parent-style-bootstrap’)
);

wp_enqueue_style( ‘child-style-rtl’,
get_stylesheet_directory_uri() . ‘/rtl.css’,
array(‘parent-style-rtl’)
);

wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array(‘parent-style’)
);

wp_enqueue_style( ‘parent-style-main’, get_template_directory_uri() . ‘/assets/stylesheets/main.css’ );
wp_enqueue_style( ‘parent-style-bootstrap’, get_template_directory_uri() . ‘/assets/stylesheets/bootstrap.css’ );
wp_enqueue_style( ‘parent-style-rtl’, get_template_directory_uri() . ‘/rtl.css’ );
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
}
which everything as like as previous.

and in second try:
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {

wp_enqueue_style( ‘child-style-main’,
get_stylesheet_directory_uri() . ‘/assets/stylesheets/main.css’,
array( $parent_style, ‘main’ ),
wp_get_theme()->get(‘Version’)
);
wp_enqueue_style( ‘child-style-bootstrap’,
get_stylesheet_directory_uri() . ‘/assets/stylesheets/bootstrap.css’,
array( $parent_style, ‘bootstrap’ ),
wp_get_theme()->get(‘Version’)
);
wp_enqueue_style( ‘child-style-rtl’,
get_stylesheet_directory_uri() . ‘/rtl.css’,
array( $parent_style, ‘rtl’ ),
wp_get_theme()->get(‘Version’)
);
wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array( $parent_style, ‘style’ ),
wp_get_theme()->get(‘Version’)
);

}
at this time none of my child theme changes does not override.

finally i used the first try (both child and parent enque in functions.php (child after parent)) and use your recommendation as: “.span12 .main-titles .arrows { right: 1130px;}”

and changes apply by child theme but i guess it has a wrong loop beetween child and parent theme in inspect element view.

I’m very grateful you if you check and correct my mistakes.

Thank you soooo much

Try changing this:

wp_enqueue_style( ‘child-style-main’,
get_stylesheet_directory_uri() . ‘/assets/stylesheets/main.css’,
array(‘parent-style-main’)
);

To this:

wp_enqueue_style( ‘child-style-main’,
get_stylesheet_directory_uri() . ‘/assets/stylesheets/main.css’,
array(‘main’)
);

• This reply was modified 8 years, 1 month ago by CrouchingBruin.

Thank you veryyyyyyyyyy much.my problem solved. got bless you.
finally my functins.php code is:

add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {
wp_enqueue_style( ‘child-style-main’,
get_stylesheet_directory_uri() . ‘/assets/stylesheets/main.css’,
array(‘main’)
);

wp_enqueue_style( ‘child-style-bootstrap’,
get_stylesheet_directory_uri() . ‘/assets/stylesheets/bootstrap.css’,
array(‘bootstrap’)
);

wp_enqueue_style( ‘child-style-rtl’,
get_stylesheet_directory_uri() . ‘/rtl.css’,
array(‘rtl’)
);

wp_enqueue_style( ‘child-style’,
get_stylesheet_directory_uri() . ‘/style.css’,
array(‘style’)
);
}

Your child and parent style.css files aren’t being loaded. I think you need to put in the original code for them:

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’)
);

By the way, I noticed that you are also using either a Custom CSS option from the theme or a custom CSS plugin. If you are doing so, then you don’t really need to create the child CSS files, because the custom CSS is coming after all of the parent theme’s CSS. That is, instead of adding your rules to your child theme’s main.css or rtl.css, you could have just added them to the custom CSS. It makes it a little easier to manage all of your overriding CSS rules if you keep them in one place, so you don’t have to try and maintain multiple files.

Hi Dear Crouchingbruin
Thank you for your attention.
i have changed the functions.php codes as like this:
add_action( ‘wp_enqueue_scripts’, ‘theme_enqueue_styles’ );
function theme_enqueue_styles() {

wp_enqueue_style( ‘child-style-main’,
get_stylesheet_directory_uri() . ‘/assets/stylesheets/main.css’,
array(‘main’)
);

wp_enqueue_style( ‘child-style-bootstrap’,
get_stylesheet_directory_uri() . ‘/assets/stylesheets/bootstrap.css’,
array(‘bootstrap’)
);

wp_enqueue_style( ‘child-style-rtl’,
get_stylesheet_directory_uri() . ‘/rtl.css’,
array(‘rtl’)
);

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’)
);

}
Can you explain that why use this code:
wp_enqueue_style( ‘parent-style’, get_template_directory_uri() . ‘/style.css’ );
despite in other css files you recommend that dont use parent theme.

Also i really surprised that you understand my style.css file doesnt load!
if it possible tell me how can you understand this.

This custom CSS plugin exist in my theme when i installed the parent template and i dont use it.

Thank you again for your help.