Using themes in WordPress is fantastic for getting your website up quickly, but what if you want to add custom CSS to a WordPress theme and override the styling?
One way to change the default behaviors of WordPress is using a file named functions.php. It goes in your Theme’s folder. – WordPress.org Codex
There is the quick and dirty way to do it, but you risk having your code overridden when the theme eventually updates. This is not wise. Below I will show you the right way to do it via referencing a custom css file in your theme’s function file using the wp_enqueue_scripts hook.
Step 1: Reference the custom.css
Most WordPress themes, if not every theme has a functions.php file nested in it’s root folder. (eg. http://www.example-website.com/wp-content/themes/twentysixteen/functions.php)
Open the functions.php file, head to the very bottom of the file and paste the following code below:
function custom_css() { // The custom name of your function
wp_enqueue_style( '', get_template_directory_uri() . '/custom.css' );
}
add_action( 'wp_enqueue_scripts', 'custom_css' ); // Activating the function
Save it and proceed to Step 2.
Step 2: the custom.css file
Now that you have your theme looking for a custom.css file, it’s time to actually add one / create a file.
Create a custom.css file with your custom CSS code in it and upload it to your theme’s root folder. You will obviously want to throw in any custom or overriding code into there.
Save it and place it in the root of your current theme. (eg. http://www.example-website.com/wp-content/themes/twentysixteen/custom.css)
Voila! You’ve done it. Now you don’t need to worry about your theme overriding your custom CSS code when you do a theme update.
You can check that your theme is calling the custom.css file by checking the source code of your website (CTRL + U in Google Chrome) and searching for custom.css. You should see the file referenced at least once.