Remove id attribute from stylesheet link

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:

Read More
<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?

Related posts

Leave a Reply

2 comments

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

    Example

    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.

  2. Try this in your functions.php:

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

    Nice and simple.