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
    Conquering Impostor Syndrome

    Two years ago I documented my struggles with Imposter Syndrome and the response was immense.  I received messages of support and commiseration from new web developers, veteran engineers, and even persons of all experience levels in other professions.  I've even caught myself reading the post...

  • By
    Welcome to My New Office

    My first professional web development was at a small print shop where I sat in a windowless cubical all day. I suffered that boxed in environment for almost five years before I was able to find a remote job where I worked from home. The first...

Incredible Demos

  • By
    HTML5 Datalist

    One of the most used JavaScript widgets over the past decade has been the text box autocomplete widget.  Every JavaScript framework has their own autocomplete widget and many of them have become quite advanced.  Much like the placeholder attribute's introduction to markup, a frequently used...

  • By
    Fade Images with MooTools LazyLoad

    I recently received an email from a MooTools developer asking a great question about my LazyLoad class: "I'm using your LazyLoad MooTools plugin (which is great, by the way). I have been trying to figure out how to modify it so that once an image scrolls into...

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!