wp_enqueue_style( string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, string $media = 'all' )
Enqueue a CSS stylesheet.
Contents
Description
Registers the style if source provided (does NOT overwrite) and enqueues.
See also
Parameters
- $handle
-
(string) (Required) Name of the stylesheet. Should be unique.
- $src
-
(string) (Optional) Full URL of the stylesheet, or path of the stylesheet relative to the WordPress root directory.
Default value: ''
- $deps
-
(string[]) (Optional) An array of registered stylesheet handles this stylesheet depends on.
Default value: array()
- $ver
-
(string|bool|null) (Optional) 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 value: false
- $media
-
(string) (Optional) 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 value: 'all'
More Information
Usage
A safe way to add/enqueue a stylesheet file to the WordPress generated page.
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
Notes
- If you are going to use some jQuery UI features you might have to provide your own CSS file: WordPress core does not have a full jQuery UI theme!
- Default styles that are loaded via WordPress Core can be discerned via the source code on the default styles page.
Source
File: wp-includes/functions.wp-styles.php
function wp_enqueue_style( $handle, $src = '', $deps = array(), $ver = false, $media = 'all' ) { _wp_scripts_maybe_doing_it_wrong( __FUNCTION__, $handle ); $wp_styles = wp_styles(); if ( $src ) { $_handle = explode( '?', $handle ); $wp_styles->add( $_handle[0], $src, $deps, $ver, $media ); } $wp_styles->enqueue( $handle ); }
Expand full source code Collapse full source code View on Trac View on GitHub
Changelog
Version | Description |
---|---|
2.6.0 | Introduced. |
User Contributed Notes
You must log in before being able to contribute a note or feedback.
For proper versioning based on the file’s last modified time, you can use something similar to:
wp_enqueue_style('main-styles', get_template_directory_uri() . '/css/style.css', array(), filemtime(get_template_directory() . '/css/style.css'), false);
When the style.css file is updated on the server, WP will append the appropriate timestamp.
Note: You shouldn’t ever use time() as the 4th parameter or append it to the file, as this will break caching in almost all cases.
Top ↑
Feedback
Shouldn’t the last parameter be set to “true” Otherwise it uses the wordpress current version instead of the file’s date — By Squidy McSquid —
Using a Hook
Scripts and styles from a single action hook
Load stylesheet only on a plugin’s options page:
Expand full source codeCollapse full source code
How to remove
ver
in URL?If you want to remove the
ver
parameter in URL (for example, to intentionally cache the file), you pass innull
instead of false to remove that. For example:By doing that, you will get:
Enqueues should not be protocol specific, remove https. I have update code as below
Override all stylesheets in queue
Top ↑
Feedback
Brilliant – in hindsight it seems obvious, of course. But this is a very useful way of making sure that your plugin’s CSS can succesfully override any theme’s CSS, without having to resort to labeling your entire CSS ‘
!important
‘. One thing to consider though is that a value lower thanPHP_INT_MAX
would most likely suffice, leaving a possiblity for other plugins to in turn override your CSS. — By Bart Kuijper —Using this method you can enqueue a child theme’s style.css.
See Also:
wp_enqueue_script
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.Trac ticket: https://core.trac.wordpress.org/ticket/49742
This is a conditional loading of css file by page template (css will be loaded on on the pages with tamplate-name.php).
You can change the condition by another one.
The code should be used in your theme’s function.php.
Notice: The code works for child themes. If you want to use it in a parent theme replace
get_stylesheet_directory_uri()
withget_stylesheet_uri()
.There are functions that can remove the version numbers after they are added appropriately. look for
remove_query_arg
which can remove them and
script_loader_src
The hook that is often used to run this. A common symptom will be version numbers missing on all attached scripts and stylesheets.
For more info see https://stackoverflow.com/questions/36805009/wordpress-css-and-js-version-numbers-not-working
Load an IE-specific stylesheet:
Expand full source codeCollapse full source code
Found here (more code samples for version-specific IE stylesheets): https://gist.github.com/wpscholar/4947518#file-functions-php
If you wish to load small screen css only, using last parameter: