Add 'title' attribute to stylesheets with wp_enqueue_style()

Question

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?

Answer 1

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?

Answer 2

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 );

Answer 3

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.

Answer 4

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.