How to: Fix Google’s ‘Blocked Javascript, CSS and Images’ files problem

As we run many WordPress based projects we have been made aware of Google’s problems accessing specific elements of our client’s websites, namely Javascript, CSS and image files.

This has been down to the said items being blocked (Disallow) by default via WordPress’s virtual robots.txt file.
As it’s a virtual file you cannot simply open and edit the file – it doesn’t physically exist!

There are probably a few plugins that can help with this but, in my opinion, the less plugins installed the better so the quickest, easiest way to solve this is to just add a few lines of code to the theme functions.php.

Below is a simple few lines to add, all you have to do is change the file path that is currently blocked.

Step 1:
Go to the Google Mobile Friendly test site and run a quick test on your site.
Once you’ve run the test, if the results show files are inaccessible, click ‘Show resources’ to view the file paths.

Step 2:
Presuming you have some blocked resources (caused by a Disallow in the robots.txt), you can unblock them (Allow) by adding the following to your theme functions.php

add_filter( 'robots_txt', 'pands_robots_mod', 10, 2 );
function pands_robots_mod( $output, $public ) {
$output .= "Allow: PATH/TO/THE/BLOCKED/FILE" . "\n";
return $output;
}

Don’t forget to change the /PATH/TO/THE/BLOCKED/FILE.

Before:

After:

Step 3:
Relax with a cocktail knowing you’ve allowed all the things correctly unless you’re looking for someone to sort this for you, in which case, get in touch.