New to the community? Start here

Do I need to create a child theme? And if so, how do I do it?

I am working on several WordPress websites. I am told that I need to create child themes for them in order not to lose the edits I make when the themes are updated.

However, if I use Jetpack to edit the CSS, then I understand that I don’t need to create a child theme.

What if I edit the php or the html? Do I need to have a child theme set up so as not to lose the changes? If so, I need to be walked through it. Because I can create the folder, but I don’t know what to put in it.

I’ve read lots of instructions on this but always get lost after the child theme folder is set up.

Thanks for your help.

Tue, 16 Jul 2013 12:38:18
  • Alexander
    • DEV MAN’s Mascot

    Hi there @tcross2013,

    Setting up a child theme is certainly beneficial. Anytime a theme update is released, any changes you made to the theme files will be overwritten. Your CSS setup in Jetpack will be ok, but if you made php or html changes, you’ll need to start over with them.

    Setting up a child theme is really easy:

    1. Create a new folder in your themes folder

    2. Copy style.css from your desired parent theme to that folder

    3. Add this to the stylesheet header: “Template: parentfoldername” This requires the you use the exact folder name of the parent theme.

    Then you can edit any of the meta information. Here’s the example from the WordPress codex for a child theme of Twenty Twelve.

    /*
    
Theme Name:     Twenty Twelve Child
    
Theme URI:      http://example.com/
    
Description:    Child theme for the Twenty Twelve theme
    
Author:         Your name here
    
Author URI:     http://example.com/about/
    
Template:       twentytwelve
    
Version:        0.1.0
    
*/

    To understand how this works: Whenever a child theme is activated, it will look for any theme related files (templates, style.css, functions.php etc.) in your child theme folder. If it can’t find the file in the child theme, it will bubble up and look in the folder you designated for the parent theme.

    This way if you need to make a change to anything, you can make a copy of that file and place it in the child theme, then make any changes without affecting the original.

    Let me know if this clears things up, or if you need any other help here.

    Thanks for being a WPMU DEV member. Let us know if we can be of any further assistance.

    Best regards,

  • tcross2013
    • Design Lord, Child of Thor

    I think I’m getting confused at numbers 2 and 3 above. I created my child theme, but when I activate it, it doesn’t look right. It seems to have lost all the simple market formatting.

    I will leave the child theme activated for you to see, but I don’t want to leave it like that for long. It’s at http://www.bethlevinetherapy.com.

    Here’s what my child theme style.css file says:

    /*

    Theme Name: SimpleMarket Child

    Theme URI: http://www.bethlevinetherapy.com

    Description: Child theme for the SimpleMarket theme

    Author: Teri Cross

    Author URI:

    Template: simplemarket

    Version: 1.1.1.5

    */

  • tcross2013
    • Design Lord, Child of Thor

    I think I’m getting confused at numbers 2 and 3 above. I created my child theme, but when I activate it, it doesn’t look right. It seems to have lost all the simple market formatting.

    I will leave the child theme activated for you to see, but I don’t want to leave it like that for long. It’s at http://www.bethlevinetherapy.com.

    Here’s what my child theme style.css file says:

    /*

    Theme Name: SimpleMarket Child

    Theme URI: http://www.bethlevinetherapy.com

    Description: Child theme for the SimpleMarket theme

    Author: Teri Cross

    Author URI:

    Template: simplemarket

    Version: 1.1.1.5

    */

  • Alexander
    • DEV MAN’s Mascot

    @tcross2013,

    I’m sorry for missing this come back up. Thanks for getting back in touch. I’m sorry for not being more clear earlier. This actually replaces the stylesheet, so you would need a way to get the original styling from SimpleMarket.

    Some themes don’t use the style.css file for anything other than a header and include CSS somewhere else. It all depends on the theme really.

    With SimpleMarket, you could copy all the styles from the original style.css file of SimpleMarket.

    Or, you could import that stylesheet by adding this to the bottom of your child style.css file.

    @import url(“../simplemarket/style.css”:wink:;

    Best regards