Re-Write All Asset URLs in WordPress

Most of you know when you are viewing a Wordpress site simply by viewing the websites HTML sourcecode in the browser. The easiest way to identify that a WordPress site is being used while looking at the sourcecode, is when you see the file paths/URL’s for the sites Assets (Images, CSS, and Javascript files) and Plugins like this…

/* CSS Files */
/wp-content/themes/THEME_NAME_HERE/css/style.css

/* Javascript Files */
/wp-content/themes/THEME_NAME_HERE/js/script.js

/* Image Files */ 
/wp-content/themes/THEME_NAME_HERE/images/myimage.png

/* Plugins */
/wp-content/plugins/PLUGIN_NAME_HERE/plugin_file_here.php

In this article I will be showing you how to Re-write the URL’s so that you can have a more custom look like this…

CSS files will become 
/assets/css/style.css

Javascript files will become
/assets/js/script.js

Image paths will become
/assets/images/myimage.png

Plugins will become
/plugins/PLUGIN_NAME_HERE/plugin_file_here.php

As you can see, this is a much cleaner look and at first glance, it would be hard for the average Joe to be able to tell you are even using WordPress. This is not meant to try to conceal the fact that you are using WordPress, there are several other ways a user can find out that you are, this is simply to make “Pretty” URL’s for your WordPress site’s Assets!

Let’s get started.

Step 1. Building our Re-write Paths

Add the following code to your WordPress Functions.php file or better yet, create a new file called something like asset_urls.php or anything that sounds good to you. Then include this new file into your Functions.php file.

<?php
// re-write /wp-content/themes/THEME_NAME/css/ to /assets/css/
// re-write /wp-content/themes/THEME_NAME/js/  to /assets/js/
// re-write /wp-content/themes/THEME_NAME/img/ to /assets/img/
// re-write /wp-content/plugins/ to /plugins/
function cd_add_rewrites($content)
{
    global $wp_rewrite;
    $cd_new_non_wp_rules = array(
		'assets/css/(.*)'    => 'wp-content/themes/THEME_NAME/css/$1',
		'assets/js/(.*)'     => 'wp-content/themes/THEME_NAME/js/$1',
		'assets/images/(.*)' => 'wp-content/themes/THEME_NAME/images/$1',
		'plugins/(.*)'       => 'wp-content/plugins/$1'
    );
    $wp_rewrite->non_wp_rules = array_merge($wp_rewrite->non_wp_rules, $cd_new_non_wp_rules);
    return $content;
}
?>

Step 2. Filter Our Internal WordPress Links To Use Our New Re-writes

Now we have to make sure all the links in our WordPress site are re-written to take advantage of the re-writes we built in Step 1 above…

<?php
function cd_clean_urls($content) {
    if (strpos($content, '/wp-content/plugins') === 0) {
        return str_replace('/wp-content/plugins', wp_base_dir() . '/plugins', $content);
    } else {
        return str_replace('/wp-content/themes/THEME_NAME', '', $content);
    }
}

/* Now we filter our WordPress URL's to use our New Re-writes */
if (!is_multisite() && !is_child_theme()) {
    add_action('generate_rewrite_rules', 'cd_add_rewrites');

    if (!is_admin()) {
        $tags = array(
            'plugins_url',
            'bloginfo',
            'stylesheet_directory_uri',
            'template_directory_uri',
            'script_loader_src',
            'style_loader_src'
        );
        foreach($tags as $tag) {
            add_filter($tag, 'cd_clean_urls');
        }
    }
}
?>

Step 3. Update The .htaccess File

This just runs the WordPress $wp_rewrite->flush_rules() Method when we are in the WordPress Admin panel which updates our .htaccess file so that it has our new re-writes and they are always up to date

<?php
function cd_flush_rewrites()
{
    global $wp_rewrite;
    $wp_rewrite->flush_rules();
}
add_action('admin_init', 'cd_flush_rewrites');
?>

Step 4. Taking It A Step Farther

If we go back to Step 1, you can see how it is set up and you can expand this even more, you can add in support for things like fonts or AJAX back-end scripts

'assets/fonts/(.*)' => 'wp-content/themes/THEME_NAME/fonts/$1',
'ajax/(.*)'	    => 'wp-content/themes/THEME_NAME/inc/ajax/$1'

Final Words

• This will not work with Child Themes or WordPress MU (Network) Installs.
• Your server must support Re-writes (mod_rewrite) and be enabled for this to work.
• This is not done for Security reasons but purely for Cosmetic reasons alone!
• Most of this code is modified from the ROOTS theme framework which is amazing and does all this and more!
• Be sure to replace THEME_NAME in the code snippets above with your actual theme name, my version does this automatically but I used file paths in this demo for demonstration purposes.

If you found this useful, then please share with your friends with the buttons below, join our Newsletter for more cool Web Developer content, or post some comments, thanks.