WordPress.org

Forums

Do Child Themes Change the Parent or Are They Independent? (5 posts)

  1. hotwebideas
    Member
    Posted 2 years ago #

    I just added a child theme for the first time and I am confused. I was under the assumption that the CSS in the child theme makes it a totally independent theme, but one that takes on the CSS of the parent theme for any CSS that is overwritten.

    Instead, whenever I add new CSS to the child theme, it overwrites the CSS in the parent.

    Is this supposed to happen?

  2. esmi
    Forum Moderator
    Posted 2 years ago #

    Yes. The child imports the parent's CSS and then overwrites parts of it. Similarly, the parent's functions.php is loaded but any of the same functions in the child's copy take precedence.

  3. hotwebideas
    Member
    Posted 2 years ago #

    Thanks, esmi, but I only have a style.css in the child and not a functions.php.

    So, what you are saying is that if I change CSS in the child, the parent's CSS gets changed as well?

  4. Andrew
    Nuh uh moderator
    Posted 2 years ago #

    If you change CSS in your Child Theme style.css file, identical to the selectors, properties and values of a style in your Parent Theme style.css file, yes, your Child Theme style.css file will override your Parent Theme style.css file.

  5. Rev. Voodoo
    Volunteer Moderator
    Posted 2 years ago #

    Actually, style.css depends on how you use it.

    For instance, here my child theme style.css beginning

    /*
    Theme Name:     Voodoo Child 2012
    Theme URI:      http://www.rvoodoo.com/projects/wordpress/wordpress-tip-stop-editing-twentyten-theme-use-a-child-theme
    Description:    Child theme for the Twenty Twelve theme
    Author:         Rev. Voodoo
    Author URI:     http://www.rvoodoo.com
    Template:       twentytwelve
    Version:        0.1.0
    */
    @import url('../twentytwelve/style.css');

    SO in essence, only the child theme css loads. BUT, most of the time we use the @import line which calls to the parent themes css file

    If you didn't have that in there, only the style.css of the child would load, you would need to have ALL of the css rules in your child theme to look good

    But, we normally use the @import line for ease of customization. What that does is load the parent themes css first, and then you put in any customization you want in your child theme. The child theme css loads after the parent theme - so anything you put into the child theme overrules what is in the parent. That way we can modify the theme!

    functions.php is the only file that loads automatically for the parent and child

    You don't need one in your child theme, but if you have one, special care must be taken to use it properly.

    http://vudu.me/3jq
    Here's a tutorial I have about modifying 2012 theme. It has a few examples of modifying a theme using a child theme, specifically using style.css and functions.php
    http://vudu.me/child and here are some more tidbits

Topic Closed

This topic has been closed to new replies.

About this Topic