How To Use a Custom Stylesheet in WordPress

Why should I use a custom stylesheet in WordPress?

Because a custom stylesheet allows you to customize the styles of your WordPress theme without modifying any of its core files. This allows you to update your WordPress theme without losing any of your custom modifications to your stylesheets. It also allows you to better organize the custom stylesheet tweaks you have made, which makes it easier to find your latest stylesheet changes when you have a need to make further changes to them.

How do I create a custom stylesheet in WordPress?

1. Open up a text editor, create a new text file, save it as “custom.css” and upload it into a css folder in your active WordPress theme’s folder (i.e. /wp-content/themes/theme/css/) via FTP.
2. Download the functions.php file in your active WordPress theme’s folder (i.e. /wp-content/themes/theme/) via FTP.
3. Open up the functions.php file in a text editor and look for the last occurrence of “wp_register_style”, then add a new line below it as follows:

   wp_register_style("custom", get_template_directory_uri() . "/css/custom.css", '', '1.0.0');

4. Also in the functions.php look for the last occurrence of “wp_enqueue_style”, then add a new line below it as follows:

   wp_enqueue_style('custom');

5. Now custom.css will be loaded in wp_head() and will appear in the HTML of all your WordPress web pages as follows:

   <link rel="stylesheet" id="custom-css" href="http://domain.com/wp-content/themes/theme/css/custom.css?ver=1.0.0" type="text/css" media="all">

6. Save and overwrite the functions.php file in your active WordPress theme’s folder (i.e. /wp-content/themes/theme/) via FTP.
7. Add whatever custom styles you want to your custom.css stylesheet file. Use the !important CSS declaration as needed to ensure your custom styles take precedent.
8. If you use caching on your WordPress site and/or a CDN and I would highly recommend that you use both, then as you make edits make sure to update the version of your custom.css file in your theme’s function.php file to prevent your visitor’s browser cache from not showing your latest custom.css stylesheet changes. This way the browser will see custom.css as a new file and will download a fresh copy. Say we just made an edit to the custom.css file. In order to update the version number we would then edit the line of code we added to the functions.php file to version 1.0.1 as follows:

   wp_register_style("custom", get_template_directory_uri() . "/css/custom.css", '', '1.0.1');

9. Now when the file is loaded in the HTML it will be interpreted as a new file and will not remain cached in your visitors’ browsers. It will render as follows:

   <rel="stylesheet" id="custom-css" href="http://domain.com/wp-content/themes/theme/css/custom.css?ver=1.0.1" type="text/css" media="all">

10. That’s it. It’s that simple. Now you have a custom.css file to make all your custom stylesheet changes in. Just don’t forget to update the version number of your custom.css file in your functions.php file when you update it.
11. I would highly recommend keeping your custom stylesheet organized. I like to organize my CSS in groups using comments to clearly label them. For example, keep all the general CSS in one group, the responsive CSS grouped by resolution and finally the plugin-specific CSS grouped by plugin. This will save you a lot of time later on. If you stop using a plugin you can then just remove the group of styles specific to that plugin.

How do I create a custom stylesheet in WordPress that only applies to a specific page template?

When registering and enqueuing the stylesheet in the functions.php file, you simply need to specify the page template file for the one you want the stylesheet to apply to in a PHP IF statement with the is_page_template function as follows:

if( is_page_template( 'page-template.php' ) ) {
wp_register_style("page-template", get_template_directory_uri() . "/css/page-template.css", '', '1.0.0');
wp_enqueue_style('page-template');
}

If your stylesheet is registered and enqueued in separate locations, simply wrap the same PHP IF statement with the is_page_template function around both separately.

Now the page-template.css file will only be included on pages using the page-template.php page template.