Transfering custom CSS to child theme
-
I have a site with about a dozen custom CSS changes.
Obviously it would be better if they were part of a child theme.
What’s the best workflow to add a child theme and move the CSS changes to that?
-
If you made these CSS changes in the theme’s style.css file, you can use a spot-the-difference tool like Diffchecker to find your styles: https://www.diffchecker.com/ – Where you’re putting the original style.css file all of the code on the left and your modified on the right.
Otherwise you may have used either the “customizer > additional css” OR a custom CSS plugin.
You need to create a child theme, details here:
http://codex.wordpress.org/Child_Themes
-Activate your child theme
-Then pick up your CSS changes and add them to the end of the style.css file of the child theme, add just a little difference so that you know that it is really this CSS which is active, something subtle like “color:red;”. Remove the CSS customizations from their present place.
-Test it.
-Remove the test setting.Note that for myself I don’t think that there is a particular urgency in doing this conversion.
Thanks.
My concern comes from reading suggestions that updating the theme may trash the custom CSS. I’m unclear whether that risk is just when changing from Theme A to Theme B or whether there it is likely to affext Theme A v2 to Theme A v3.Of course you backup your theme and plugin files and database before doing anything.
My concern comes from reading suggestions that updating the theme may trash the custom CSS.
If you have edited the .css files of the theme, then these edits will be lost. If these edits were in a child theme they would be safe. If you used the customizer > additional css then these will be safe.
I’m unclear whether that risk is just when changing from Theme A to Theme B or whether there it is likely to affext Theme A v2 to Theme A v3.
Change A-B will not lose settings or files, they will remain in place to be copied, will return to active service if you switch back.
Upgrade V2 to V3 will kill your V2 edits on the parent, a child will survive.There is the issue that html and css markup classes and IDs etc also hook functions will change between versions, and between themes A to B, so some testing is necessary and revisions anticipated. I have found it handy to be able to review what the old version did etc while tuning the new one.
(Sorry for the slow follow up on this.)
If you have edited the .css files of the theme, then these edits will be lost. If these edits were in a child theme they would be safe. If you used the customizer > additional css then these will be safe.
The changes I’ve made have been (via the site’s WP dashboard) to …
Appearance > Customize > Additional CSS
Any other changes have been through plugins and Page Builder (which was installed with the theme (Sydney)).I have not made any changes via ftp, nor via …
Appearance > Customize > Editor
… nor …
Appearance > Customize > Edit CSS
(Selecting the latter only returns a Not found message.)On this basis, if I understand correctly, I should be able to update the theme from Ver X to Ver X+1 without problems?
Yes you should have an uncomplicated upgrade.
However the possibility exists that the theme revisions (X to X+1 or even X.00 to X.01), that the theme authors have changed something that you are relying upon, say they changed the class of menus from “menu-syd-top” and “menu-syd-bottom” to “menu-syd-up” and “menu-syd-low”, then your CSS changes would miss their targets.
What you should do against these unlikely impacts is to read the release notes, review what your CSS changes are and critically check that they are still applied and relevant.
I am presently dealing with possible changes of this type. Some clients are using woocommerce with some customized page templates in the child theme, woocommerce have updated and there may be some changes to the code that the page templates were based upon at the time the child theme was prepared, so I am doing 3 way comparisons to establish if I need to revise the page templates in the child theme, not an ideal situation, but given the complexity and flexibility of the platforms, I think that this is as good and as simple as I can expect.
The topic ‘Transfering custom CSS to child theme’ is closed to new replies.