WordPress: Remove the type attribute from link and script tags
Tags: wordpress, webdev, php, tutorial
Published: 2019-12-02 18:49:38

---
title: WordPress: Remove the type attribute from link and script tags
published: true
description: How to remove the type attribute from style and script tags in WordPress to pass the test of the W3C markup validation service.
canonical_url: https://since1979.dev/wordpress-remove-the-type-attribute-from-link-and-script-tags/
cover_image: https://since1979.dev/wp-content/uploads/2019/11/remove-the-type-attribute-from-link-and-script-tags.jpg
tags: wordpress, webdev, php, tutorial
---
[Originally posted on my website on December 2th 2019](https://since1979.dev/wordpress-remove-the-type-attribute-from-link-and-script-tags/)

### Introduction

If you ever tried to test your WordPress website with [The W3C Markup Validation Service](https://validator.w3.org/) 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](https://developer.wordpress.org/reference/functions/wp_enqueue_style/)* and *[wp_enqueue_script](https://developer.wordpress.org/reference/functions/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.

```php
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](https://developer.wordpress.org/reference/hooks/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](https://developer.wordpress.org/reference/hooks/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](https://developer.wordpress.org/reference/functions/wp_style_add_data/)* function you will have to change the code above to use *[str_replace](https://www.php.net/manual/en/function.str-replace.php)* like shown below. Otherwise the conditional tags will be removed.

```php
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](https://core.trac.wordpress.org/ticket/42804) thought so too. So as of WordPress 5.3 there is a build in option for this as shown below.

```php
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](https://developer.wordpress.org/reference/hooks/after_setup_theme/)* hook. Inside the *register_html_support* function we make a call to the *[add_theme_support](https://developer.wordpress.org/reference/functions/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](https://twitter.com/Vanaf1979) or here on Dev.to [@Vanaf1979](https://dev.to/vanaf1979) to be notified about new articles, and other WordPress development related resources.

Thanks for reading