Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

Does anyone happen to know how I can automatically turn:

http://www.domain-name.com/wp-content/themes/theme-name/css/stylesheeet.css

into

http://www.domain-name.com/css/stylesheet.css

Naturally I could just create the applicable folder within the root of the website, place the files there and just reference them but that is now what I am after.

I am looking for a way to keep all css & javascript files within the theme folder but I would like for wordpress to show the above outlined url path if you view the source of the page.

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.

Thank you in advance

share|improve this question

2 Answers 2

up vote 2 down vote accepted

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');
share|improve this answer
    
@gabrielk This seems like a great solution but for some reason this does not seem to be working for me. I have gone ahead and added the applicable rewrite rules, added the applicable functions.php file and ensured that in both the paths to the original locations were valid. I then restarted apache but when refreshing the browser I don't see any change at all. I should also point out that all my theme files reference the template directory with <?php bloginfo('template_directory'); ?>. Could you review this code on your system to see what might need to be changed to get it to work correctly? –  NetConstructor.com Sep 10 '10 at 6:13
    
Hmm, it works for me. I just tested it using the twentyten theme -- slightly modified since that theme doesn't have a css / js subdirectory. –  gabrielk Sep 10 '10 at 17:37
    
could you check again... i can't understand why its not working for me –  NetConstructor.com Sep 11 '10 at 9:39
    
Sorry for the late response, was away for the weekend. Two questions: 1) Do post permalinks work on your site already? 2) If you have a clean working copy of WP 3.0.1 with the Twentyten theme enabled and permalinks enabled, does the second snippet of code I posted work for you? –  gabrielk Sep 13 '10 at 18:40
    
1) yes, enabled and working. 2) I am not using the twentyten theme, I have created my own theme BUT within the template files for this theme I always used <?php bloginfo('template_directory'); ?> whenever a link to an image or file is referenced. By adding my own theme and applicable template files is is not the correct way of doing things? If it is correct then am I possibly missing something which would prevent <?php bloginfo('template_directory'); ?> changing the URL path to achieve the desired result? –  NetConstructor.com Sep 14 '10 at 2:33

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

share|improve this answer
    
+1 The only issue I can see is that the symlink will need to be created for any theme that is loaded and activated. Otherwise, a nice solution! –  Grant Palin Sep 10 '10 at 3:49
    
another issue - this means you actually need to manually replace the header calls –  hannit cohen Sep 10 '10 at 4:54
    
thank you very much for this answer. I actually thinking about doing this as well but I was hoping there might be some way to add code to the functions.php file which will automatically tell wordpress to change the location of all requests going to the true location to that of these new "virtual" locations... Does anyone know of a way this can be done? –  NetConstructor.com Sep 10 '10 at 5:54

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.