Right now I'm serving up my own custom stylesheet.

// register main stylesheet
wp_register_style( 'custom-stylesheet', get_stylesheet_directory_uri() . '/library/css/main.css', array(), '', 'all' );

It outputs:

<link rel='stylesheet' id='custom-stylesheet-css'  href='http://localhost/wp-content/themes/custom-theme/library/css/main.css' type='text/css' media='all' />

Is there a way to remove the id='custom-stylesheet-css part of that stylesheet?? Is there a reason that they add an id attribute?

  • Honestly, and respectfully, that id is probably not necessary, but nor is it important enough to bother with. Can you tell me why this is an issue?
    – s_ha_dum
    Apr 8 '14 at 23:55
  • I would like to understand why they include it there. Wasn't sure if there was an easy way to do it. I'm just a neat freak ;)
    – cusejuice
    Apr 8 '14 at 23:59
  • @s_ha_dum mod_pagespeed is not able to combine css files if they have defined different ids. blog.codecentric.de/en/2011/10/…
    – walterra
    Oct 31 '14 at 15:33

You can filter style_loader_tag. You get the HTML element and the handle as arguments.


add_filter( 'style_loader_tag', function( $html, $handle ) {

    if ( 'custom-stylesheet' !== $handle )
        return $html;

    return str_replace( " id='$handle-css'", '', $html );
}, 10, 2 );

But really, I would not waste processing time for that. The id exists to make the element easier to access per JavaScript. It doesn’t hurt if you don’t need it.


Try this in your functions.php:

add_filter("style_loader_tag", function($tag){
    return str_replace("id='custom-stylesheet-css' " ,'',  $tag);

Nice and simple.

  • 1
    How is your answer different than mine, except that it changes id attributes without knowing if they’re needed?
    – fuxia
    Apr 9 '14 at 5:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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