How To Add CSS File In WordPress Theme To Enable Designing?

add css file in wordpress

You all know that the designing of your website is controlled by the CSS file. But do you know how to add CSS file in WordPress theme?

Before starting the development process, you should know that the stylesheet should be connected. There should be some function which can let the file get picked when needed.

In WordPress theme folder, the style.css file is the stylesheet and you have to add CSS file in WordPress theme using a function.

In this tutorial, I am going to walk you through the simple code which would link the stylesheet.

Add CSS File In WordPress By Creating A Function in functions.php File.

If you are aware of the WordPress theme file structure then you would know that the functions.php file consists all the functions used to develop a WordPress theme.

In the WordPress directory, there are many functions which can be used. But here, we want only one.

wp_enqueue_style( $handle, $src, $deps, $ver, $media );

$handle:- It is the name of the stylesheet. It is required to fill this place.

$src:- If you have placed the CSS file in any folder then the full URL should be filled here.

$deps:- If you want to create an array to control this stylesheet then you can.

$ver:- If you want to add the version of the stylesheet then fill this value.

$media:- There are many media types, if you want to use this stylesheet for any particular media type, you can.

NOTE:- Only the first and second options are required to add CSS file in WordPress theme. Don’t get confused with other options.

Create a new function in the functions.php file and use the above-mentioned WordPress codex.

function blogginglove_designfile() {
     wp_enqueue_style(‘style’, get_stylesheet_uri());
}
add_action(‘wp_enqueue_scripts’, ‘blogginglove_designfile’);

I have used the function name as “blogginglove_designfile“. You can change it according to your requirements. The name of the file is “style“.

As you know that the CSS file is “style.css”. If you have created the custom CSS file then add the name of that file.

After that, the function is being called. After adding this code in your theme folder, your CSS file would work properly. This is an authentic way to link CSS file in WordPress.

I hope Now You Can Add CSS File In WordPress Theme?

We all know that when we try to start something and face many problems in the starting phase then it is possible that we give up.

While developing a WordPress theme or to create a child theme, adding the CSS file is one of the most important parts. You should know the proper way.

The above-mentioned code would work for you and you can happily start designing your website. If you still face any problem, don’t hesitate to ask.

by Ravi Chahar

A blogger, web developer, and designer who intend to guide his readers about WordPress, Blogging, Web Development, Web Design and more. I have expertise in WordPress theme development and customization. I can set up and redesign the Thesis themes. I have been working in this field for years now.

Leave a Reply

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

CommentLuv badge