How to create Child theme after modifications made to Parent theme?

  • pondgirlny

    #6832

    Last year I created our new site with WordPress using the Graphene theme(which is awesome). Being a newbie to website development and wordpress in general I did not take the necessary time needed to learn about the benefits of child themes and just dove in making adjustments to the stylesheet. I am not very good with code, ftp and php confuses me, but I know how to search the internet to find what I need…except for this: Is it possible to create a child theme after I have modified the code in the stylesheet?

    I don’t know/remember what exactly I modified, only that I used the “Editor” under “Appearance” in the WordPress dashboard and modified parts of the stylesheet from there.

    If I can’t create a child theme without loosing my modifications is there something else i can do to help protect my site’s security and functionality (my slider on my home page no longer works, it used to feature three pages)?

    My website is http://www.nationalpondservice.com where I have Graphene v 1.6 installed

    Mod

    Kenneth John Odle

    #35781

    Use this resource: http://www.diffnow.com/ to compare your stylesheet with a Graphene 1.6 stylesheet. You can copy those changes to a new stylesheet to use as the basis of a child theme.

    pondgirlny

    #35782

    Thanks for the site. Do you know where I could find a copy of a Graphene 1.6 stylesheet? The oldest copy I can find is v 1.7 which looks to be different enough from the 1.6 that it’s hard for me to tell what my modifications were.

    Thanks again

    Mod

    pondgirlny

    #35784

    Great, thank you again! I’m having a little trouble getting started. I’m cautious not to ruin my site and want to make sure I’m following the right steps in the right order.

    I’ve gone through comparing the two codes and have made note of my changes but I don’t know where to go from there. I don’t have any web developer software so I work with Notepad. Looking at info on the form (https://forum.graphene-theme.com/graphene-support/how-to-modify-the-theme-using-a-child-theme) I feel like I’m missing a step or is it really that easy?

    Can I copy and paste that code into notepad and simply save the file as style.css then upload that file into my new directory?

    Step 4 confuses me. Where to do put my modifications and how much of the code do I need for my modifications?

    Once we get through that I go in through the WP admin panel, activate my child theme then upgrade the parent theme?

    Mod

    Kenneth John Odle

    #35785
    Quote:
    I don’t have any web developer software so I work with Notepad

    A text editor is really all you need. Many of us prefer Notepad++, which has semantic highlighting, making it easier to troubleshoot your code.

    Quote:
    I feel like I’m missing a step or is it really that easy?

    Creating a child theme is incredibly easy, but most people feel a little intimidated if they have never used FTP to access their site.

    Quote:
    Step 4 confuses me. Where to do put my modifications and how much of the code do I need for my modifications?

    Your modifications go in your child theme stylesheet. What step 4 is saying is “don’t copy the entire original stylesheet over!” (A common mistake, but which leads to problem. You only need to focus on those elements you are interested in changing.

    For example, if you want to change the background of the slider, and you find this code in the original theme stylesheet:

    .featured_slider #slider_root {
    background: #fff;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    height: 240px;
    width: 100%;
    }

    you only need to copy the declarations from that element that you are trying to change. If you wanted to change the background of this element to black, you don’t need this in your child theme:

    .featured_slider #slider_root {
    background: #000;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    height: 240px;
    width: 100%;
    }

    you only need this:

    .featured_slider #slider_root {
    background: #000;
    }
    Mod

    Kenneth John Odle

    #35786
    Quote:
    Once we get through that I go in through the WP admin panel, activate my child theme then upgrade the parent theme?

    Yes. Keep in mind that there have been a fair amount of changes between 1.6 and 1.8, so you may need to make some additional changes after you activate your child theme.

    pondgirlny

    #35787

    So using your example above it should look like this?

    /* Your modification goes here */
    .featured_slider #slider_root {
    background: #000;
    }

    Do I have to put them in the same order as they are found in the code?

    And if I have to make additional changes after activating the child theme I should make those changes to the child theme right?

    Thanks for wonderful and easy to understand info, Kenneth.

    Mod

    Kenneth John Odle

    #35788
    Quote:
    Do I have to put them in the same order as they are found in the code?

    Not necessarily, but it does help to keep track of the changes that you make.

    Quote:
    And if I have to make additional changes after activating the child theme I should make those changes to the child theme right?

    Yup!

Viewing 9 posts - 1 through 9 (of 9 total)

You must be logged in to reply to this topic.