How to add Stylesheet’s

In this tutorial we are discussing about adding stylesheets to WordPress. As you can see there are stylesheets in your header file. Lets see how we can add styles in WordPress. You can add stylesheets as inline. But it is not the best way to add stylesheets to WordPress. WordPress recommended way to add styles is Action Hooks. Action Hooks let you add styles to WordPress. Lets see how we can add Stylesheets.

In WordPress Themes, we can create a magic file called functions.php. This file automatically detected by WordPress. Everything we are writing in this file automatically get to run by WordPress. We just need to write/add codes what we need to use here. Other parts handle by WordPress and nothing to worry about other than writing/creating what we are expecting. Lets see how we can add our styles via this function file. But we need to let execute this file. For that we need to add a bit of code inside our head tag. And the end of head tag, just before the closing head add wp_head(); . Now all done.

Lets create functions.php file if not exists. In function file you do not won’t to worry about closing PHP tag. Only open PHP tag is really enough. Create this function inside your function file.

function nero_resources() {

}
add_action( 'wp_enqueue_scripts', 'nero_resources' );

This will initialize the stylesheet adding function. Lets see how to fill the function body with our stylesheet.

Adding a style is contain two parts. First one is registering the style and second is enqueuing the registered stylesheet.

wp_register_style( 'nero_bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css' );

wp_register_style() function is provided by WordPress. It has five parameters. Two are required and others are optional parameters. Lets understand these parameters.

$handle – This is the name of the stylesheet you are going to link. This name should be unique. It is better to use a prefix for this name. Prefix is not WordPress recommended but it is better to use to avoid conflicts.

$src – Path to the stylesheet. You have to define correct reference path.

$deps – Dependencies for this stylesheet. Array of stylesheets should loaded before this stylesheet.

$ver – Stylesheet version defining here

$media – Defining media type for the Stylesheet. Whether type is media, screen, all or etc

Hope you should aware about these parameters for stylesheet. As per the parameters ‘nero_bootstrap’ is the name of our stylesheet to be include. We have another new function called get_template_directory_uri() . This is a function which returns the path to our theme directory.

Only registering a stylesheet not making any change in Front End. To make a change by a registered style we need to enqueue that registered stylesheet. For that we need to add that code.

Hope you should aware about these parameters for stylesheet. As per the parameters nero_bootstrap is the name of our stylesheet to be include. We have another new function called get_template_directory_uri() . This is a function which returns the path to our theme directory.

Only registering a stylesheet not making any change in Front End. To make a change by a registered style we need to enqueue that registered stylesheet. For that we need to add that code.

wp_enqueue_script('nero_bootstrap');

Now we have let WordPress know that we have enqueued nero_bootstrap stylesheet and please show it in Front End. It will load this stylesheet and once you check the web site. You can notice that it has been loaded. Complete enqueued function should look like below.

function nero_resources() {
    wp_register_style( 'nero_bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_register_style( 'nero_style', get_stylesheet_uri() );
    
    wp_enqueue_script( 'nero_bootstrap' );
    wp_enqueue_script( 'nero_style' );
}
add_action( 'wp_enqueue_scripts', 'nero_resources' );

You may also like...

Leave a Reply

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