How to add custom stylesheet CSS files into Wordpress themes?

Either if creating your own WordPress theme, a child-theme from it’s parent or editing a theme, you will encounter the need to add your own CSS custom stylesheet. Most probably you will also want to override some styles from the default theme stylesheet.

There are several ways to add your own styles and/or override default styles. So what’s the best way to do it? Developers will agree it is by creating your own custom CSS files and embed them into the WordPress theme you are working on.

Ways to add custom CSS code to WordPress themes

We won’t talk about depreciated ways of adding CSS styles into HTML elements, or adding <style> blocks. Nowadays, this methods are abandoned by developers. Also, they’re not SEO friendly, which is an important issue to care about nowadays.

We won’t even suggest editing theme’s original CSS stylesheet (usually style.css), or adding custom code to it. This file is often very large and difficult to manage. Any small typing mistake or syntax error in it could cause the whole site to crash.

In this article we will show you how to create a custom CSS file and embed it into a WordPress theme.

There are several methods of adding custom CSS code to WordPress themes. What’s the best practice?

How to add custom stylesheet files to WordPress themes using wp_register_style() and wp_enqueue_style()

The first step of embeding custom CSS files to WordPress is adding files to your theme. Either using a FTP client or your cPanels File manager locate your theme folder and open it. Now you can either create a new file and name in for example custom.css or upload the CSS file from your computer. In case you need to add more than one CSS file to your WP theme repeat this step.

If you completed this step correctly, you should see your custom CSS file or files in your WordPress installation Theme editor.

Linking custom CSS files the site’s head section

Now that you added your custom CSS files to your WP theme folder is time to link the files into your site’s <head> section. This way the site can apply your custom styles to it’s elements.

You could simply add a <link> element to your site’s <head> section, preferable right before the closing </head> tag. This way custom CSS styles load last and override default styles. The <head> section of your site is usually located in your theme folder header.php file and is accessible trough the WordPress Theme editor.

Here’s an example of the element when your site is located in the folder “test-site” in the root folder of your server, your theme folder is called “test-theme” and your CSS file is called “custom.css”:

<link rel="stylesheet" href="/test-site/wp-content/themes/test-theme/custom.css" type="text/css" media="all">

This simple solution will work fine but it’s not the best practice of embeding CSS files into WordPress sites.

Embeding a CSS file into WordPress using wp_register_style() and wp_enqueue_style() functions

The recomended practice to embed custom CSS files to your WordPress site is by registering your stylesheet in your WP theme’s functions.php file using wp_register_style() and wp_enqueue_style() functions. This way your CSS files will load in the moment when wp_head action is triggered. Your stylesheet will be positioned right after the theme’s default stylesheet. and allow you overriding default styles.

The first thing to do is to locate your theme’s functions.php file. It’s located inside the WordPress Theme editor. You can also do it using FTP or cPanels File Manager. If you are working on a child-theme, edit child-themes functions file, not the parent-theme one. This way you’ll avoid loosing your custom code when updating the parent theme. Scroll down to the bottom of functions.php and add the following code snippet:


function additional_stylesheets() {

wp_register_style( 'custom', get_template_directory_uri().'/custom.css'  );
wp_enqueue_style( 'custom' );
}

add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );

Customize the snippet: in the example above, we named the registration function “additional_stylesheets”, and registered a stylesheet CSS file named “custom.css”, previously uploaded into our theme folder. You can name the function as you like and replace the function name in the top and bottom row of the snipet. If your stylesheet file is named differently than custom.css replace the word custom in the snipet with your own file name.

If you’ve done everything correctly, you can start writing your own CSS code into your stylesheet. You will notice your styles affecting the site as you save changes and reload the page. Don’t forget to clean your browser’s cache when refreshing the page.

Embeding multiple custom stylesheet CSS files into functions.php using wp_register_style() and wp_enqueue_style()

Before adding multiple CSS files to your WP theme, take in consideration that it causes more server requests when the site is loading which affects your site’s loading speed. Try to use as less stylesheets as possible.

Now, let’s say you have a separate stylesheet file for desktop styles named custom.css and a second stylesheet file named responsive.css for mobile devices. Embedding both stylesheets into your functions.php file is simple and requires a slight modification of the single file snippet shown above:


function additional_stylesheets() {

wp_register_style( 'custom', get_template_directory_uri().'/custom.css'  );
wp_register_style( 'responsive', get_template_directory_uri().'/responsive.css'  );
// register another file here
wp_enqueue_style( 'custom' );
wp_enqueue_style( 'responsive' );
// enqueue another file here
}

add_action( 'wp_enqueue_scripts', 'additional_stylesheets' );

Same as customizing the single file snippet, change the file names accordingly to your situation.

More about wp_register_style() and wp_enqueue_style() functions

To learn more about using wp_register_style() and wp_enqueue_style() functions to register stylesheets visit the dedicated WP Codex page.

How to embed custom stylesheet CSS files into WordPress?