5/17/2016 - 10:17 PM

Custom CSS Methods and Tools

Custom CSS Methods and Tools

- Support forum seems to recommend using “Additional CSS” vs. Theme Options > Custom CSS:
Go to Dashboard=> Appearance=> Customize=> Additional CSS box and add the following CSS.
Maybe it’s because the Additional CSS will be carried over to any theme, whereas the Custom CSS is theme-related. (used on One Can Help site)
// Do not copy opening php tag above
add_action( 'wp_enqueue_scripts', 'wsm_custom_stylesheet', 20 );
function wsm_custom_stylesheet() {
    wp_enqueue_style( 'custom-style', get_stylesheet_directory_uri() . '/custom.css' );
Anne (Aug. 30, 2013):
I like Chris' approach. What I've been doing is adding all of my custom CSS to the bottom of the child theme's CSS file. I separate the area with a comment, something like

/** --------- Anne's customizations for clientname ------------ **/

If the child theme is updated, I copy and paste my custom CSS to the bottom of the new theme.


Gary Jones (Aug. 30, 2013):
I use and would recommend Anne's approach over Chris's. Theme updates from the developer or only going to be very rare, yet users would have an extra HTTP request on each and every page load. Don't penalise users to make your occasional maintenance easier.

-------------- Use Chris Cree's approach only if necessary -------------

Chris Cree (Aug. 20, 2013):

Here's a simple way to make CSS customizations to a stock child theme that will simplify your life if the developer publishes updates to the theme.

First create a custom.css file with all of your customizations and FTP it up to your child theme. Then use the code in this Gist to add the stylesheet to the front of the site:

Just make sure you keep a copy of your latest custom.css file on your local computer. Then when you update the child theme you can just FTP up your custom.css file, add the function back in and rock and roll!

Adding a custom.css stylesheet to your Genesis child theme (will work for non Genesis themes as well). First create a custom.css file with your custom styles and FTP it up to your child theme directory. Then add the below code to your child theme's functions.php file.