wp_register_style()
Register a CSS stylesheet.
No Hooks.
Return
true|false
. Whether the style has been registered. True on success, false on failure.
Usage
wp_register_style( $handle, $src, $deps, $ver, $media );
- $handle(string) (required)
- Name of the stylesheet. Should be unique.
- $src(string|false) (required)
- Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory. If source is set to false, stylesheet is an alias of other stylesheets it depends on.
- $deps(string[])
- An array of registered stylesheet handles this stylesheet depends on.
Default: empty array - $ver(string|true|false|null)
- String specifying stylesheet version number, if it has one, which is added to the URL as a query string for cache busting purposes. If version is set to false, a version number is automatically added equal to current installed WordPress version. If set to null, no version is added.
Default: false - $media(string)
- The media for which this stylesheet has been defined. Accepts media types like 'all', 'print' and 'screen', or media queries like '(orientation: portrait)' and '(max-width: 640px)'.
Default: 'all'
Examples
#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' ) ); }
#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' ); } }
#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() wp register style code WP 6.6.2
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 ); }