Genesis Design Palette Pro

file000252786940With the recent update to WordPress 3.4 (now 3.4.1 as of this writing), many WordPress theme creators also released updated versions of their themes. I received quite a few emails from clients who wanted to update to the latest versions but were scared of losing all their customizations. While that fear is understandable, there are a few easy steps you can take to prevent any loss of data or settings when you update your website or blog.

1. Embrace the importance of updates. You wouldn’t believe how many times I log into a client’s dashboard to find that the theme, plugins, and even the WordPress core haven’t been updated in ages. The fact is, those updates help your site function more efficiently and often contain patches that protect your site from potential hackers. While you need to be cautious when updating WordPress and your theme, plugins are almost always safe to update.

2. Set up backups for your site. I’ll never understand why people ignore this. BACK UP YOUR STUFF, PEOPLE! Do you know how many of my blogger friends have lost their entire sites because of a server failure or corrupt database? It’s not even hard – there are tons of plugins that will create automatic backups and send them to Dropbox or other cloud services (or even send them to you via email). Just find one with a good rating and get it set up now, not later.

ALWAYS make a backup of your entire site before you update the WordPress core. Usually those updates install within seconds and cause zero problems, but it’s better to be safe than sorry.

3. Make your customizations using a child theme. This is the important one if you want to update your theme without making your site look crazy. (Please note: If you’re using the Weaver theme, it’s not necessary to create a child theme. You can save your settings within the admin panel and restore them after updating. You also don’t need a separate child theme with the Genesis framework because you should already be using one.) This part is so important, it’s getting a section or two all to itself.

WordPress Child Themes: What Are They?

Okay, stay with me here. I promise this isn’t complicated.

Think of your theme as a backpack that contains all the content for your website or blog. If your theme is a backpack, then the design elements you add (your header, link colors, fonts, etc.) are a piece of paper inside the backpack. When it’s time to get a new backpack, you want to be able to remove the piece of paper from the old one so you can use it again.

In other words, when it’s time to update your theme, if you’ve made changes to the way it looks, you don’t want to lose those changes when you update to a new version of the theme. Nothing sucks worse than updating your theme and realizing that your entire site is broken. That’s why child themes exist.

So your theme is a backpack and your design is a piece of paper inside the backpack. A child theme, then, is like a folder. It protects that piece of paper (your design) so it doesn’t get damaged as you change from your old backpack to a new one. By putting your design elements inside a child theme, you’re adding a layer of protection that keeps those elements from getting lost or overwritten during a theme update.

MainWP

A lot of people just go into their theme’s stylesheet and make changes as needed. That’s fine until you update the theme – the stylesheet will be deleted and replaced with a new “stock” stylesheet, erasing all those customizations you made. That’s why it’s so important to use child themes to make sure that doesn’t happen.

How to Create a Child Theme in WordPress

A child theme isn’t difficult to create at all. In fact, thanks to a plugin called One Click Child Theme, you don’t even need a lot of technical skills to do it. (If you want to do it without the plugin, email me and I’ll tell you how.)

Before you start: Go to Appearance > Editor. The file that you see in the box is the original stylesheet for your theme. Copy all of it into a text editor so you can refer to it later.

Install and activate the OCCT plugin in your dashboard. Go to Appearance > Child Theme to create a new child theme. (Note: this is better to do before you make changes to your theme.) You’ll be asked to give your theme a title – I usually use the title of the site I’m working on – and fill in your name and a description. My descriptions are typically, “A child theme based on [name of theme] created for [client].” Once you click the button, a new theme directory will be automagically created and your new CSS stylesheet will be available in your dashboard. Now you can deactivate and delete the OCCT plugin – you don’t need it anymore.

Now go back to that text editor with your original stylesheet in it and look for elements that need to be changed. For example, if the current color for text is #000000 (black) and you want it to be #019192 (the teal I use here on the site), copy that bit of code into your new stylesheet under Appearance > Editor and change the hex number. (If I have totally confused you here and you have no idea what I’m talking about, please ask for help and/or hire someone. I don’t want you guys breaking your sites!)

