Adding Custom CSS to Bones WordPress Theme

I love Themble’s Bones theme as a WordPress theme starter. I’ve used several over the years. TidyTheme’s blankslate is my second favorite but this post is about Bones!

Bones is meant to be used without Child themes which, honestly I’ve never had much luck with. That was one of the first things I liked about it. I downloaded Bones, initially, because I wanted to learn SASS. I didn’t think I would stick with it so I just made alllll kinds of changes to /library/css/styles.css. This is completely safe to do and is exactly what the theme developers intended. However, I wish I had made some of my customizations portable and not all wound up in styles.css. I may want to reuse these particular styles on another project or change themes but easily retain my shortcode styles, for instance.

What you may want to do is add your customizations to a separate css file. Whether you use SASS or not is up to you; WordPress won’t care. You probably will not want to do all of your overrides in your custom.css. You’d be wasting precious bytes and slowing your site down with redundant declarations

Enqueue style in functions.php

Alright. Open functions.php. On a new line after line 207 where you see add_action, paste this:

function bones_custom_css() {
  wp_register_style('my_custom_css', get_template_directory_uri() . '/library/css/custom.css');
  wp_enqueue_style( 'my_custom_css');
}

add_action('wp_enqueue_scripts', 'bones_custom_css', 1000);

Create custom.css on your web server however you perfer. That’s it.

Extra Credit: Something I learned

1000 represents the order you want the script/stylesheet to appear.
Without specifying 1000, this shown below from functions.php @ line 45

add_action( 'wp_enqueue_scripts', 'bones_scripts_and_styles', 999);

would cause library/css/styles.css to appear after library/css/custom.css. Depending on how you use this stylesheet, it might cause you problems. We set custom to 1000 to ensure the custom file appears after. All done.