Quickly Set Up a Templating System Using .htaccess

By  on  

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.

Recent Features

  • By
    Convert XML to JSON with JavaScript

    If you follow me on Twitter, you know that I've been working on a super top secret mobile application using Appcelerator Titanium.  The experience has been great:  using JavaScript to create easy to write, easy to test, native mobile apps has been fun.  My...

  • By
    Create a CSS Cube

    CSS cubes really showcase what CSS has become over the years, evolving from simple color and dimension directives to a language capable of creating deep, creative visuals.  Add animation and you've got something really neat.  Unfortunately each CSS cube tutorial I've read is a bit...

Incredible Demos

  • By
    Retrieve Google Analytics Visits and PageViews with PHP

    Google Analytics is an outstanding website analytics tool that gives you way more information about your website than you probably need. Better to get more than you want than not enough, right? Anyways I check my website statistics more often than I should and...

  • By
    Digg-Style Dynamic Share Widget Using the Dojo Toolkit

    I've always seen Digg as a very progressive website. Digg uses experimental, ajaxified methods for comments and mission-critical functions. One nice touch Digg has added to their website is their hover share widget. Here's how to implement that functionality on your site...

Discussion

  1. 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.

  2. Gaurav,
    With PHP’s fopen, fwrite you could.

  3. 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!

  4. Lewis Walsh

    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.

  5. Very slick idea, man. Thanks for sharing.

  6. Alex

    Why not use a 100% organic php software like smarty?

  7. @Alex: You could. I tried Smarty once but didn’t like it.

  8. That’s a very nice idea, switching versions is always a nightmare!
    Thank you

  9. 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?

  10. @Mark : Thank will try that.

  11. @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.

  12. Hi, don’t want to break your code, but why don’t you do

    RewriteRule ^(css|graphics|js)/(.*),([0-9]) /templates/version$1/$3/$2

    if you want to cntrol the theme ID

    RewriteRule ^(css|graphics|js)/(.*) /templates/version2/$3/$2

  13. 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)

  14. i like to use .htaccess like this :P

    Deny from all

    so…..!! LOL and thank you :P

Wrap your code in <pre class="{language}"></pre> tags, link to a GitHub gist, JSFiddle fiddle, or CodePen pen to embed!