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

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

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.

Check out these top 3 WordPress hosting services:

A2 Hosting
$2.99 /mo
Starting price
Visit A2 Hosting
Rating based on expert review
  • User Friendly
    4.5
  • Support
    4.0
  • Features
    4.5
  • Reliability
    4.8
  • Pricing
    4.0
HostArmada
$2.49 /mo
Starting price
Visit HostArmada
Rating based on expert review
  • User Friendly
    4.5
  • Support
    4.5
  • Features
    4.5
  • Reliability
    4.5
  • Pricing
    4.0
Hostinger
$2.99 /mo
Starting price
Visit Hostinger
Rating based on expert review
  • User Friendly
    4.7
  • Support
    4.7
  • Features
    4.8
  • Reliability
    4.8
  • Pricing
    4.7

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

This how-to guide teaches you the proper way to enqueue a JavaScript file to you
3 min read
Arvind Singh
Arvind Singh
Hosting Expert

How to Delete Extra Database Tables After Uninstalling a WordPress Plugin

Not all the plugins come with an option to delete all the settings
4 min read
Max Ostryzhko
Max Ostryzhko
Senior Web Developer, HostAdvice CTO

How to Edit the CSS for your WordPress Site Using the cPanel Hosting Control Panel

As you know, the design of a WordPress website is controlled by
4 min read
Avi Ilinsky
Avi Ilinsky
Hosting Expert

How To Edit Your WordPress Website's .htaccess file Using cPanel

There are many files and folders present in the WordPress direc
4 min read
Michael Levanduski
Michael Levanduski
Expert Hosting Writer & Tester
HostAdvice.com provides professional web hosting reviews fully independent of any other entity. Our reviews are unbiased, honest, and apply the same evaluation standards to all those reviewed. While monetary compensation is received from a few of the companies listed on this site, compensation of services and products have no influence on the direction or conclusions of our reviews. Nor does the compensation influence our rankings for certain host companies. This compensation covers account purchasing costs, testing costs and royalties paid to reviewers.
Click to go to the top of the page
Go To Top