How To Add CSS File In WordPress Theme To Show the Design
April 20th, 2018 | by Ravi Chahar || 2 Comments |
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.
$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.
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 to 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.
Hi Ravi,
It’s so awesome of you to show us how to do this! And the way you explain will certainly make it easy to follow. ?
I started a course on Udemy to learn how to design a child theme for WordPress from scratch. I can’t wait to finish the course and put into practice what I learned. ?
Going to pass this on for sure. I’m sure there are designer hopefuls who want to learn this.
Have a great rest of the day!
Cori
This is really awesome method Ravi,
Actually i was trying to add a css file from somewhere but facing little bit issue after then tried coding also but again failed.
so this is good method for me and finally i am able to do changes in my blog css.
Thanks !