Using WordPress ‘wp_enqueue_style()’ PHP function

by

The wp_enqueue_style() WordPress PHP function registers and enqueues a CSS stylesheet for your WordPress site.

Usage

wp_enqueue_style($handle, $src, $deps, $ver, $media);

Parameters

  • $handle (string, required) – Unique name for the stylesheet.
  • $src (string, optional) – Full URL or relative path to the stylesheet. Default: ”.
  • $deps (string[], optional) – Array of registered stylesheet handles that this stylesheet depends on. Default: array().
  • $ver (string|bool|null, optional) – Version number for cache busting, or automatically use WordPress version if set to false. No version added if set to null. Default: false.
  • $media (string, optional) – The media type or media query for which the stylesheet is defined. Default: ‘all’.

More information

See WordPress Developer Resources: wp_enqueue_style()

Examples

Enqueue a custom stylesheet

Load a custom stylesheet named ‘my-theme-styles’ located in your theme’s directory.

function my_theme_enqueue_styles() {
    wp_enqueue_style('my-theme-styles', get_stylesheet_directory_uri() . '/style.css');
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

Enqueue a Google Font

Add a Google Font stylesheet to your WordPress site.

function add_google_fonts() {
    wp_enqueue_style('google-fonts', 'https://fonts.googleapis.com/css?family=Roboto&display=swap');
}
add_action('wp_enqueue_scripts', 'add_google_fonts');

Enqueue a stylesheet with dependencies

Load a custom stylesheet that depends on other registered styles.

function enqueue_dependent_styles() {
    wp_enqueue_style('my-custom-styles', get_template_directory_uri() . '/custom.css', array('bootstrap', 'font-awesome'));
}
add_action('wp_enqueue_scripts', 'enqueue_dependent_styles');

Enqueue a print stylesheet

Load a print-specific stylesheet.

function enqueue_print_styles() {
    wp_enqueue_style('print-styles', get_stylesheet_directory_uri() . '/print.css', array(), null, 'print');
}
add_action('wp_enqueue_scripts', 'enqueue_print_styles');

Enqueue a stylesheet with a specific version

Load a custom stylesheet with a specified version number.

function enqueue_versioned_styles() {
    wp_enqueue_style('versioned-styles', get_stylesheet_directory_uri() . '/versioned.css', array(), '1.0.0');
}
add_action('wp_enqueue_scripts', 'enqueue_versioned_styles');