CSS is an integral part of any website being responsible for managing the layouts, styling and structure of a webpage. While CSS can be added anywhere in a webpage, it is usually added in the <head> of the website. The most straight forward way of adding CSS to a webpage is by adding it in <style> tags. We can also also add a CSS stylesheet by making an HTTP Request. Although these traditional methods are proven and reliable, WordPress offers another way to add CSS to a Web Page – using the wp_enqueue_style function. In this article, we are going to take a look at how we can add CSS in WordPress using wp_enqueue_style and the advantages it offers as opposed to other methods.
Adding CSS in a Web Page
Before we dive into WordPress, let’s discuss briefly how CSS is added in a traditional HTML page. If you are not interested in going through the basics, you can just scroll to the “Adding CSS to WordPress” section.
Like I mentioned earlier, there are two methods through which we can add CSS in a Web Page –the <style> tag and the <link> tag. Let’s see how this is done.
The <style> tag
Let us start by creating a directory titled “demo”. In this demo directory, we create an index.html file. This is our main HTML file which will load our web page in the browser. Go ahead and open this file in the browser. Currently, it’s empty. We are going to add content to this page.
Now, open the index.html in the Editor of your choice. I’m using VS Code but you can use whichever editor you like. Add the following code to the file –
|
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>My Title</title> </head> <body> <h1>Hello World</h1> </body> </html> |
Now open the file in the browser. I’m using Firefox but you can choose any one you like. Your screen should look something like this–
Pretty straight forward. Now we need to add some CSS. Add the following code in index.html just before </head> –
|
1 2 3 4 5 |
<style> h1 { color: olive; } </style> |
Save the file and refresh your browser. The color of text should be changed now.
So this is how CSS is added using <style> tag. This is also referred as “adding CSS inline”. We can add style tags anywhere inside the body to add CSS to a web page. Here, CSS is just part of the body and gets loaded along with the content of the page.
In this case, it’s just a single line of code so adding CSS using <style> tag was easy. But in real production environment, there are hundreds of lines of CSS. Adding this much CSS using <style> tags does not make sense. It would not only be not scalable but also very hard to maintain. In such as scenario, we create a new file and import it in our HTML file. Let’s see how it is done.
The <link> tag
Go ahead and remove the CSS we added in our index.html file. Create a new file in our demo folder and name it style.css. After creating the new file, paste the CSS we added earlier in index.html in the style.css file.
Go ahead and refresh the browser. You’ll notice goes back to being the black text. It’s because we need to import the CSS file in our index.html file. In order to do that, add the following code to our index.html file just before </head> –
|
1 |
<link rel="stylesheet" href="style.css"> |
Your index.html should be looking something like this-
|
1 2 3 4 5 6 7 8 9 10 |
<!DOCTYPE html> <html> <head> <title>My Title</title> <link rel="stylesheet" href="style.css"> </head> <body> <h1>Hello World</h1> </body> </html> |
Save the file and refresh the browser. You” notice the color gets changed. Under the hood, the <link> tag makes a GET request to the server to fetch the CSS file.
Note that we added the <link> tag in the <head> area of the page. We can also add it in the <body> tag and it will work. The main reason we add the CSS in <head> is that CSS should load before the content so that it appears as expected when loading. It is the best practice and should be followed almost every time.
So, we saw how to add CSS in a web page using the <style> tag and the <link> tag. Under the hood, WordPress is also using the same techniques to add CSS but the process has been made pretty straight forward. WordPress provides a nifty function wp_enqueue_style to load CSS. Let’s see how it’s done in WordPress.
To follow along further, I expect you to have a basic understanding of WordPress and its fundamentals.
Adding CSS to WordPress
Let’s consider we have a basic WordPress theme setup with s style.css, index.php and a functions.php file.For our article’s sake, let’s name our theme My Theme. This is how our theme directory looks like at the moment-
|
1 2 3 4 |
my-theme style.css index.php functions.php |
Go ahead and add the following code to style.css –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
/* Theme Name: My Theme Theme URI: https://www.indithemes.com Author: Author URI: https://indithemes.com Description: My Theme to add CSS to WordPress Version: 1.0 Tested up to: 6.6 Requires PHP: 7.0 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.en.html Text Domain: vanir */ |
Save the file. After saving, head over to Appearance > Themes and activate the theme. Right now, Our front-end will be an empty page. That’s because we have not added anything to our index.php file. Add the following code to index.php –
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
<?php /** * Our Main Index file */ ?> <!doctype html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="profile" href="https://gmpg.org/xfn/11"> <?php wp_head(); ?> </head> <body> <h1>Hello World</h2> <p>Lorem Ipsum Dolar Sit Amet</p> </body> </html> |
Go ahead and save the file and refresh the browser. It should look something like this –
Now we need to add some styling. Since we already have a CSS file (style.css), we are going to add our code to it. Go ahead and add the following code to style.css –
|
1 2 3 4 5 6 7 |
h1 { color: seagreen; } p { color: goldenrod; } |
After saving the file, head over to front-end and try refreshing the browser. You’ll notice that there is no change. No CSS has been applied. This is because we have not enqueued our style.css. So, basically enqueuing a file means to load it in a page. This is where we use our wp_enqueue_style function. Add the following code to functions.php –
|
1 2 3 4 5 6 7 8 9 |
<?php /** * Functions for our theme */ add_action('wp_enqueue_scripts', 'my_theme_enqueue_scripts'); function my_theme_enqueue_scripts() { wp_enqueue_style( 'my-theme-style', esc_url( get_stylesheet_uri() ), array(), '1.0', 'all' ); } |
Now, save the file and try reloading the browser. You’ll notice the CSS is being applied. The style.css has been added to the page.
Let’s go through the code. We use the wp_enqueue_scripts action hook to hook the function my_theme_enqueue_scripts . WordPress uses this hook to enqueue all the scripts and styles for the theme.
In the function, we make a call to wp_enqueue_style function passing it some parameters. Let’s go through them in order to get a sense of what is happening.
wp_enqueue_style parameters
The $path parameter
wp_enqueue_style( 'my-theme-style', ...
The first parameter, my-theme-style is the unique handle provided to the CSS file when enqueuing it. Keep in mind that this handle needs to be unique for every file. In case multiple files have the same handle, the file that is called the latest would take precedence over the one the earlier ones. Also, try to keep the handle unique enough so that it won’t collide with third-party plugins in future.
Good Practice
A good practice would be to include your theme’s slug in the handle.
The $src parameter
|
1 |
wp_enqueue_style( ... , esc_url( get_stylesheet_uri() ), ... ); |
The second parameter is the URL of the CSS file you are trying to enqueue. In our function above, we have used get_stylesheet_uri() function. This function returns the URL to style.css in theme’s root directory. WordPress provides with a couple of functions we can use here – get_template_directory_uri() and get_stylesheet_directory_uri() . These functions are used to get URLs to the different files in theme directory.
Good Practice
To provide an additional layer of security, it is usually recommended to wrap the whole URL with
esc_url() . This function escapes the parameter and ensures it is a valid URL.
The $deps parameter
|
1 |
wp_enqueue_style( ..., array(), .., ); |
The third parameter is the dependency array. In this array, we add handles of all the files that need to be loaded before WordPress loads this file. By default, it’s and empty array, which means the respective CSS is loaded in the order it was called.
Good Practice
This parameter is quite useful in case you are using certain features such as CSS variables where different files are utilizing code from another file. In that case, it’s best to add the main file (having CSS variables) as a dependency.
The $version parameter
|
1 |
wp_enqueue_style( ..., '1.0', ... ); |
The fourth parameter defines the version of the file. Let’s take a look at our CSS file being loaded in Inspect Element.
|
1 |
<link rel="stylesheet" id="my-theme-style-css" href="http://agnc/wp-content/themes/my-theme/style.css?ver=1.0" type="text/css" media="all"> |
As I mentioned earlier, WordPress essentially uses the <link> tag to load our CSS file. Observe the URL in the src attribute. It is succeeded by query tag ver=1.0 . This is exactly what we mentioned in our version parameter. WordPress appends the version to the URL. This way, WordPress keeps track of all CSS files and makes sure they are up to date. In case, the CSS file is a third-party resource such as Bootstrap library and we are sure that its not going to change, we can even remove the query tag by passing null as our version parameter.
Good Practice
As menioned by one of the users, the version attribute can be used effectively in busintg browser cache. By using
filemtime() PHP function, we essentially put the time the CSS file was modified in our version attribute making sure that the URL gets flushed every time the file has changed.
The $media parameter
|
1 |
wp_enqueue_style( ... , 'all' ); |
Our fifth parameter defines the media for which we are enqueuing our CSS file. It can be screen , print or all . The default value is all , which means we can use the CSS file for all media types. This parameter can accept all the media queries available to us in CSS such as (max-width: 992px) , (orientation: landscape) and (prefers-color-scheme: dark) .
Good Practice
We can optimize our website by ensuring that only a particular CSS file is loaded for specific media environment. For instance creating a separate CSS file mobile layouts.
Conclusion
So, in this article, we took a look at how a CSS file is added in a web page and how to add a CSS file in WordPress using the wp_enqueue_style function provided by WordPress. Also, we discussed in details the parameters accepted by the function and some of the best practices associated with using the function leading to a more secure and efficient enqueuing of CSS files.
Hope you got to learn something from this article. If you liked this article, you are sure to love my blog where I regularly post WordPress tutorials, tips, tricks and gotchas. Do check it out. Also, in case you are looking for help with website development, do reach out at support@indithemes.com. Let’s create something amazing together!
