How to Properly Add a CSS File to a WordPress Theme Using cPanel

Hosting Expert 2 min read

May 26, 2022 7:15 AM

For a WordPress theme developer, the first thing is to understand its structure; and after that, it comes to learning about adding scripts and stylesheets.

Most of the web designers make a mistake by creating a WordPress theme just like a simple HTML template.

You should understand WordPress is a platform based on PHP, and its themes are dynamic. Adding a CSS file isn’t as you do in a while creating a static website.

WordPress has its coding standard you need to follow. Enqueuing a CSS file properly can be a little bit of tricky for many web developers/designers.

In this tutorial, I am going to walk you through a step by step process, which explains the WordPress codex of adding a CSS file to a WordPress theme.

Assuming you have good WordPress hosting with WordPress set up, let’s get started!

Understand the wp_enqueue_style() Function

While developing a static HTML website, you can link the CSS file to the head, but it’s not the same case in a WordPress theme.

With a clear understanding of PHP and WordPress Codex, you should learn to use Theme functions.

Let’s start with the wp_enqueue_style() function, which is used to link a CSS file to your WordPress Theme. The default parameters are as follow.

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

Let me explain all those parameters.

$handle:- It’s a required field, which includes the name of the stylesheet
$src:- It’s also required to fill in. It’s the path of the stylesheet relative to the root directory
$deps:- It’s optional to create an array to control the stylesheet
$ver:- If you wish to control the version of the stylesheet, you can.
$media:- If you want to use the stylesheet for any media type, you can. Otherwise, no need.

You may have gotten some idea now. Only the first two options are necessary to fill in, the rest you can leave empty to pick up the default values.

Note: Now if the stylesheet name is “style” and it’s in the main theme name folder, the code will be as follow.

wp_enqueue_style( 'style', get_stylesheet_uri() );

But as you can see, you make it work; you need to create a WordPress function, which can link the file to the head in a proper way.

Let me show you the code.

functionnew_theme_css_file{
wp_enqueue_style( 'style', get_stylesheet_uri() );
}
add_action('wp_enqueue_scripts', 'new_theme_css_file' );

You may be wondering as if what’s the best place to add the function. Well, if you know a little bit about WordPress theme development, you may know that the functions.php file controls all the functions.

So, you have to open the file and add this function.

If you have noticed, there is a hook “add_action” with a parameter “wp_enqueue_scripts,” which is used to enqueue styles and scripts.

All you need to understand is the main wp_enqueue_style() function.

For newbie WordPress developers, it can be hard to grab such technical things, but once they learn WordPress Codex, everything goes smooth.

I Hope it’s Not So Difficult to Add a CSS File to a WordPress Theme

I remember when I started developing WordPress themes a few years ago, it was a disaster. When you keep practicing static websites and suddenly come to know about the dynamic nature of web 2.0, you may fret a bit.

Once you engage with WordPress codes, you may start feeling it interesting. Adding a CSS file is one of the basics for developing a WordPress theme from scratch.

Conclusion

Web development can be tricky, and it can scare newbie WordPress users. The guide is for the people who desire to start developing their custom WordPress theme.

Thank you for following this tutorial.