Creating a Child Theme from a Modified Existing Parent Theme
You need to get all your modifications into a child theme so that updating the parent does not wipe out your changes. Read through all of the steps below until you understand the process before starting.
1. Make a backup of your customized parent theme using FTP, SSH or your Web Hosts file manager. You’ll need this if things don’t work out and you need to revert.
2. Create a child theme from the Parent/Child Tab, but do not activate it yet. Make sure you check the “Copy Parent Theme Menus, Widgets and other Options” box.
3. Go the the Files tab and select any parent templates you have changed from the list of “Parent Templates” and click “Copy Selected to Child Theme.” WordPress will automatically pull the the templates from the new directory when it is activated (but don’t activate it just yet).
4. Now the tricky part — moving your modified styles to the child theme. The best way to do this is to download your modified “style.css” file from the parent and run a DIFF against the original parent “style.css” file and move any selector blocks over to a separate file. You can use Notepad++, TextWrangler or any advanced text editor to find differences between two files.
If you do not have an advanced text editor, open the modified stylesheet and manually copy/paste any selector blocks you have changed to a separate text file.
5. Once you have all of your changed selectors in a file, copy the entire thing into the “Raw CSS” textarea box at the bottom of the Query/Selector tab. Click the “Save” button to the left of the textarea box (not the one at the top).
6. Test the new child theme using the Live Preview. Go to Appearance > Themes and click “Live Preview” on the child themes icon. It should display all of your modifications correctly. If not, repeat step 3-5 until everything is working.
7. Re-install the parent theme to a fresh, clean version and repeat step 6. If you notice anything wrong, you may need to investigate where you missed copying something. If necessary, revert to the backup parent theme and start over.
8. Once everything looks good, go to Appearance > Themes and activate your new child theme. You can then make changes to the child theme without touching the parent.
