Quickly Set Up a Templating System Using .htaccess
Setting up a website capable of easy template switching probably sounds difficult. When I first thought about building a templating system, it felt like a pretty daunting task. After tinkering around for a few days, I found a way that would allow me to switch templates by simply changing a .htaccess directive.
The Folder Structure
+ root + templates + version1 - css - graphics - js + version2 - css - graphics - js + version3 - css - graphics - js
Note that the different templates go in different folders within the temlpates folder -- that includes template graphics, CSS styles, and JavaScript files. If any other types of files are specific to your template, you may add a directive to make them template-specific as well.
The .htaccess Directives
RewriteRule ^css/(.*) /templates/version2/css/$1 RewriteRule ^graphics/(.*) /templates/version2/graphics/$1 RewriteRule ^js/(.*) /templates/version2/js/$1
The .htaccess directives change the request paths from the root level to the current template's folder. Essentially, to switch themes, all you need to do is change the template folder in the .htaccess file.
Referencing Files
<script type="text/javascript" src="/js/moo-121.js"></script> <link rel="stylesheet" type="text/css" href="/css/theme.css" /> <!-- further in the page... --> <img src="/graphics/logo.jpg" />
Since the .htaccess directives above are changing the paths of the images, we can simply refer to the JavaScript, css, and graphics files by the shorter path. This way you don't reveal your file structure, you get to keep your code shorter, and switching templates is extremely easy.
What are your thoughts? Is there a better way to go about this? If so, please share.
This is a great solution to the problem, I’ve used similar mod_rewrite code before, however mine was all on a single line
RewriteEngine On
RewriteRule ^(css|js|graphics)/(.*) templates/version2/$1/$2
So pretty much the same thing, just depends on programming style :) I personally think that this way looks a little cleaner in large .htaccess files, but that’s just my preference.
I’d also be interested to see if anyone else has other/better solutions!
This is a great solution to the problem, I’ve used similar mod_rewrite code before, however mine was all on a single line
RewriteEngine On
RewriteRule ^(css|js|graphics)/(.*) templates/version2/$1/$2
So pretty much the same thing, just depends on programming style :) I personally think that this way looks a little cleaner in large .htaccess files, but that’s just my preference.
I’d also be interested to see if anyone else has other/better solutions!!
Cool, very easy way to implement that templating system. I havn’t played with the .htaccess file alot but i think the usage is very simple. But if we more to the next step and and someone want to switch the template on fly can it be done ? Can we edit .htaccess file online using any php code.
Gaurav,
With PHP’s fopen, fwrite you could.
I have used similar mod_rewrite code in my projects before. I normally keep it on one line however,
RewriteEngine On
RewriteRule ^(css|js|images)/(.*) templates/version1/$1/$2
Just my preference though as sometimes we have large .htaccesses so it’s a bit easier to read.
I’d also be interested to know if anyone has any different/better ways to do this!
I have used similar mod_rewrite code in my projects before. I normally keep it on one line however,
RewriteEngine On
RewriteRule ^(css|js|images)/(.*) templates/version1/$1/$2
Just my preference though as sometimes we have large .htaccesses so it’s a bit easier to read.
I’d also be interested to know if anyone has any different/better ways to do this!
Really nice idea! Though I guess you’ll have to remember to set the base in the HTML header to avoid any screwups down to other rewrites.
Very slick idea, man. Thanks for sharing.
Why not use a 100% organic php software like smarty?
@Alex: You could. I tried Smarty once but didn’t like it.
I have used similar mod_rewrite code in my projects before. I normally keep it on one line however,
RewriteEngine On
RewriteRule ^(css|js|images)/(.*) templates/version1/$1/$2
Just my preference though as sometimes we have large .htaccesses so it’s a bit easier to read.
I’d also be interested to know if anyone has any different/better ways to do this!
That’s a very nice idea, switching versions is always a nightmare!
Thank you
David have you seen how netvibes does it? they do something like main.css?v=46
I supposed netvibes way is to make sure the user gets the updated version of main.css and not the browser cached version they have.
When I read this article’s title, I thought about it in a different way. What if you want to implement a templating system such that if a user prefers a dark template, they can set some option and view the site in a dark layout as opposed to a light layout. Similiar to what forums like vbulletin do. They allow the user to choose the template they want. How would you tackle this problem?
@Mark : Thank will try that.
@Dave It’s possible to use “alias” instead of “rewrite”. But why would you use this approach? If it is for the sake of short code, yes it has a point.
Here is a downside of this approach (from personal experience)
You have v1 and v2 themes, where v1 is red and v2 is blue with v1 being the current. The themes are basically the same, just different tints. You have set the expires headers, say 30 days since the last visit, or fixed time in future (doesn’t really matter). I visit your site and my browser caches one static page. In the event of changing the themes internaly (via .htaccess) before the cache expires, my browser will not bother fetching the files again, since to it they (the files) haven’t changed.
Or if the files are partially named the same way this might result in very very nasty nasty picture.
Hi, don’t want to break your code, but why don’t you do
if you want to cntrol the theme ID
I really like this solution. You could also use a constant in PHP to set the path to css files. That would give absolute references, however, which allows people to take a look at your .css and .js files (not that that should be a bad thing)
i like to use .htaccess like this :P
Deny from all
so…..!! LOL and thank you :P