4

I just created a child theme but every change I make in the style.css does not overwrite the parent style.css - other files work. I just did it like that:

  1. Making new Childtheme Folder in the Theme Directory
  2. Copy original style.css to it.
  3. Add to its header "Template: orion"
  4. Selected and activated my childtheme in the Wordpress Theme Option.

And now when I change stuff in the child style.css .... the page looks after the change still the same. Why?

4 Answers 4

13

It should be noted that the child stylesheet loads after the parent theme's styles, so this should not be a problem. I think what is happening here is that you are trying to change styles that is not in the the parent stylesheet, but in other custom stylesheets. If that is the case, then your changes won't work as most probably your child theme's stylesheet is loading before the custom stylesheets in the parent theme.

It should also be noted that @import should not be used to import the parent stylesheet. The correct way is to enqueue it using wp_enqueue_style() hooked to wp_enqueue_scripts

Here is how you properly enqueue and add the parent stylesheet to the childtheme.

add_action( 'wp_enqueue_scripts', 'enqueue_parent_theme_style' );
function enqueue_parent_theme_style() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

From the codex, this is the correct way how your stylesheet should look like

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/


/* =Theme customization starts here
-------------------------------------------------------------- */

NOTE

I have updated the codex with this information in this post

EDIT

From a comment below

If the parent theme does not use wp_enqueue_style() then how can one enque parent theme's style.css WITHOUT messing with the parent theme's templates? This point is not clear int Codex you updated. Can you please clarify with an example.

I want to first start of with this, if you are a theme author, please, NEVER add stylesheets or scripts through <link> tags in your theme's header. This is the incorrect way of doing it. Properly enqueue and register these styles and scripts through the wp_enqueue_scripts hook as described in the Codex

To be honest, I never realized that there are still some theme authors doing this. I think the best probable way to solve this problem is to copy the parent header.php to your child theme and manually removing (deleting) the styles and scripts from the header.

You can then proceed to enqueue and register them as per normal using wp_enqueue_scripts as in the example above. Just remember, make use of get_templatedirectory_uri()` to enqueueu and register scripts and styles from the parent theme, and remember, the order in which you load styles and scripts are important here. If a script/style is dependent on another one, load it after that specific script/style

8
  • 2
    Good idea to update the Codex page ;-)
    – birgire
    Oct 11, 2014 at 11:57
  • Thanks, I totally agree. I hope this will help others in future to do things a bit better :-) Oct 11, 2014 at 12:00
  • if the parent theme does not use wp_enqueue_style() then how can one enque the parent style.css WITHOUT messing with the parent theme's templates?
    – Tara
    Nov 6, 2014 at 21:09
  • if the parent theme does not use wp_enqueue_style() then how can one enque the parent style.css Without messing with the parent theme's templates. As you know, not to mess with the parent theme's templates is the purpose of creating a child theme.
    – Tara
    Nov 6, 2014 at 21:12
  • @Pieter Goosen: If the parent theme does not use wp_enqueue_style() then how can one enque parent theme's style.css WITHOUT messing with the parent theme's templates? This point is not clear int Codex you updated. Can you please clarify with an example. Thanks.
    – Tara
    Nov 6, 2014 at 21:16
0

I found this thread while reading the Child Theme chapter in WordPress Codex.

I built a child theme based on Simone (which is, in turn, based on _s underscores) and created a functions.php file with the recommended code:

<?php

add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array('parent-style')  );
}

However, using this method created a problem in my child theme. I reported the issue in GitHub: link. The solution was to remove the PHP_INIT_MAX constant from the add_action() piece.

I wonder if this is a Simone-related issue or if this affects other themes as well (in which case could possibly be a problem in the function)...

Thank you!

1
  • You should have asked this as a question. Unfortunately this is the first time that I saw this post from you. This issue was raised yesterday, and it is resolved now. Please see this post Nov 7, 2014 at 4:15
0

Make sure your parent theme does not use wp_enqueue_style() in its functions.php file.

If it does, you can also queue the child stylesheet from its functions.php

add_action( 'wp_enqueue_scripts', 'load_my_child_styles', 20 );
function load_my_child_styles() {
    wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/style.css', array('twentyfourteen-style'), '1.0.0' );
}

Here's an example of how the header should look in your child themes style.css file

/*
 Theme Name:   Twenty Fourteen Child
 Theme URI:    http://example.com/twenty-fourteen-child/
 Description:  Twenty Fourteen Child Theme
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfourteen
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twenty-fourteen-child
*/

http://codex.wordpress.org/Child_Themes

2
0

I had the same problem, I resolved it modifying the child theme folder and the files inside permissions to 775. It may not be the safest way but it worked. Let me know if this works for you :)

1
  • Yikes. I can’t imagine the level of desperation that might have driven you to this. This is so dangerous. I’d be looking for some other solution, or some other theme.
    – Tedinoz
    Sep 13, 2018 at 0:25

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.