The original stylesheet still exists, but anything in the child theme will override it. So WordPress will look at the new stylesheet first, then use the original to fill in any other style details that weren’t specified in the child theme. That’s important. You only have to include the elements you want to change because the rest will be pulled from the theme’s original stylesheet.

Once you’ve saved the new stylesheet, check out your site and make sure it looks the way you want it. If there’s something bugging you and you don’t know where it is in the original, you can use the Inspect Element option in Chrome or Firefox to find the appropriate CSS.

One more tip – You can change the picture that appears next to your child theme in the WordPress dashboard by creating a 300px by 240px image and naming it “screenshot.jpg” (or .png, depending on your file type), then uploading it to the child theme’s directory. You can find that by going to your site’s root directory, then navigating to /wp-content/themes/name-of-your-child-theme/. That way when you look at Appearance > Themes, you’ll see something like this:

Pretty fancy, huh? You’ll need to leave the original theme in your WordPress installation (don’t delete it!), but your child theme will be the active one in the dashboard.

What a Child Theme Means For Your Site

By creating a child theme to house all your customizations, you’re ensuring that your site design is update-proof. So when the creators of your website theme decide to release an update, you can update the theme without worrying that your site will look crazy afterward. Everything you changed is separate, meaning that WordPress will still look at the child stylesheet first before applying the changes from the new version of the original stylesheet.

I won’t lie to you – sometimes themes undergo drastic design changes that can still make your site look different. In that case, you’ll have to go back through and find the new elements, adding changes to your child stylesheet again. But it’s still better than starting from scratch and trying to remember what you did months or even years ago.

If you’d like more detailed information about creating and customizing child themes, please let me know. There’s only so much I can say in one post (and this one is a beast already), but this is a general overview that should help you protect your WordPress site so you can keep it up to date and looking fantastic.

Nuts and Bolts Media is powered by the Genesis Framework.

If you aren't using Genesis from StudioPress, you're missing out! From custom layouts to built-in SEO, Genesis is the only way to create with WordPress!

All Nuts and Bolts designs are built on the Genesis Framework because we believe it's the most stable and well-supported framework available. Our clients love it and so do we - once you try it, you'll never use another WordPress theme!


Need more information about Genesis?

Learn about Genesis Read Our Review

