When growing WordPress themes or plugins, it’s important to enqueue stylesheets to make them load appropriately.

To take action, we suggest utilizing the wp_enqueue_style() operate. It’s a strong instrument for including {custom} stylesheets to your WordPress theme or plugin. This operate additionally ensures that stylesheets are loaded solely when crucial and helps keep away from conflicts with different plugins or themes.

On this tutorial, we’ll discover how you need to use the wp_enqueue_style() operate to enhance your WordPress website’s look and total person expertise.

Find out how to Use wp_enqueue_style to Load CSS Stylesheets to WordPress

We’ll begin with just a few primary examples that can assist you higher perceive how the wp_enqueue_style() operate works.

Find out how to Enqueue Predominant model.css Stylesheet

To enqueue the primary theme model.css stylesheet, use the wp_enqueue_style() operate in your theme’s capabilities.php file.

Right here is an instance of the way it appears:

operate my_theme_enqueue_styles() {

operate my_theme_enqueue_styles() {
    wp_enqueue_style( 'my_theme_style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Within the code, my-theme-style is a novel identify for the stylesheet you might be enqueueing, whereas the get_stylesheet_uri() operate handles the URL of the primary theme’s model.css file.

Subsequent, the wp_enqueue_style() operate registers the model and provides it to the queue. Lastly, the add_action() operate provides your {custom} my_theme_enqueue_styles() operate to the wp_enqueue_scripts hook, which is able to make sure that the stylesheet is enqueued correctly.

Find out how to Enqueue Different Stylesheets

It’s also possible to use the wp_enqueue_style() operate to enqueue further types on high of the primary stylesheet. For instance, add further styling choices in a separate file.

As for the code, you may reuse most of it from the earlier instance with just a few further additions:

operate my_theme_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
 wp_enqueue_style('my-theme-extra-style', get_theme_file_uri('further.css') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

On this methodology, we’ve used the get_theme_file_uri() operate, which returns the file’s URL within the present theme’s listing. In our case, it’s further.css. This fashion, the operate will enqueue the primary stylesheet first after which transfer to the extra types.

Find out how to Load Exterior Stylesheets to WordPress

It’s doable to make use of the wp_enqueue_style() operate to enqueue a stylesheet from an exterior supply. The method may be helpful if you wish to use {custom} fonts or a stylesheet hosted on a content material supply community (CDN).

The code is similar to earlier examples:

operate theme_files() { 
    wp_enqueue_style('theme_custom', 'INSERT URL'); 
} 

add_action('wp_enqueue_scripts', 'theme_files');

Bear in mind to interchange the INSERT URL half with an precise stylesheet URL.

Find out how to Add Script Information to WordPress Utilizing wp_enqueuing_style

WordPress has a built-in operate referred to as wp_enqueue_script() that allows you to enqueue JavaScript or comparable scripts. Add the next code to your theme’s capabilities.php file:

operate theme_scripts() {
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/my-script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'theme_scripts' );

Notice that this operate makes use of extra parameters:

• my-script – the identify of your script. You may select any identify you need.
• /js/my-script.js – location of your script. On this case, it’s within the js listing of the WordPress theme.
• array() – defines dependencies your script might have.
• 1.0 – the stylesheet model quantity.
• true – determines whether or not to load the script within the footer.

Helpful Examples of wp_enqueue_style

Try just a few sensible use circumstances of the wp_enqueue_style() operate to enhance your WordPress website.

Loading CSS Solely on Particular Pages

Loading CSS on particular pages can present a number of advantages for a WordPress web site:

• Sooner web page load instances – if you load CSS solely on the pages the place it’s crucial, you keep away from having pointless code. It will enhance your total website’s velocity.
• Simpler upkeep – you may change CSS recordsdata with out affecting different pages.

Within the instance beneath, we’ll register and cargo CSS to the Contact Us web page with the assistance of the wp_enqueue_scripts WordPress hook and the is_page() operate:

<?php
add_action('init', 'register_custom_styles');
operate register_custom_styles() {
    wp_register_style( 'custom-design', '/wp-content/design.css' );
}
add_action( 'wp_enqueue_scripts', 'conditionally_enqueue_styles_scripts' );
operate conditionally_enqueue_styles_scripts() {
    if ( is_page('contactus') ) {
        wp_enqueue_style( 'custom-design' );
    }
}
?>

By shifting CSS to the underside of the web page, the browser can prioritize loading the HTML and different necessary assets first. Because of this, loading CSS within the footer improves your web page load time.

The easiest way to load CSS within the footer is with the get_footer() WordPress hook:

<?php
operate footer_style() {
    wp_enqueue_style('custom-design', '/wp-content/design.css');
};
add_action( 'get_footer', 'footer_style' );
?>

Keep in mind that loading CSS within the footer could cause rendering points and make the web page look damaged or unstyled. For that reason, load an important CSS within the head part first, then transfer to the footer half.

Including Dynamic Inline Kinds

Dynamic inline types can help you add {custom} types to particular person parts on an online web page. The simplest manner so as to add inline types is with the wp_add_inline_style() operate, which hundreds them after a particular CSS file.

Within the following instance, we’ll mix each the wp_enqueue_style() and wp_add_inline_style() capabilities to use model from the design.css file and daring headlines:

?php
operate theme_style() {
	wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/wp-content/design.css' );
	$bold_headlines = get_theme_mod( 'headline-font-weight' ); 
	$inline_style=".headline { font-weight: " . $bold_headlines . '; }';
	wp_add_inline_style( 'custom-style', $inline_style );
}
add_action( 'wp_enqueue_scripts', 'theme_style' );
?>

Take into account that inline model will solely work after the design.css is correctly enqueued.

Checking the Stylesheet’s Enqueue Standing

Use the wp_style_is() operate if you’d like extra details about the stylesheet state. This operate can verify whether or not a CSS stylesheet file is within the queue, enqueued, registered, or able to be displayed.

<?php
operate check_styles() {
	if( wp_style_is( 'foremost' ) {
    
		wp_enqueue_style( 'my-theme', '/custom-theme.css' );
	}
}
add_action( 'wp_enqueue_scripts', 'check_styles' );
?>

Inserting Metadata into the Stylesheet

It’s also possible to use the wp_enqueue_style operate with the next code snippet to enqueue a CSS stylesheet with title metadata:

<?php
operate theme_extra_styles() {
	wp_enqueue_style( 'add-metadata', '/wp-content/design.css' );
	wp_style_add_data( 'add-metadata', 'title', 'My Superior Title' );
	}
add_action( 'wp_enqueue_scripts', 'theme_extra_styles' );
?>

On this instance, we’ve used the wp_style_add_data() operate and added a title to the CSS stylesheet.

Deregistering Type Information

It’s necessary to deregister CSS-style recordsdata you now not use. When a number of plugins or themes enqueue the identical model file, it might result in conflicts and points on the web site.

The next code will deregister and dequeue a particular model and change it with a brand new stylesheet:

add_action( 'wp_enqueue_scripts', 'remove_default_stylesheet', 20 );
operate remove_default_stylesheet() {
    wp_dequeue_style( 'original-enqueue-stylesheet-handle' );
    wp_deregister_style( 'original-register-stylesheet-handle' );

    wp_register_style( 'new-style', get_stylesheet_directory_uri() . '/new.css', false, '1.0.0' ); 
    wp_enqueue_style( 'new-style' );
}

Conclusion

The wp_enqueue_style() operate is an important a part of WordPress growth. It gives a simple and environment friendly strategy to load stylesheets to your web site.

On this tutorial, we’ve coated the wp_enqueue_style() operate and supplied some examples of how you need to use it to customise your web site’s look and enhance its velocity.

We hope you discovered this tutorial helpful and can be capable to use the wp_enqueue_style() operate along with your WordPress initiatives efficiently. In case you have any questions or insights, check with our WordPress guide or go away a remark beneath.