{"id":82983,"date":"2023-04-06T08:02:33","date_gmt":"2023-04-06T08:02:33","guid":{"rendered":"\/tutorials\/?p=82983"},"modified":"2025-04-26T02:57:37","modified_gmt":"2025-04-26T02:57:37","slug":"wp_enqueue_style","status":"publish","type":"post","link":"\/in\/tutorials\/wp_enqueue_style","title":{"rendered":"How to Enqueue CSS Stylesheet to WordPress Using wp_enqueue_style "},"content":{"rendered":"

When developing WordPress themes or plugins, it’s essential to enqueue stylesheets to make them load correctly.<\/p>

To do so, we recommend using the wp_enqueue_style() function. It’s a powerful tool for adding custom stylesheets to your WordPress theme or plugin. This function also ensures that stylesheets are loaded only when necessary and helps avoid conflicts with other plugins or themes.<\/p>

In this tutorial, we’ll explore how you can use the wp_enqueue_style()<\/strong> function to improve your WordPress site’s appearance and overall user experience.<\/p>

Download all in one WordPress cheat sheet<\/a><\/p>

\n\n\n\n\n\n\n<\/p>

How to Use wp_enqueue_style to Load CSS Stylesheets to WordPress<\/h2>

We’ll start with a few basic examples to help you better understand how the wp_enqueue_style()<\/strong> function works.<\/p>

How to Enqueue Main style.css Stylesheet<\/h3>

To enqueue the main theme style.css<\/strong> stylesheet, use the wp_enqueue_style() <\/strong>function in your theme’s functions.php file<\/a>.<\/p>

\n
\"The<\/a><\/figure><\/div>

Here is an example of how it looks:<\/p>

function my_theme_enqueue_styles() {\n    wp_enqueue_style( 'my_theme_style', get_stylesheet_uri() );\n}\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/pre>
In the code, my-theme-style<\/strong> is a unique name for the stylesheet you are enqueueing, while the get_stylesheet_uri()<\/a> function handles the URL of the main theme’s style.css<\/strong> file.<\/p>
\n
\"The<\/a><\/figure><\/div>
Next, the wp_enqueue_style() <\/strong>function registers the style and adds it to the queue. Finally, the add_action()<\/a> function adds your custom my_theme_enqueue_styles()<\/strong> function to the wp_enqueue_scripts<\/a> hook, which will ensure that the stylesheet is enqueued properly.<\/p>
How to Enqueue Other Stylesheets<\/h3>
You can also use the wp_enqueue_style()<\/strong> function to enqueue additional styles on top of the main stylesheet. For example, add extra styling options in a separate file.<\/p>
As for the code, you can reuse most of it from the previous example with a few extra additions:<\/p>
function my_theme_enqueue_styles() {\n    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );\n wp_enqueue_style('my-theme-extra-style', get_theme_file_uri('extra.css') );\n}\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );<\/pre>
In this method, we’ve used the get_theme_file_uri()<\/a> function, which returns the file’s URL in the current theme’s directory. In our case, it’s extra.css<\/strong>. This way, the function will enqueue the main stylesheet first and then move to the additional styles.<\/p>
How to Load External Stylesheets to WordPress<\/h3>
It’s possible to use the wp_enqueue_style()<\/strong> function to enqueue a stylesheet from an external source. The process can be beneficial if you want to use custom fonts or a stylesheet hosted on a content delivery network (CDN).<\/p>
The code is very similar to previous examples:<\/p>
function theme_files() { \n    wp_enqueue_style('theme_custom', 'INSERT URL'); \n} \n\nadd_action('wp_enqueue_scripts', 'theme_files');<\/pre>
Remember to replace the INSERT URL<\/strong> part with an actual stylesheet URL.<\/p>
How to Add Script Files to WordPress Using wp_enqueue_script<\/h3>
WordPress has a built-in function called wp_enqueue_script()<\/a> that enables you to enqueue JavaScript or similar scripts. Add the following code to your theme’s functions.php<\/strong> file:<\/p>
function theme_scripts() {\n    wp_enqueue_script( 'my-script', get_template_directory_uri() . '\/js\/my-script.js', array(), '1.0', true );\n}\nadd_action( 'wp_enqueue_scripts', 'theme_scripts' );<\/pre>
Note that this function uses more parameters:<\/p>