Comments

  1. matt r. says

    Wow! Thank you for posting this tutorial, Andrea. I would have lost ALL of my information had you not walked me through this. To anyone else out there who will be using the OCCT, be sure to also download and active "Easy Theme and Plugin Upgrades" you'll need this to update your child theme.
    Thanks again!

    • says

      Sorry, I’m not sure I understand the question. Your child theme should be the active theme under Appearance > Themes, but the parent theme will still need to be installed. When your dashboard tells you there is an update available for the parent theme, you apply the update but still keep the child theme active. Does that help?

  2. ErikW says

    Thanks Andrea, this was a big help! I used to dread updating my theme because I had quite a few customizations that would always get lost or messed up somehow but the child theme takes most of the pain out of updating.

  3. Tom Richter says

    Hey Andrea,
    Ive been truly struggling with updating this premium theme. Its call Mearishop, and the bloody creator doesnt reply to anybodys posts. Ive downloaded the theme update, but how do I actually update it. Some people suggest transfering the files into the old theme folder and replacing the old files. Some people suggest deleting the theme altogether and then installing the updated theme. Ive tried both and so far, not much has happened. What should I do… and how will I know if it has worked.

    Thanks so much,
    Tom Richter

    • says

      Hi Tom,

      Sorry to hear you’re having difficulties updating your theme! That’s one of the drawbacks of ThemeForest; you never know what you’ll get in terms of support from the theme developer. Some are great and some abandon their themes with very little instruction on how buyers should proceed.

      If you haven’t already, try downloading the Envato Toolkit plugin that enables automatic theme updates. There are instructions for installing and using it here: http://wpmu.org/envato-wordpress-toolkit-a-themeforest-auto-updater/ – if that doesn’t work, let me know, but it should update your theme files without a lot of hassle. Good luck!

  4. says

    Are there any plugins that allow you to update your themes automatically that actually work? I tried using theme and plugin update plugin and it simply didnt work. Are there any other options. I don’t really understand the child theme. From what i read it seems to be something you use to edit certain aspects of your theme without changing the whole theme… i just want to update the theme i bought on themeforrest ot the newest version. Is the Child theme necessary? Also what is your preferred tool for backing up your site?

    thank you!

    • says

      Envato (the parent company behind ThemeForest) has its own theme updater plugin called Envato Toolkit. If you do a search for it, you’ll be able to install it and update your theme automatically. Updating third party themes is a little different from updating the ones you install directly from wordpress.org.

      Child themes allow you to maintain edits to theme files without losing your customizations. If you’re using a theme from ThemeForest, I’m guessing it has an options panel where you can select certain things like link colors – if that’s the case, those customizations should stay there when you update the theme. But for people who are making changes to the PHP files or CSS for their themes, a child theme is necessary to keep those changes from being overwritten during an update. Hopefully that makes sense.

      For backups, I use nothing but BackupBuddy from iThemes. It’s fairly expensive but it’s the best there is. It makes a complete backup of my site once a week (and my database every night) and sends them to my Dropbox automatically. I can restore from those backups easily if I ever need to. I highly recommend it!

  5. says

    Can you not download it from their website? I still do not understand where i download the file from. Would you recommend setting up a child theme despite using one of their themes? I messed it up pretty bad today but fixed it. It doesnt seem like switching themes or updates changes too much but when i make a child theme everything disappears. Would it be better to just make the child theme and then redo the site bars and menus on the child theme so its easier to update everything in the future.

      • says

        The plugin worked great thanks a ton. So when it updates i should expect to lose my widget and menu settings? However, if i create a child theme I will lose my information now but will be prevented issues in the future during updates. is this correct?

        thanks!

        • says

          No, your widgets and menus will still be there if you update the parent theme. When you activate a child theme, you do have to go back and select your menus and arrange widgets again, but once you do that, you shouldn’t have to do it again.

          • says

            Thanks for the help i think i got it all set up! By the way, do you have any articles on how to properly format your article posts? I can’t seem to get the formatting right to save my life. I have tried the the post from word/ post from text but it still goes crazy on me. Have you written any articles on that? Thanks!

          • says

            Unfortunately I haven’t written anything about post formatting, though maybe I should add it to my list. I always write my posts in WordPress so I don’t typically run into issues with formatting – maybe I’ve just conformed to the WordPress brainwashing. :)

  6. says

    Haha I gotcha. I tried that too but even that gives me issues. I use google docs so I have cloud saved backup of articles. I found that if I highlight the text then click format it fixes most of my issues. Not perfect but close.

  7. Karla says

    Hi there, not sure if I understand correctly…but if I have Genesis and a child theme ….it says I need to update to the current version of Genesis, I should be okay? Nothing will change as far as the site goes correct?

    • says

      Yes, that’s correct. Since all your changes were made in your child theme, you can update the Genesis framework through your dashboard without losing any of your customizations.

  8. David says

    Andrea,

    You promised in this post to detail editing child themese in Genesis (which was why a came to this post). Normally I would delete site and move on, becuase I can’t see that detail here. But before I go, just in case… do you have something detailing how to edit Genesis child themes in a way that keeps the changes after an upgrade?

    • says

      Hi David,

      As long as you make changes in your Genesis child theme and not to the framework files, your edits are safe from framework and WP updates. I really didn’t see the need to go into detail because there’s not much else to say – you install the child theme, customize the child theme as much as you’d like, and you don’t have to worry because it is update-proof. If you have specific questions, let me know and I’ll do my best to answer.

      • David says

        Hi Andrea,

        Thanks for the reply. I thought it was that easy, but, being a neverous nerd with too much blood in my coffee stream, I hesitated when I read, “This part is so important, it’s getting a section or two all to itself.” And so immediately went looking for the elusive “important section”.

        I guess my question was more related to updates to the child theme. Is there a way to ensure my child theme style.css and function.php edits are “protected” from child theme updates?

        For example, should I create a custom.css or “child” function.php of some kind, as you would with a regular child theme?

        • says

          Your child theme will never update – it’s more of a skin to change the way the site looks, while the Genesis framework contains all the functionality. Every now and then themes are re-released (as with the recent Pro themes) but that is considered a whole new theme. You’ll never ever be prompted to update your child theme in the WP dashboard.

  9. says

    Hi Andrea
    Thanks for this post – it’s been very helpful.

    Unfortunately I made changes to my stylesheet before backing up and making a child theme (I know – very naughty, but I’m now trying to make it right! :)

    I can’t remember what changes I’ve made so once I’ve made a child theme, can I put the whole of my (edited) stylesheet in the child theme?

    Many thanks
    Liz

  10. Forsythe Drucker says

    Hello Andrea,

    I used the Envato Toolkit to Update the Made theme, but after saying it was successful, I went to the home page and it was blank. Checked back on WP Dashboard and it said the theme was broken and they activated the Default theme.

    Looked for the backup via FTP and it’s there. Once I unzip it, it give me a list of directories and files. Some exist on the live directory, some do not, some are in different subdirectories, etc. The problem is, I don’t know which ones I need to upload back to replace which directories and files. What should I do? Try to copy one by one to where I find the same folder or file name? What to do with files with no equivalent? Thanks for any help you can give.

    • says

      Hi! Sorry to hear you’re having trouble! You should be able to navigate in your backup to /wp-content/themes/ and find a folder with the name of your ThemeForest theme. That’s the one you’ll want to replace. Everything else should be fine, though it’s strange that your site would show a blank screen with the default theme. Who is your host? You may be able to ask them to roll back to one of their backups.

  11. says

    Hi Andrea,

    I am new to WordPress, and unfortunately, I had made quite a bit of changes to the “Virtue” theme prior to finding your article. Am I simply in a mess when it comes to creating the Child Theme and having it work correctly? Also, if I use the theme options to make changes to my template after the Child Theme is activated, does this mean that the changes will be reflected in the Child’s css rather than the Parent’s?

    Thanks in advance for your assistance. I am so thankful I found your article.

    Christi

    • says

      Hi Christi,

      The best way to create a child theme after the fact is to use an app like SublimeText that will let you compare the site’s current stylesheet with the original stylesheet for the theme (same version). That will allow you to see what changes you’ve made so you’ll know what to copy over to the child stylesheet.

      Theme options are usually saved in your WP database and should be separate from any CSS on the child or parent side. They are (generally) safe from updates, though that’s not a guarantee. Hope that helps!

  12. says

    Hi Andrea,

    Referring back to some of your comments – you’re right on with the support lacking in some themes! My support is a 50/50 shot, but in any case, I followed your instructions here and managed to create the child. However when I went into the editor to check the ‘color values’ like you mentioned, non were listed in the code that was present. When I previewed my site as well with the child active, my links and navigation were a bit off. Did I miss a step perhaps? I freaked out and reactivated the parent theme…

    Thanks for your time and this tutorial!!

    -Marc

    • says

      Hi Marc,

      Hmm, it’s weird that the child theme would cause an issue with no additions to the stylesheet. Without being able to see the files, it’s hard to guess what might have happened. I will say that, if your theme comes with an options panel to choose colors and settings and you aren’t editing the stylesheet directly, it may not be necessary to create a child theme.

      • says

        Hi Andrea,

        Thanks for getting back – If I do not need to create a child theme, do I simply re-upload my theme files to WordPress as I had done in the beginning? Of course I’m backing up all my file before hand via the “UpdraftPlus” plugin.

        Thanks for your time and help!

        -Marc

Comment Policy:

Please be an adult when posting comments on our site. Remember, you are welcome to disagree if you can do so calmly. If you're feeling particularly fired up and don't feel you can be mature, there's always the option to walk away. We believe that the relative anonymity of the internet is no excuse for treating other people badly, so let's all get along!

Join the Discussion