WordPress: Remove the type attribute from link and script tags

Originally posted on my website on December 2th 2019

Introduction

If you ever tried to test your WordPress website with The W3C Markup Validation Service you probably got this warning "The type attribute is unnecessary for JavaScript/style resources". This is because the type attribute is no longer mandatory for link and script tags in Html5 markup but WordPress persists in adding it if you use the wp_enqueue_style and wp_enqueue_script functions.

There are two ways to remove the type attribute from your link and script tags depending on your version of WordPress. I'll show you both ways below.

Pre WordPress 5.3

In versions below WordPress 5.3 we have to manually remove the attributes by changing the tags them self like shown below.

function optimize_style_tags( $html , $handle , $href , $media ) {

    return "<link rel='stylesheet' id='{$handle}' href='{$href}' media='{$media}' />" . "\n";

}

add_filter('style_loader_tag', 'optimize_style_tags', 10, 4);


function optimize_script_tags( $tag , $handle , $src ) {

    return "<script id='{$handle}' src='{$src}'></script>" . "\n";

}

add_filter('script_loader_tag', 'optimize_script_tags', 10, 3);

Here we register a callback function called optimize_style_tags to the style_loader_tag hook. The optimize_style_tags will now get called for each link tag and we use it to return a new link tag string that doesn't contain the type attribute.

We do the same thing for the script tags by registering a callback function called optimize_script_tags tot the script_loader_tag hook.

Using conditional link or script tags

If you are adding conditional link or script tags using the wp_style_add_data function you will have to change the code above to use str_replace like shown below. Otherwise the conditional tags will be removed.

function optimize_style_tags( $html , $handle , $href , $media ) {

    return str_replace( "type='text/css'" , "" , $html );

}

add_filter('style_loader_tag', 'optimize_style_tags', 10, 4);


function optimize_script_tags( $tag , $handle , $src ) {

    return str_replace( "type='text/javascript'" , "" , $html );

}

add_filter('script_loader_tag', 'optimize_script_tags', 10, 3);

Post WordPress 5.3

As you can see it takes quite a bit of code to remove a simple attribute from the link and script tags. The nice people in this Trac issue thought so too. So as of WordPress 5.3 there is a build in option for this as shown below.

function register_html_support() {

    add_theme_support( 'html5', array( 'script', 'style' ) );

}

add_action( 'after_setup_theme', 'register_html_support' );

With the code above we register a function called register_html_support to the after_setup_theme hook. Inside the register_html_support function we make a call to the add_theme_support function to enable theme support for Html5. As the second parameter we pass an array containing the new 'script' and 'style' options.

Now there is a good chance your theme is already registering support for Html5 in which case you can now just add the 'script' and 'style' options.

With the 'script' and 'style' options added WordPress will automatically remove the type attributes from the link and script tags.

Follow me on twitter @Vanaf1979 or here on Dev.to @Vanaf1979 to be notified about new articles, and other WordPress development related resources.

Thanks for reading