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
    Create Namespaced Classes with MooTools

    MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does.  Many developers create their classes as globals which is generally frowned up.  I mostly disagree with that stance, but each to their own.  In any event...

  • By
    Designing for Simplicity

    Before we get started, it's worth me spending a brief moment introducing myself to you. My name is Mark (or @integralist if Twitter happens to be your communication tool of choice) and I currently work for BBC News in London England as a principal engineer/tech...

Incredible Demos

  • By
    Advanced CSS Printing &#8211; Using JavaScript Double-Click To Remove Unwanted DIVs

    Like any good programmer, I'm constantly searching around the internet for ideas and articles that can help me improve my code. There are thousands of talented programmers out there so I stumble upon some great articles and code snippets that I like to print out...

  • By
    Image Data URIs with PHP

    If you troll page markup like me, you've no doubt seen the use of data URI's within image src attributes. Instead of providing a traditional address to the image, the image file data is base64-encoded and stuffed within the src attribute. Doing so saves...

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!