Add Custom CSS To a WordPress Theme

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.

Add Custom CSS To a Wordpress Theme
Post Title
Add Custom CSS To a Wordpress Theme
Post Description
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?
Post Author

Posted: Wednesday, December 23rd, 2015

Leave a Reply

Your email address will not be published. Required fields are marked *


About Martin Grondein

Martin Grondein is a website developer Durban, South Africa. He specialises in PHP/HTML5 Website development particularly modern Wordpress websites.