Changing the visible url path to css & js files

2 comments

1. 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 = '/'; // 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 = '/'; // 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');
   

   Log in to Reply

2. In an ideal situation I am looking for a piece of code which can be added that automatically >does this for all files referenced within my theme folder including any images.

   I am going to propose an alternate solution that will solve the problem.

   Create a symbolic link from wp-content/themes/your-theme to your root directory/css

   To create a symbolic link in Linux use the #ln -s command. For example:

   #ln -s /home/user-name/public_html/wp-content/themes/your_theme_name /home/user-name/public_html/css
   

   Now any file in http://example.com/wp-content/themes/your_theme_name/ can be accessed using the url:

   http://example.com/css/

   In order for this to work you have to allow the FollowSymLinks directive in your httpd.conf file. You can also put it in an .htaccess file that will override the setting in httpd.conf

   In httpd.conf the setting would be:

   <Directory />
   Options Indexes FollowSymLinks
   </Directory>
   

   Before the change will take affect you will have to restart Apache:

   #/etc/init.d/apache2 restart
   

   You can read more about SymLinks at Maxi-Pedia and in the Apache Docs

   Log in to Reply