How to add custom stylesheets to WordPress using wp_enqueue_style

The WordPress wp_enqueue_style function is used to enqueue a CSS file into a WordPress theme or plugin. This function can be useful for adding custom stylesheets to a WordPress site, allowing for greater control over the design and layout of the site.

By using wp_enqueue_style, developers can ensure that their stylesheets are loaded in the correct order and only when needed, reducing page load times and potential conflicts with other stylesheets. This function also allows for easy versioning and caching of stylesheets, improving site performance.

wp_enqueue_style is a valuable tool for managing and organizing CSS files within a WordPress theme or plugin, helping to maintain a clean and efficient codebase.

Parameters Accepted by wp_enqueue_style Function

The wp_enqueue_style function accepts the following parameters:

  • $handle (string, required): Name of the stylesheet. Should be unique.
  • $src (string, optional, default value: ”): Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.
  • $deps (string[], optional, default value: array()): An array of registered stylesheet handles this stylesheet depends on.
  • $ver (string|bool|null, optional, default value: false): String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache busting purposes.
  • $media (string, optional, default value: ‘all’): The media for which this stylesheet has been defined. Default ‘all’. Accepts media types like ‘all’, ‘print’ and ‘screen’, or media queries like ‘(orientation: portrait)’ and ‘(max-width: 640px)’

The function does not return a value.

Examples

How to enqueue a style in WordPress

Here’s an example of how to use the wp_enqueue_style function to enqueue a stylesheet in WordPress:

function my_theme_styles() {
 wp_enqueue_style( 'my-style', get_template_directory_uri() . '/style.css', array(), '1.0', 'all' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_styles' );

This code snippet defines a function my_theme_styles that uses the wp_enqueue_style function to enqueue a stylesheet named ‘my-style’. The stylesheet is located in the theme’s directory and is named ‘style.css’. It has no dependencies, a version number of ‘1.0’, and is intended for use on all devices.

How to conditionally enqueue a style in WordPress

Here’s an example of how to conditionally enqueue a stylesheet in WordPress using the wp_enqueue_style function:

function my_conditional_styles() {
 if ( is_front_page() ) {
 wp_enqueue_style( 'front-page-style', get_template_directory_uri() . '/front-page.css', array(), '1.0', 'all' );
 }
}
add_action( 'wp_enqueue_scripts', 'my_conditional_styles' );

This code snippet defines a function my_conditional_styles that uses the wp_enqueue_style function to enqueue a stylesheet named ‘front-page-style’ only if the current page is the front page. The stylesheet is located in the theme’s directory and is named ‘front-page.css’. It has no dependencies, a version number of ‘1.0’, and is intended for use on all devices.

How to enqueue a Google Fonts style in WordPress

Here’s an example of how to enqueue a Google Fonts stylesheet in WordPress using the wp_enqueue_style function:

function my_google_fonts() {
 wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Roboto:400,700', array(), null, 'all' );
}
add_action( 'wp_enqueue_scripts', 'my_google_fonts' );

This code snippet defines a function my_google_fonts that uses the wp_enqueue_style function to enqueue a Google Fonts stylesheet named ‘google-fonts’. The URL of the Google Fonts stylesheet is provided as the second parameter. It has no dependencies, no version number, and is intended for use on all devices.

Conclusion

In conclusion, the wp_enqueue_style function is a valuable utility for adding stylesheets to your WordPress site in a structured and efficient manner. By properly enqueuing styles, you can ensure that your site’s design remains consistent and organized, while also improving performance by only loading the necessary stylesheets when and where they are needed. Additionally, the ability to add dependencies, version numbers, and conditionally load styles based on specific criteria provides a high level of flexibility and control. By utilizing the wp_enqueue_style function, WordPress developers can effectively manage their site’s stylesheets and enhance the overall user experience.

Related WordPress Functions

in WordPress Functions