ClassicPress Plugin Development: Loading Front-End Stylesheets

ClassicPress PluginsThis post is part of the ClassicPress Plugin Development series in which I am going to look at both best practice for developing plugins and how I approach some requirements as well as some of the functions I commonly use.

Virtually all of the plugins I have written have output to the front end of a site, usually through use of shortcodes. As there is front end output, I have needed to create a stylesheet which means the plugin needs to load it. There is two ways in which stylesheets can be loaded in a plugin; I will cover them both, but will note first of all that I typically use the second approach. There is an argument that the first approach is the “correct” one.

The first thing to do when you are loading a stylesheet is to register it. This is done using the wp_register_style function which ClassicPress provides.

wp_register_style(string $handle, string|bool $src, string[] $deps = array(), string|bool|null $ver = false, string $media = 'all')

wp_register_style parameters

$handle (string) (Required) Name of the stylesheet. Should be unique. $src (string|bool) (Required) Full URL of the stylesheet, or path of the stylesheet relative to the ClassicPress root directory. If source is set to false, stylesheet is an alias of other stylesheets it depends on. $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 ClassicPress 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'

wp_register_style return value

(bool) Whether the style has been registered. True on success, false on failure.

Registering a stylesheet when initialising the plugin, using the init action, allows us to then enqueue the style sheet when it is needed. This is an example action hook and function (including vendor and plugin prefix) registering a stylesheet:

add_action('init', 'azrcrv_XXXX_register_styles');

function azrcrv_XXXX_register_styles() {
    wp_register_style('azrcrv-XXXX-style', plugins_url('assets/css/style.css', __FILE__));
}

With the stylesheet registered, we can then enqueue the stylesheet which will cause it to be loaded. Stylesheets can be loaded using the wp_enqueue_style ClassicPress function:

wp_enqueue_style(string $handle, string $src = '', string[] $deps = array(), string|bool|null $ver = false, string $media = 'all')

wp_register_style parameters

$handle (string) (Required) Name of the stylesheet. Should be unique. $src (string|bool) (Required) Full URL of the stylesheet, or path of the stylesheet relative to the ClassicPress root directory. If source is set to false, stylesheet is an alias of other stylesheets it depends on. $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 ClassicPress 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'

The optional parameters above do not need to be included when the stylesheet has first been registered. This means out call for the enqueue can be as simple as the below example using the wp_enqueue_scripts action hook and function (including vendor and plugin prefix):

add_action( 'wp_enqueue_scripts', 'azrcrv_XXXX_enqueue_styles' );

function azrcrv_XXXX_enqueue_styles() {
	wp_enqueue_style('azrcrv-XXXX-style');
}

The above outlines the first approach; the second approach is to not register the style and simply enqueue the stylesheet, which is the approach I have generally been taking. I have added this to my list of things to change to using the first method of registering and then enqueuing rather than just enqueuing. While this isn’t technically necessary to do, as enqueuing directly will work, it adds some flexibility with how the plugin can be interacted.

A script which has been registered before enqueuing can be deregistered without needing to make any changes to the code of the plugin. When it has been deregistered, enqueuing will not then load the script.

Click to show/hide the ClassicPress Plugin Development Series Index

What should we write about next?

If there is a topic which fits the typical ones of this site, which you would like to see me write about, please use the form, below, to submit your idea.

Your Name

Your Email

Suggested Topic

Suggestion Details

Leave a Reply

Your email address will not be published. Required fields are marked *