How to add and use CSS files in WordPress

It is very easy. If you want to use CSS files in your own Word Press theme, let’s start with style.css. This file is required when building WP theme and it must be put in root directory of the theme.

Why it is so important? At style.css you must put at least name of the theme. You can also add authors info, license info etc. You can also add another CSS files here! So, if you have style.css file, you can use:

@Import directive

You can use @Import directive in style.css to include your own CSS files. It is pretty simple (one thing you must remember – it is using relative paths), just put something like that:

Of course there are always pros and cons of the method. Pros – it is very easy to use and it works well without any knowledge about CSS path, as we are using relative ones. Cons – those files will be always included and it may make some mess with your page while mingle with other plug-ins, WP css files etc. And it is a bit slower – you have to add back end and front end files as well.

Link markup in HTML code

You can use old and well known link markup tag. Simply put something like that:

in HTML of your header. Notice, that I didn’t use type=”text/css” – it is not required when using HTML5. And one more thing – the path. We can’t use relative paths here, so it is smart to use something like

Please notice, that this function won’t display ending /, so you have to add it yourself. For example:

Of course I omitted the rest of the section. This method, which is obvious, has its own pros and cons. Pros – we can (using different files) affect only selected pages. Cons – we can not always avoid loading unnecessary file or files. Moreover, 3rd party plug-ins can’t affect it as well. Even if we are the authors!

The proper way.

That is right. Both previous methods aren’t very good. Word Press has something built in store. This is wp_enqueue_style.

Declaration

$handle – name of the CSS file. You can also add ?something to add it as a query string. Sometimes it can be useful, but it’s rather a niche. This parameter is required.

$src – URL to the stylesheet. This parameter, which may seem surprising, is optional. Why? Because we can register stylesheet earlier using wp_register_style function for future use. As we don’t know this function yet, simply add URL. Of course you should use bloginfo(‘template_directory’) as a first part of the URL if you want to add theme stylesheet.

$deps – dependencies. If your style depends on any other style or styles, you have to put its names here in an array. If not, you can use false, or just omit it.

$ver – stylesheet version if has one. The default value is false.

$media – you can specif the media for which this stylesheet has been defined. Recognized media types are ‘all‘, ‘braille‘, ‘embossed‘, ‘handheld‘, ‘print‘, ‘projection‘, ‘screen‘, ‘speech‘, ‘tty‘ and ‘tv‘.

Example 1

Simply add style.css file (from the root directory of the theme):

Example 2

Add another CSS file, let’s assume the file is in /assets/css/ directory of our theme.

Notice that I used get_template_directory_uri() function. This function will always return path to the them but when you are in child theme – it will return parent theme folder! If you want to use child theme folder, use get_stylesheet_directory_uri() instead.

Very important

It is very important where and when we will call wp_enqueue_style function. To make sure we are doing it properly, we have to use wp_enqueue_scripts action.

Final example

You can use code below directly in functions.php file:

When you are using Object Oriented Programming, write something like this: