How to add an extra CSS file to your Genesis Framework functions.php

Genesis Framework.

We use and love the Genesis Framework by Studiopress and their varied and versatile themes play a big part in our business. But we don’t just grab a theme, paste content into it and invoice the customer. Each site uses bespoke styling using css and Genesis functions in the functions.php file.

Adding an extra css file to Genesis Framework child theme

Normally we just roll these in to the existing files but it’s always a worry that when the theme developer updates their theme. Our updates will be over-written.

This is where this very handy tip by Chris Cree comes in use. Instead of adding your custom css edits or new classes to the existing stlye.css file, either mixed in with the original code or if you’re organised, at the bottom of the file. Use this PHP function to load an extra css file and place your code there.

You can grab the code from this post or on our Gist on GitHub

[php]
add_action( ‘wp_enqueue_scripts’, ‘wsm_custom_stylesheet’ );
function wsm_custom_stylesheet() {
wp_enqueue_style( ‘custom-style’, get_stylesheet_directory_uri() . ‘/custom.css’ );
}
[/php]

Ok, so what are the downsides?

Some WordPress and website developers argue that adding additional server calls is detrimental to performance and you should try to minimise them by amalgamating code but personally we feel that with all the otehr overheads of Wordpess and plugins. Loading an extra css file will be negligible.