Child theme help – parent styles.css still showing

  • Per the recommendation from WordPress that you use child themes so that you can update the parent theme without losing your changes, I am giving it a try. I’m now on my third site attempting to use a child, and all three times I had the same problem so now I have to assume it’s my user error.

    The problem I am having is that the parent theme’s stylesheet is still displaying, NOT the child stylesheet as it’s supposed to.

    Steps I take:

    1. install parent theme in the /themes/ folder. (in /parent/, let’s say)
    2. create new folder in /themes/ (let’s call it /child/).
    3. create file called style.css and drop it in the /themes/child/ folder.
    4. In my CSS file I include:
    ‘/*
    Theme Name: Child
    Theme URI: http: //example.com/
    Description: Child theme of Parent
    Template: parent
    Version: 0.1.0
    */’

    5. Upload contents of /themes/child/ to server. (parent theme already there and active).
    6. Activate Child theme in WP admin panel.

    upon activation, the site looks exactly as it did when the parent theme was installed. Which it should NOT, because I am NOT yet importing the parent style sheet in my child style.css file! That tells me that my child style sheet is not overriding the parent sheet as it should.

    (for what it’s worth, I also have tried it doing the import of the parent style sheet, then making an overriding change to a style – and the overriding change does NOT take.)

    I’m completely baffled. When I activate the child theme, it clearly states that the stylesheet being used is located in the /themes/child/ folder.

    It’s not a caching issue, either; I tried this on multiple browsers (that had not loaded the parent theme previously) and cleared cache.

    Baffled. Please, any help?

Viewing 6 replies - 1 through 6 (of 6 total)
  • Thread Starter the_webscaper

    (@the_webscaper)

    MORE INFO…

    What’s even stranger: I just went to my WordPress admin panel and under Appearance I went into the Editor, and the stylesheet it’s displaying there is my child stylesheet. Which, other than the required comments at the top, is blank. So when I view my child theme website, there should be no styles displaying, but my site is most definitely displaying the parent theme’s styles.

    So. Baffled.

    I’ve just tried this out on one of my dev installs and I can’t replicate it. The only styling that was inherited by my child theme was the body background image as set via add_custom_background() on the parent theme.

    Thread Starter the_webscaper

    (@the_webscaper)

    Thanks for replying! I have a feeling I know why this is happening. I work with a ton of different themes, from bare-bones themes to premium themes from places like ThemeForest. The three most recent jobs I’m working on, the ones where I tried to use the child theme, are all using premium themes. One of them is really bizarre – the link to the style sheets is actually links to .php files that dynamically create a style sheet (I’d never seen that done before). That was the first one that I tried, so I wasn’t surprised that didn’t work. The second one was a theme from themeforest, and the most recent one I tried was WhiteHousePro. Both themes have a lot of admin-panel configuration and many stylesheets that are referenced other than the main one, which would partially explain why I was still seeing styles.

    What doesn’t make sense to me is even if their style sheets are being seen, I would think that adding to MY child stylesheet should override a style called by the parent theme anyway. For example, I wanted to change the padding size in the header. Using Firebug I found the style ID, and just put the change in my child theme: no dice, it did nothing (and for what it’s worth, that style was even declared in the main style.css file of the parent!).

    Even so, I’m going to guess that it’s because these are very involved “premium” themes that weren’t found in the WordPress theme library. I bet that if I try using a WP library theme, I will have no problems.

    (I do wish that the authors of the premium themes would provide some guidance as to how to modify styles without risking future upgrades of the theme though, if using a child theme won’t work…)

    I truly appreciate the response, though, esmi!

    I have exactly the same problem. I’m using The Erudite theme, and I’ve created a Child Theme. I’ve triple checked everything and all seems to be correct with the setup, but the stylesheet of the child is loading (and viewable in editor, just like yours) but the stylesheet of the parent is displaying.

    I’m new to all this, but I think the problem stems from the fact that The Erudite’s stylesheet (in themes/the-erudite/style.css) has the line in it that reads

    “File here for WP identification purposes only. This CSS file is not loaded by the theme at all. See css directory for theme CSS”

    I see the stylesheet that is used, that’s stored in themes/the-erudite/css/erudite.css . How do I make a child theme that overrides this stylesheet, rather than the unused one?

    put a standard css import call at the top of your primary stylesheet, in this case at the top of erudite.css:

    @import url(“mychildtheme.css”);

    place your child theme in the erudite css folder or change the address of the url call to reflect the new location.

    The problem, most likely, is that the <link> tag for “style.css” in the document head is using get_template_directory_uri(), rather than get_stylesheet_directory_uri().

    If this is the case, then the Child Theme will never have its own stylesheet loaded, because get_template_directory_uri() returns the URL for the *template*, i.e. the Parent Theme.

    Thus, if this is the case, you’ll need to add “header.php” to your Child Theme, so that you can change this reference.

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘Child theme help – parent styles.css still showing’ is closed to new replies.