wp_register_style()WP 2.6.0

Registers a CSS file in WordPress. After registration, the file can be added to the HTML document using the wp_enqueue_style() function.

You need to use this function to correctly enqueue CSS files in WordPress. For scripts, the corresponding function is wp_register_script().

This function only registers the file; to be included and output, it needs to be enqueued using wp_enqueue_style(). The file will be added to the <head> section of the document.

Enqueuing files this way, rather than directly in the code, is beneficial for future optimization. If all files are enqueued through the WP registration system, then plugins can be used to combine all styles into one and serve them in a compressed form, on the fly.

To call this function, use the events:

See the list of all registered styles by default in WordPress in the code of the function wp_default_styles()

No Hooks.

Returns

true|false. 3 returns true/false. Before this, it returned nothing.

Usage

wp_register_style( $handle, $src, $deps, $ver, $media );
$handle(string) (required)
The name of the stylesheet being enqueued (lowercase letters). Must be unique, as it will be used as an identifier in the system.
$src(string) (required)

URL to the stylesheet. For example, http://example.com/css/style.css. Do not hardcode the path; use functions: plugins_url() (for plugins) and get_template_directory_uri() (for themes).

External domains can be specified with an implicit protocol //notmyexample.com/css/style.css.

$deps(array)
An array of identifiers for other styles that the stylesheet depends on. The styles specified here will be enqueued before the current one.
Default: array()
$ver(string/bool)
A string defining the version of the styles. The version will be added to the end of the file link: ?ver=3.5.1. If not specified (set to false), the WordPress version will be used. If set to null, no version will be set.
Default: false
$media(string)

Sets the value of the media attribute. Media specifies the type of device for which the current style will work. Can be:

  • all
  • screen
  • handheld
  • print

See the full list here.
Default: 'all'

Examples

1

#1 When writing a plugin (outside a PHP class)

// register styles
add_action( 'wp', 'register_plugin_styles' ); // for front only
//add_action( 'init', 'register_plugin_styles' ); // front and admin
add_action( 'wp_enqueue_scripts', 'enqueue_plugin_styles' );

// register a styles file and add it to the queue
function register_plugin_styles() {

	wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );
}

// add styles file it to the queue
function enqueue_plugin_styles() {
	wp_enqueue_style( 'my-plugin' );
}

Or simply:

add_action( 'wp_enqueue_scripts', 'enqueue_plugin_styles' );

// add styles file it to the queue
function enqueue_plugin_styles() {

	wp_enqueue_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );
}
0

#2 When writing a plugin (inside a PHP class)

class my_plugin {

	function __construct() {

		// register styles
		add_action( 'wp_enqueue_scripts', [ $this, 'use_plugin_styles' ] );

		add_action( 'wp', [ $this, 'register_plugin_styles' ] ); // front only
		//add_action( 'init', [ $this, 'register_plugin_styles' ] ); // front and admin
	}

	// register a styles file and add it to the queue
	public function register_plugin_styles() {
		wp_register_style( 'my-plugin', plugins_url( 'my-plugin/css/plugin.css' ) );
	}

	public function use_plugin_styles(){
		wp_enqueue_style( 'my-plugin' );
	}
}
0

#3 Google Fonts

Note that Google Fonts has changed their URLs, so when embedding multiple font families only one will be loaded. The change is “fundamentally incompatible with how the rest of the world uses query variables and thus PHP itself”.

The fix is to set null on the $version parameter, which prevents the URL from being parsed and the additional font families lost.

Track ticket: https://core.trac.wordpress.org/ticket/49742

Notes

Changelog

Since 2.6.0 Introduced.
Since 4.3.0 A return value was added.

wp_register_style() code WP 6.9.1

function wp_register_style( $handle, $src, $deps = array(), $ver = false, $media = 'all' ) {
	_wp_scripts_maybe_doing_it_wrong( __FUNCTION__, $handle );

	return wp_styles()->add( $handle, $src, $deps, $ver, $media );
}