WordPress.org

Ready to get started?Download WordPress

Forums

Building a child theme if I've already made changes to the parent (15 posts)

  1. Something Something Life
    Member
    Posted 3 years ago #

    So I made a few tweaks to my theme directly in the stylesheet before I learned about child themes and the theme companion. I want to build a child theme now before I make more changes to ensure I retain those changes. I have two related questions.

    First, if I import my parent theme css file into my child theme css file and then the parent theme is updated, will those changes I have already made to the parent's css be lost?

    Second, is there any reason why I shouldn't just copy and paste the parent css into the child css file? Since the child theme always replaces the parent theme, it would seem to make no difference if the child css includes the entire parent css, instead of just importing it. Furthermore, if the answer to my first question is "yes", this would seem to be an easy way to make sure my changes aren't lost.

  2. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

    will those changes I have already made to the parent's css be lost?

    Yes

    Second, is there any reason why I shouldn't just copy and paste the parent css into the child css file?

    No

  3. Something Something Life
    Member
    Posted 3 years ago #

    Thanks! That is very straightforward and helpful!

  4. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

    No problem :-)

  5. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    Second, is there any reason why I shouldn't just copy and paste the parent css into the child css file?

    esmi and I disagree on this point.

    If you're only making minor changes, then you only want to put your changes in your Child Theme's stylesheet. Otherwise, you will be required to maintain and propagate all changes in the Parent Theme's style.css into your Child Theme.

    I would go to the trouble now of determining your customizations to the Parent Theme's stylesheet, and putting only those changes in your Child Theme's stylesheet.

    Any good text editor (such as Notepad++ for Windows) can do a compare of two files. Such a compare will reveal your tweaks from the original style.css.

  6. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

    In an ideal situation, I'd agree. But sometimes people do customise the main theme (such as Twenty Ten) without realising the ramifications and don't want to start re-doing their changes from scratch.

    Compromise: Add an @import rule to the top of the child's stylesheet to pull in the parent's CSS. Yes - that does mean there will be a lot of unnecessary CSS duplication initially but that can be whittled down over time.

  7. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    But sometimes people do customise the main theme (such as Twenty Ten) without realising the ramifications and don't want to start re-doing their changes from scratch.

    That's where I'd recommend using the compare function in a good text editor. It should quickly reveal any and all changes from the original.

    Compromise: Add an @import rule to the top of the child's stylesheet to pull in the parent's CSS. Yes - that does mean there will be a lot of unnecessary CSS duplication initially but that can be whittled down over time.

    Agreed! :)

  8. Something Something Life
    Member
    Posted 3 years ago #

    I think I will do the find-and-replace solution. I made some very minor but important changes (width of images, etc.), so I want to make sure they're retained but I'd rather not have a cluttered CSS file.

    One curious issue arose that may have to do with the CSS itself: when I created a child theme, my menubar suddenly changed. Two of the items I had on the menubar disappeared (despite still showing up in my WordPress panel) and one turned into a pull-down menu (this involves a child page, but I prefer to have them as separate links). This happened whether I imported the parent CSS or just copied it. Any idea why this is happening and how I might fix it?

    This was not one of the changes I made to the parent CSS, by the way. I have only changed the menubar through the "menubar" section of the WordPress panel.

  9. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

    Two of the items I had on the menubar disappeared

    Is this on the front end of the site or in the back end?

  10. Something Something Life
    Member
    Posted 3 years ago #

    It was on the front end. On the back end everything looked the same. But I solved it by just making a new menubar that was identical to the old one, and switching to that one. Then I switched back and deleted the new one. Everything looks fine now.

    In building this website, I have found that the solution to problems is "undo, then redo" a surprising amount of the time.

  11. esmi
    Theme Diva & Forum Moderator
    Posted 3 years ago #

    Well, you only learn by your mistakes. :-)

  12. AardvarkGirl
    Member
    Posted 3 years ago #

    I have a, probably stupid, question based on an 'assumption' I made.

    I assumed that 'child themes' were, lets use Twenty Ten, duplicates of a 'parent' (the entire theme's folder), renamed and then edited. I then assumed when you went into WordPress admin, selected a 'theme' it worked totally off that theme's (as in that folder's) files.

    But now I'm thinking my assumptions are... well...

    In a nut shell, what is the proper definition of a 'child theme'? And what are the other reasons (beyond the fact that the original theme may be over written by an update) we call them child themes beside the fact it came from an original (ie the parent)?

  13. Chip Bennett
    Theme Review Admin
    Posted 3 years ago #

    What you've described is a Derivative Theme : a fully functional Theme, based on (derived from) an existing Theme. A Derivative Theme is a fully functional, stand-alone Theme.

    By contrast, a Child Theme is not a full Theme. Rather, a Child Theme would not work if its Parent Theme is not also installed.

    At its simplest, a Child Theme is nothing but a "style.css" file.

    A Child Theme defines, via the "Template:" header tag in "style.css", its "Template" (i.e. the "Parent Theme") from which WordPress takes any template files not found in the Child Theme.

    A Child Theme may only make style changes (via its "style.css" file) to the Parent Theme; or, a Child Theme may make other changes, such as functional changes (e.g. by adding a "functions.php" file, and adding its own functions), or layout changes (e.g. by adding whatever appropriate template files, such as "footer.php" or "page.php").

    Additional reading:
    http://codex.wordpress.org/Child_Themes

  14. BurksBarn
    Member
    Posted 2 years ago #

    I'm a little confused. I had added some adds to the templates on the parent theme twenty eleven. Then I read up on child theme's and created one. Now I see I only have the style.css when I go the theme editor. I was able to make some css changes to the headed in the css file. My question is as the parent theme updates will I lose the changes I added to the template. For instance. I added ads to the single post template.

    Also when you are talking about comparing the changes on the parent to the child. How do you view the parent theme compared to the child theme. This is probably simple but not getting how to implement that.

    If I wanted to copy some things from the parent them to the child theme how do I do that? On the server???

  15. I had added some adds to the templates on the parent theme twenty eleven

    That's not good.

    Now I see I only have the style.css when I go the theme editor.

    That's the beginning point for a child theme. If your changes are only CSS then that's enough files.

    My question is as the parent theme updates will I lose the changes I added to the template.

    Yes. That's why you use child themes so that the parent updates don't trample on your changes.

    I added ads to the single post template.

    Copy just the modified single.php file to your child directory. It will take precedence over the parent and your changes will be preserved in the child theme directory.

    If I wanted to copy some things from the parent them to the child theme how do I do that? On the server???

    See above statement about single.php :)

    You're doing alright, you just need to do some trial and error to sort out how it works. As long as you keep current file backups of your complete WordPress installation (themes and all) then don't be afraid to poke at it.

    It's the best way to figure out how child themes work.

Topic Closed

This topic has been closed to new replies.

About this Topic