Community Forums › Forums › Archived Forums › General Discussion › Best practices for modifying Genesis Child Themes
Tagged: customizing child theme
- This topic has 5 replies, 2 voices, and was last updated 10 years, 8 months ago by David Chu.
-
AuthorPosts
-
August 29, 2013 at 9:26 am #59540tcollingMember
Hi -
I'm beginning to realize that all the work that I've done modifying version 1.x of Outreach is going to be tedious to "migrate" to version 2.0 of Outreach. I think I may have made a mistake by modifying the child theme style.css instead of separating out the customizations into a separate file, some sort of "custom" css file.
What are the best practices in this regard? Should I somehow use a separate custom.css file (and if so, can you point me to an online explanation of how to implement such a thing?)
Thanks!
http://www.TrustworthyCare.comAugust 29, 2013 at 2:30 pm #59593David ChuParticipantHi,
You're absolutely on the right track with that idea. You don't want to have to re-thread all your goodies back in, or even lose them if you didn't back them up.You could make a new stylesheet file, and put it in the same folder as your child theme's style.css. Let's say we name it "custom.css". Put in any CSS you'd like to add. Then you can pull it into your theme by adding the following bit of code in your functions.php:
add_action( 'wp_enqueue_scripts', 'dc_load_custom_stylesheet', 10 ); function dc_load_custom_stylesheet() { wp_enqueue_style( 'custom-stylesheet', CHILD_URL . '/custom.css', array(), PARENT_THEME_VERSION ); }
So even if you update the theme and knock out the above line, it's much easier to re-add this bit than trying to remember all your new CSS! ๐
Hope that helps,
Dave
Dave Chu ยท Custom WordPress Developer – likes collaborating with Designers
August 29, 2013 at 3:39 pm #59600tcollingMemberHi David -
THANK YOU so much for taking time to answer my question. I really appreciate your help!
One followup detail: if I do what you suggest, then when I modify blocks of code in the child theme style.css file, should I copy them over entirely to the custom.css file and then modify them in the custom.css file?
If so, then should I comment them out in the original child theme file, or can I leave them un-commented because the versions in the custom.css file will somehow supersede the original versions in the child theme style.css file, or what?
Thanks!
August 29, 2013 at 4:19 pm #59605David ChuParticipantGreat!
If everyone thought like you did, there would be more happy coders out there after updates! ๐I would tend to move, rather than copy, stuff to your custom file. It's cleaner. It won't necessarily be a problem if you have the same code in two places, but it can be. For one thing, say you're using Firebug, the Chrome code inspector, or other analogous tool. And you have matching stuff in 2 files. That makes for brain overload when you're seeing double and wondering which file your looking at! Doh!!! And if you make your change in style.css, and your custom file overrides that, whoa.... I would start singing "They're coming to take me away"!
Now that I do a lot of coding, I also tend to break out my functions, either with a separate file similar to the CSS approach above, or in a plugin a la Bill Erickson. Something to consider down the road.
I don't need to be quite so cautious when I'm building a child theme from scratch, because the only person who's going to update that is me - no automagic updates! ๐
Cheers, Dave
Dave Chu ยท Custom WordPress Developer – likes collaborating with Designers
August 29, 2013 at 4:31 pm #59608tcollingMemberThanks again for your help, Dave. I really appreciate it!
Just to be certain that I understand how this works when processed by WordPress:
If I DO leave the code for a class in both places, does WordPress ignore the code for the object in the child theme style.css version, and use the code for the object in the custom.css file instead?
August 30, 2013 at 8:01 am #59688David ChuParticipantGood questions. style.css is, as you can imagine, "pumped" into the head of your site's HTML code. Now take a look at the command I have above, and notice the "10" in there. That's a priority of loading - the idea is that you want your custom.css to load last, so its contents will override the contents of style.css. You'll see all this if you view source. And if your custom file is loading too soon, you can increase that number.
So that's sort of an advanced way of saying that no, WordPress doesn't ignore either CSS file, but the last one loaded will take precedence.
Dave
Dave Chu ยท Custom WordPress Developer – likes collaborating with Designers
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.