How to add an attribute in stylesheet by wp_enqueue_style
Do you find it difficult to add custom attributes like the title to a link tag using wp_enqueue_styles in WordPress?
wp_enqueue_styles registers only a stylesheet without including extra attributes and its parameters don’t pass link attributes.
The properties of link tags can be used to serve a specific task like specifying a media type for setting out how to render a page on various devices.
That objective may not be achieved if the stylesheet was added by wp_enqueue_styles.
However, there is a way to use wp_enqueue_styles to add attributes to a stylesheet.
Attribute can be added to wp_enqueue_styles using global WordPress variable $wp_styles. $wp_styles should call add_data function, which receives three parameters. The first parameter defines a handle, the second parameter is an attribute and the last parameter is a value of a provided attribute.
This explanation can be summarized in the following WordPress code.
Shortcode
function custom_attribute(){
global $wp_styles;
$wp_styles->add_data(“customAttribute”, “media”, “print”);
}
add_action(‘wp_enqueue_styles’, ‘custom_attribute’);
Write this shortcode in the functions.php file.
Let me explain briefly the work of each object and function from the given example.
Variable $wp_styles
$wp_styles is an instance for the wordpress class that enqueue and order a stylesheet attributes.
That class is WP_Styles.
WP_Styles extends WP_Dependencies, the class that offers twelve methods.
The shortcode in the example above uses the add_data method to register the attribute in the stylesheets.
To include custom attributes, a function should receive three string parameters.
Without passing three arguments, the link tag can output something else.
Since add_data can be used to register a new stylesheet.
WordPress developer page has a deep explanation on WP_Styles, it is good to check it.
add_data Function usage.
add_data method adds the custom attribute to a specific stylesheet link tag.
The function requires a unique id that was used to register a style. This id is known as a handle.
In this example, the handle is customAttribute.
add_data will look for all registered styles handle, if it finds customAttribute it returns a boolean value, and then it adds the provided attribute.
The second parameter of the add_data method specifies the attribute to be included in the link tag.
The function second parameter is the link media tag.
Actually, here I use the property media to optimize the page for printing.
Therefore, I set the third parameter to a string value, which is “print”
add_action hook usage
To execute the function that was added in the functions.php, a Boolean function add_action will require two arguments.
The first argument is the WordPress tag representing the name of the action to be implemented.
The action to be hooked for the case of adding attributes to the stylesheet is wp_enqueue_styles.
The second argument is the name of a function to be executed.
The function name in the shortcode is custom_attribute.
Therefore, the second parameter value that add_action takes in is custom_attribute.
These two parameters are strings.
Things to note
Use $wp_styles object after registering a style.
So, step number one is to enqueue a stylesheet using wp_enqueue_styles.
I have covered this in the post that instructs how to add css to wp_head
Remember WP_Dependencies method add_data first parameter is a handle.
Therefore, you should specify a handle of the stylesheet you want to add the attribute to.
Using style_loader_tag to add attribute.
style_loader_tag is an alternative hook to wp_enqueue_styles to include attributes to a stylesheet.
The style_loader_tag enables the apply_filter function to filter out link tag properties.
Using this hook doesn’t need any function of WP_Dependencies class to attach the attribute.
Instead, a str_replace will be used to add the attribute by replacing certain strings.
This is what I mean.
1.function AddingCustomAttribute($html, $handle){
2.if($handle == ‘customAttribute’){
3.$linkTagAttribute = str_replace(‘rel= “stylesheet” ’ , ‘ rel= “stylesheet” id= “the-id” title= “this is a title in the stylesheet”’, $html);
4.return $linkTagAttribute;
5.}
6.return $html;
7.}
apply_filters(‘style_loader_tag’ , ‘AddingCustomAttribute’);
This code should be written in functions.php.
In this shortcode, there are few new features that I haven’t applied in the first example,
These features include.
Comparing the handles
The function addingCustomAttribue will retrieve all the registered handles.
So, you should provide the handle of the stylesheet that you want to put on the attribute.
Hence, Line-2 compare if the handle retrieved is equal to customAttribute.
The link tag containing customAttribute id is going to be used.
Parameters $handle and $html
I have mentioned the handle many times in this article but not the $html variable.
WordPress style_loader_tag page says $html is the string of a link tag.
This means $htm returns html stylesheet tag like this <link id=”customAttribute-css” rel=”stylesheet” href=”style.css”>
str_replace usage <link id=”customAttribute-css” rel=”stylesheet” href=”style.css”>
str_replace replaces one string with another of the given subject.
In the example, a function receives three.
Fist parameter is a string you want to omit, which is rel= “stylesheet”
The second parameter is a string to replace rel= “stylesheet”. That string value is rel= “stylesheet” id= “the-id” title= “this is a title in the stylesheet”
The last parameter is a string to be searched (subject).
The parameter is represented by $html, which holds a link tag stylesheet like this one <link id=”customAttribute-css” rel=”stylesheet” href=”style.css”>.
Wrap-up
The simple solution to output link tag with attribute by wp_enqueue_style is to use global variable $wp_styles.
The variable will use WP_Styles methods as the example has demonstrated.
Though you can use the style_loader_tag tag to achieve the attachment of attribute in the style.
