Read below if you want to start from where I left off in core. But the basic question is: I need to add a "title" attribute to my stylesheets and wp_enqueue_style() doesn't allow for that parameter, as far as I can tell. Other than a hard embed, are there any ways WordPress allows us to add the title to a stylesheet?
In digging around core I notice that there's a $title variable that can be set using $style->extra['title'].
$title = isset($this->registered[$handle]->extra['title']) ? "title='" . esc_attr( $this->registered[$handle]->extra['title'] ) . "'" : '';
(class.wp-styles.php)
And $title also figures in the filter that is applied when you enqueue a stylesheet. So how can you set that 'extra' array within the style object?
Read below if you want to start from where I left off in core. But the basic question is: I need to add a "title" attribute to my stylesheets and wp_enqueue_style() doesn't allow for that parameter, as far as I can tell. Other than a hard embed, are there any ways WordPress allows us to add the title to a stylesheet?
In digging around core I notice that there's a $title variable that can be set using $style->extra['title'].
$title = isset($this->registered[$handle]->extra['title']) ? "title='" . esc_attr( $this->registered[$handle]->extra['title'] ) . "'" : '';
(class.wp-styles.php)
And $title also figures in the filter that is applied when you enqueue a stylesheet. So how can you set that 'extra' array within the style object?
Okay, here's where I'm at with a solution.
wp_enqueue_style( 'my-handle', 'mystyle.css' );
global $wp_styles;
$wp_styles->add_data( 'my-handle', 'title', 'my_stylesheet_title' );
Don't like using the global. Is there something better?
It seems to me that you could also use style_loader_tag, see my other answer for a more detailed take on both style_loader_tag and script_loader_tag API:
How to add crossorigin and integrity to wp_register_style? (Font Awesome 5)
style_loader_tag is an official WordPress API, see the documentation: https://developer.wordpress.org/reference/hooks/style_loader_tag/
apply_filters( 'style_loader_tag', $html, $handle, $href, $media )
Filters the HTML link tag of an enqueued style.
First, enqueue your stylesheets
function add_styles() {
// Example loading external stylesheet, could be used in both a theme and/or plugin
wp_enqueue_style( 'font-awesome-5', 'https://use.fontawesome.com/releases/v5.5.0/css/all.css', array(), null );
// Example theme
wp_enqueue_style( 'font-awesome-5', get_theme_file_uri( '/assets/css/fontawesome.min.css' ), array(), null );
// Example plugin
wp_enqueue_style( 'font-awesome-5', plugins_url( '/assets/css/fontawesome.min.css', __FILE__ ), array(), null );
};
add_action( 'wp_enqueue_scripts', 'add_styles' );
Second, use style_loader_tag
Than use style_loader_tag to add your title to the specific stylesheet.
function add_stylesheet_attributes( $html, $handle ) {
if ( 'font-awesome-5' === $handle ) {
return str_replace( "rel='stylesheet'", "rel='stylesheet' title='something'", $html );
}
return $html;
}
add_filter( 'style_loader_tag', 'add_stylesheet_attributes', 10, 2 );
Looking at the file you mentioned in your post class.wp-styles.php, you have the following line, $tag .= apply_filters( 'style_loader_tag', "<link rel='$rel' id='$handle-css' $title href='$href' type='text/css' media='$media' />\n", $handle );. You can therefore hook into the "style_loader_tag" filter and add in the title tag. I like your answer as well, but am unsure as to which one would be better, as I am not sure if there are any issues with using the global or not.
I used the way with style_loader_tag. Thereby I missused the handle to transport my additional title-tag. This looks like the following:
// Enqueue style
wp_enqueue_style( 'twentytwelve-style-Xstyle1', get_stylesheet_uri() );
// my filter function
add_filter('style_loader_tag', 'my_style_loader_tag_function');
function my_style_loader_tag_function($tag){
$customXML = new SimpleXMLElement($tag);
$id = (string)$customXML->attributes()->id;
$values = explode('-X',$id);
if(!isset($values[1])){
return $tag;
}
$customXML->attributes()->id = $values[0].'-css';
$title = str_replace('-css', '', $values[1]);
$customXML->addAttribute('title', $title);
$dom = dom_import_simplexml($customXML);
return $dom->ownerDocument->saveXML($dom->ownerDocument->documentElement);
}
So I look for -X and all after that string is my title attribute.
You can use wp_style_add_data( 'handler', $attr, 'val' )
The docs say it only accepts the following $attr:
Accepts conditional, rtl, suffix, alt, title and path