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?

up vote 4 down vote accepted

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?

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 looked into the style_loader_tag filter. +1 for mentioning it here so others will know to look for it. The problem though is that the filter knows nothing about the tag itself. So how do you generate the correct title attribute (unless it can be programmatically determined from something else, like the ID or the href)? Assuming that you want an arbitrary title, the filter doesn't help. – Tom Auger Nov 30 '11 at 16:11
  • By filtering through the HTML tag and using a simple string replace, see my answer. – Remzi Cavdar Nov 24 at 8:38

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.

  • Yeesh. How very DIY of you! Thanks for posting your solution. – Tom Auger Jul 11 '13 at 18:49

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

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.