Changing the visible url path to css & js files

by

Offhand I think you’d need two things:

First, a rewrite rule in your .htaccess file like so:

RewriteEngine On
RewriteBase /
RewriteRule ^css/(.*) /wp-content/themes/theme-name/css/$1 [L]
RewriteRule ^js/(.*) /wp-content/themes/theme-name/js/$1 [L]

Second, add a filter to your theme’s functions.php like so:

function change_css_js_url($content) {
    $current_path="/wp-content/themes/theme-name/";
    $new_path="https://wordpress.stackexchange.com/"; // No need to add /css or /js here since you're mapping the subdirectories 1-to-1
    $content = str_replace($current_path, $new_path, $content);
    return $content;
}
add_filter('bloginfo_url', 'change_css_js_url');
add_filter('bloginfo', 'change_css_js_url');

A couple caveats:
– if a plugin or something doesn’t use bloginfo() or get_bloginfo() it will not trigger the filter. You can get around this by hooking your function into other filters as needed.
– some plugins/themes/etc use a hard-coded paths. There’s not much you can do about this except modify the code to use one of WP’s functions to get the path.

Here’s the same example using the twentyten theme (no css/js subdirectories, but the idea is the same.)

.htaccess

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^twentyten/(.*) /wp-content/themes/twentyten/$1 [L]
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

functions.php

function change_css_js_url($content) {
    $current_path="/wp-content/themes/";
    $new_path="https://wordpress.stackexchange.com/"; // No need to add /css or /js here since you're mapping the subdirectories 1-to-1
    $content = str_replace($current_path, $new_path, $content);
    return $content;
}
add_filter('bloginfo_url', 'change_css_js_url');
add_filter('bloginfo', 'change_css_js_url');

Leave a Comment