Child Themes

Hello,
Here is my site:
neurocranialintegration.chiropractor.com

When working with Elegant Themes, I recently learned it is necessary to create child themes because Elegant themes usually need changes made to style.css and other places to get the content to fit properly.

Previously, I had made the changes directly to the theme itself in wordpress, but upon updating the theme, of course these edits are lost. So I made child themes for them.

When editing the style.css in the child theme, most of the changes are added coding to the end of style.css.

However, some of the changes are within style.css, footer.php, header.php. These changes may include text size or color. In these such cases, I created new files for the footer and header in the child theme, copied the code, pasted into the new file, edited the code, and saved.

Is this the best way to make these changes in the child theme?

If the change is within style.css (ie. text size), how should I make the change? Should I copy the parent code, edit and paste into a new child style.css (same as header/footer.php)? What happens to this coding (below) in the child theme style.css? Where should the changes be made?

/*
Theme Name: YOUR THEME Child Theme
Version: 1.0
Description: A child theme for YOUR THEME.
Author:
Author URL: http://www.yourURL.com
Template:
*/
@import url(“../Chameleon/style.css”);

Thanks for your input!

  • Imperative Ideas
    • HummingBird

    The right way to do this would be through css specificity.

    http://coding.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

    As long as the original css target is more specific than the one further down, it will be displayed in spite of the later definition.

    If that's too much for your level of CSS expertise, you could also link a stylesheet in the footer.php file and achieve the same thing but that's not as clean.

  • Patrick
    • Support Monkey

    Hi @Sean

    A child-theme can consist of only a style.css file which must contain header info as follows:

    /*
    Theme Name: YOUR THEME Child Theme
    Version: 1.0
    Description: A child theme for YOUR THEME.
    Author:
    Author URL: http://www.yourURL.com
    Template: parent-theme-folder-name-here
    */
    @import url("../parent-theme-folder-name-here/style.css");

    @Imperative Ideas brought up an important point to consider:

    As the child-theme style.css is loaded after the parent, style declarations are further down the cascade and will take precedence over the parent as long as their specificity is equal to or higher than that found in the parent.

    Confused yet? Don't be, it's not really all that complicated. Here are some good resources to get a handle on CSS specificity:
    Simple: http://www.htmldog.com/guides/cssadvanced/specificity/
    Complete: http://www.w3.org/TR/CSS21/cascade.html

    Any other templates that you need to modify (header.php, footer.php, etc) can copied from the parent to the child. You must respect the exact folder structure though. For example, if a template you want to customize is in parent-theme/templates/this-one.php, it must reside in child-theme/templates/this-one.php.

    Another special file is functions.php which can contain custom functions you add to your theme. And, in the case of pluggable functions, can even override functions in the parent theme. For more on that, see
    http://codex.wordpress.org/Functions_File_Explained
    http://codex.wordpress.org/Child_Themes#Using_functions.php

    Hope this helps! And thanks for being a member :slight_smile:

  • Paul Barthmaier
    • Code Wrangler

    Hi Sean,

    I think you're on the right track. To follow up with what Patrick explained, for your homepage at:

    http://neurocranialintegration.chiropractor.com/

    You have a quote and explanatory paragraph below the slider whose style is declared on line 137 of the Chameleon theme's style.css, which looks like this:

    #category-name {
    text-align: center;
    width: 890px;
    margin: 0 auto;
    padding-top: 38px;
    background: url(images/top-category-bg.png) no-repeat;
    }

    If you were completely satisfied with everything in the Chameleon theme except the width of the quote, you would create a child theme that looked like:

    /*
    Theme Name: ChameleonChild
    Version: 1.0
    Description: Sean's child theme for Chameleon by Elegant Themes.
    Author: sean
    Author URL: http://www.yourURL.com
    Template: Chameleon
    */
    @import url(“../Chameleon/style.css”);

    #category-name {
    width: 600px;
    }

    Because of the child theme, the paragraph below the slide will now be only 600px wide. That's the only change. The rest of the css gets inherited from the parent because of the @import that you specified.

    Going to your themes folder, you would then see both Chameleon and ChameleonChild as options available to enable. Usually I keep the parent disabled and only enable the child theme.

    Notice too, that if you don't have the name of the parent theme folder specified as the Template, as Patrick mentioned, your child theme will be broken.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.