How to add custom css file (stylesheet) in WordPress

add custom css file (stylesheet) in WordPress

You’ll learn best and recommended way to add custom css file (stylesheet) in WordPress at the end of this lesson. Most of the newbies adding styles and scripts directly. But that is not a good practice to adding styles to the WordPress directly. You can simply add styles to WordPress via functions.php file. Lets see how to do that.

First you need to create function in functions.php file.

I am defining my function as function nero_resources() {}

Then you need to enqueue the function as add_action( 'wp_enqueue_scripts', 'nero_resources' );

wp_enqueue_scripts is the enqueuing function name and nero_resources is our function name. Hope you clear both of these.

To register a stylesheet, there are five parameters we can use. Out of five two parameters are required and other three are optional. Will discuss the required parameters one by one.

$handle

This is the name of the stylesheet and has no default value. We must define this value as it hasn’t any default value. As well it is better to add a prefix for the handle. Assume you are going to add Bootstrap style and you can name the handle as ‘bootstrap’. This is fine but I suggest you use a prefix. For example ‘nero_bootstrap’. This will make you a unique stylesheet.

$src

Path to the Stylesheet referring $src. This is also required and you can use either remote assets or assets from the development. Either Plugin or a Theme. For themes use get_template_directory_uri() for theme directory reference and use plugins_url() for plugin.

These two are the required when you are registering a stylesheet. Lets register bootstrap style for our theme.

wp_register_style( 'nero_bootstrap', get_template_directory_uri() . 'path/to/stylesheet.css' );

This will register bootstrap stylesheet. Once we have registered our stylesheet then we need to enqueue it to the WordPress. For that you need to use one simple line of code as follow.

wp_enqueue_scripts( 'nero_bootstrap' );


Parameters usage in detail

$handle
(string) (Required) Name of the stylesheet. Should be unique.

$src
(string) (Optional) Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.

Default value: ”

$deps
(string[]) (Optional) An array of registered stylesheet handles this stylesheet depends on.

Default value: array()

$ver
(string|bool|null) (Optional) String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.

Default value: false

$media
(string) (Optional) The media for which this stylesheet has been defined. Accepts media types like ‘all’, ‘print’ and ‘screen’, or media queries like ‘(orientation: portrait)’ and ‘(max-width: 640px)’.

Default value: ‘all’


Now your whole function should look like this.

function nero_resources() {
	wp_register_style( 'nero_bootstrap', get_template_directory_uri() . '/path/to/stylesheet.css' );
	wp_enqueue_scripts( 'nero_bootstrap' );
}
add_action( 'wp_enqueue_scripts', 'nero_resources' );

Instead of two processes you can use this in same line. such as:

wp_enqueue_script( 'nero_bootstrap', get_template_directory_uri() . '/path/to/bootstrap/stylesheet' );

This is also fine and working great. But I am highly recommending the first register then enqueue. That is the best way recommending.

That is all from this tutorial regarding add custom css file (stylesheet) in WordPress. Hope you enjoyed the tutorial. Happy learning ahead. Thanks for reading.

Recommended: Please follow our step by step guide how to create a WordPress Theme from scratch. You’ll be able to create your own theme at the end of these lessons.

You may also like...

Leave a Reply

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