16
Sep

Quick Tip #6 - How to write clever pretty URL’s with htaccess

In this quicktip I’ll show you how to create clever ‘pretty URL’s’ using your servers htaccess file. Why are they clever? The easiest way to explain this is in an example : So say we enter www.example.com/pretty-url/ into our browsers address bar, this will then call the file www.example.com/pretty-url.php (or whatever file extension you like) but will still display www.example.com/pretty-url/ in the browser’s address bar, clever ‘ey?

Un-clever ways have made you manually input each redirect into the htaccess file, so every time you want to add a new page, you’ve got to change your file. I’ll show you how to make this dyanmic and you won’t have to touch your htaccess file again!

Create your htaccess file

Create a new file in your favourite coding program and save it as .htaccess.txt , this will allow you to edit the file but when it goes on the server you need to remove the .txt so it just reads .htaccess .

Add the code

What you need to take note of when you add the code is the RewriteRule line. This uses Regular Expressions (head here to find out more about Regular Expressions) to detect what we specify in the URL.

You can use this code striaght away to get it working or read on to get more information on how it works so you can extend or change it.

Options +FollowSymLinks
RewriteEngine On
RewriteCond %{SCRIPT_FILENAME} !-d
RewriteCond %{SCRIPT_FILENAME} !-f
RewriteRule ^([a-z]+-?[a-z]+)/$ /$1.php

Explanation

Right lets go through the RewriteRule with www.example.com/pretty-url/ as an example URL.

To start, ^ selects the start of our string, in this case it will allows us to select everything after the first forward slash in the URL : pretty-url/

RewriteRule ^

Next we open a set of brackets which means whatever gets detected inside here become our first variable.

RewriteRule ^()

Now we detect for a lower case word. [a-z] searches for one lowercase letter while + repeats this action allowing us to detect a word. At the moment this would detect pretty.

RewriteRule ^([a-z]+)

Then we detect for hyphens, there’s also a question mark in there, this allows us to detect pretty or pretty-.

RewriteRule ^([a-z]+-?)

You should be able to know what this step will be now, we’re using the same [a-z]+ again to detect for the second word. This would now detect pretty-url.

RewriteRule ^([a-z]+-?[a-z]+)

To end the Regular Expression, we detect the ending forward slash and close it with $. This will now detect pretty-url/ and store pretty-url as a variable. If you wanted your url’s to end without a forward slash (e.g : www.example.com/pretty-url ) you’d just leave out the forward slash from the Regular Expression.

RewriteRule ^([a-z]+-?[a-z]+)/$

All we need to do now is to tell the broswer what to do. We want it to go to the root with the / and then we call our variable with $1 and add .php onto the end. This will then give us /pretty-url.php, which then redirects the browser to www.example.com/pretty-url.php leaving www.example.com/pretty-url/ in the address bar. Simples.

RewriteRule ^([a-z]+-?[a-z]+)/$ /$1.php

Expanding

To expand it, all I’ve done or needed for the moment is to add longer file names, so I’ve wanted to call a file called how-to-find-us.php but our Regular Expression only picks up a word, then a hyphen and another word. So all we need to do to expand it is to duplicate a section : -?[a-z]+.

This example below will allow us to pick up how-to-find-us.php by entering www.example.com/how-to-find-us/.

RewriteRule ^([a-z]+-?[a-z]+-?[a-z]+-?[a-z]+)/$ /$1.php

Author: Benjamin Reid

My name is Benjamin Reid, I live in the UK and keep the magic locked into this site.

Subscribe to the RSS feed some design goodness, get in on the upcoming software give-aways!

This entry was posted on Wednesday, September 16th, 2009 at 11:32 am and is filed under Quick Tips & tagged with htaccess, Pretty, Redirect, Regular Expressions, URL. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

9 Responses | Make a comment

twe4ked wrote on September 30, 2009

Best explination of this I’ve seen! cheers

Reply
Stephen wrote on October 13, 2009

Really nice explanation, thanks.

Reply
randomideas wrote on October 28, 2009

hello i wanna ask your help.

below is my URL structure and its automatically generated from a feeds.

http://doitbigtickets.com/ResultsGeneral.aspx?kwds=New+York+Yankees

Any tips on how can i convert it into a pretty URL?

HELP!!!!!!!

Reply
- Nouveller wrote on October 29, 2009
  
  You could try:
  
  RewriteRule ^(\w+\+\w+\+\w+)/$ /ResultsGeneral.aspx?kwds=$1
  
  This would match:
  
  http://doitbigtickets.com/New+York+Yankees
  
  Reply
kai wrote on June 11, 2010

Hi
this is by far the best explanation I ever read. Thanks for this.
Let me know when you go further and in detail. love to read about.
And let me know when you write a book - I will buy it!

Reply
OnlinePokies wrote on July 20, 2010

This is exactly what I was looking for. But didn’t expect I’d find such a simple explanation. Each time I need help with .htaccess stuff I shudder cause most times you need to be an Apache guru to fathom what there on about.

Kudos for making it easy to understand!

Reply
Writing about English wrote on November 4, 2011

Writing about English…

[...]Quick Tip #6 - How to write clever pretty URL’s with htaccess | Nouveller[...]…

Reply
Mavent wrote on December 13, 2011

Uh… if just typing “www.example.com/pretty-url/” into a browser would work, you wouldn’t need to invoke .htaccess. The problem with half-assed tutorials is that they don’t work unless the person following them already knows how to do what you’re trying to explain.

Reply
custom hoodies, custom sweatshirts, customized hoodies wrote on January 30, 2012

custom hoodies, custom sweatshirts, customized hoodies …

[...]Quick Tip #6 - How to write clever pretty URL’s with htaccess | Nouveller[...]…

Reply