Permalinks tutorial - Script Tutorials

What are permalinks? Actually, they are just various links to entries of your website. Long ago, nearly all hyperlinks were permalinks, just because all content was static (static html pages). Later, with the development and popularization of programming languages, dynamic links began to appear. As example: dynamic listings of members, blogs, photos, etc. We ourselves can determine the permalinks scheme, in order to make them more friendly. As always, Rewrite engine (mod_rewrite module) is used to convert urls with different GET params into more human-readable urls.

In the beginning, I recommend that you check if ‘mod_rewrite’ is installed on your Apache server (phpinfo)

Contents

Step 1 – .htaccess
Step 2 – HTML
templates/index.html
Step 3 – PHP
index.php
Conclusion

Live Demo

[sociallocker]

download in package

[/sociallocker]

Now you can download the package to follow my explanations.

Step 1 – .htaccess

Firstly, create an empty .htaccess file and paste next code:

<IfModule mod_rewrite.c> 
  
RewriteEngine on 
  
# 1-level 
  
RewriteRule ^home/{0,1}$  index.php?module=home [QSA,L] 
  
RewriteRule ^faces/{0,1}$  index.php?module=faces [QSA,L] 
  
RewriteRule ^clubs/{0,1}$  index.php?module=clubs [QSA,L] 
  
RewriteRule ^photos/{0,1}$  index.php?module=photos [QSA,L] 
  
RewriteRule ^videos/{0,1}$  index.php?module=videos [QSA,L] 
  
RewriteRule ^blog/{0,1}$  index.php?module=blog [QSA,L] 
  
# 2-level 
  
RewriteRule ^home/([^/.]+)/{0,1}$  index.php?module=home&key=$1 [QSA,L] 
  
RewriteRule ^faces/([0-9]+)/{0,1}$  index.php?module=faces&value=$1 [QSA,L] 
  
# 3-level 
  
RewriteRule ^clubs/([^/.]+)/([0-9]+)/{0,1}$  index.php?module=clubs&key=$1&value=$2 [QSA,L] 
  
RewriteRule ^photos/([0-9]+)/([0-9]+)/{0,1}$  index.php?module=photos&value1=$1&value2=$2 [QSA,L] 
  
# all other cases 
  
RewriteCond %{REQUEST_FILENAME} -f [OR] 
  
RewriteCond %{REQUEST_FILENAME} -d 
  
RewriteRule .+ - [L] 
  
RewriteRule ^([^/]+)/{0,1}$ index.php?module=other&key=$1 [QSA,L] 
  
</IfModule>

Then, save this file, and upload to the root folder of your project (website). As usual, this is ‘www’ or ‘httpdocs’ folder. Now, let’s back to our rules:

All rules are wrapped with ‘IfModule mod_rewrite’ construction. This is some kind of check if ‘mod_rewrite’ is installed or not. After, I added different permalink rules to different section of our ‘website’ (see – demo page). There are several main sections: home, faces, clubs, photos, videos and blog. Also, there are 2-level and 3-level constructions (links).

In the beginning of every rule you can see ^ anchor. It means – ‘Start-of-line anchor’. Anchor ‘$’ – ‘End-of-line anchor’.

Next flags are used:
‘QSA’ (query string append) – this flag forces the rewrite engine to append a query string part of the substitution string to the existing string, instead of replacing it. Use this when you want to add more data to the query string via a rewrite rule.
‘L’ (last rule) – stop the rewriting process here and don’t apply any more rewrite rules. This corresponds to the Perl last command or the break command in C. Use this flag to prevent the currently rewritten URL from being rewritten further by following rules.

Pay attention, that we can use regular expressions in our rules, like [0-9]+) or ([^/]+). The first expressions is ‘any digit (any length)’, the second is ‘any symbol (any length)’.

Note, that in order to pass params into GET variables, we have to wrap necessary sections in round brackets. The first section will be accessible through ‘$1’ key, second – ‘$2’, and so on.

Step 2 – HTML

in order to give our demo finished look, I prepared a template of our page

templates/index.html

<!DOCTYPE html> 
  
<html lang="en" > 
  
<head> 
  
    <meta charset="utf-8" /> 
  
    <meta name="author" content="Script Tutorials" /> 
  
    <title>Permalinks tutorial | Script Tutorials</title> 
  
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" /> 
  
    <meta content="width=device-width, initial-scale=1" name="viewport" /> 
  
    <!-- define base url --> 
  
    <base href="{url}" /> 
  
    <!-- add styles --> 
  
    <link href="css/main.css" rel="stylesheet" type="text/css" /> 
  
    <link href="css/responsive.css" rel="stylesheet" type="text/css" /> 
  
</head> 
  
<body> 
  
    <div id="header"> 
  
        <!-- logo --> 
  
        <a href="#" id="logo"><img src="images/logo.png"></a> 
  
        <!-- extra top links --> 
  
        <div id="links"> 
  
            <a href="about-us/">About us</a> 
  
            <a href="help/">Help</a> 
  
            <a href="contact-us/">Contact Us</a> 
  
        </div> 
  
        <!-- navigation menu --> 
  
        <div id="navmenu"> 
  
            <nav id="menu"> 
  
                <input type="checkbox" id="menu_check"> 
  
                <label for="menu_check" onclick>&nbsp;</label> 
  
                <ul> 
  
                    <li {mact1}><a href="home/">Home</a> 
  
                        <ul> 
  
                            <li><a href="home/facebook/"><span class="icon elem1"></span>Facebook</a></li> 
  
                            <li><a href="home/google/"><span class="icon elem2"></span>Google</a></li> 
  
                            <li><a href="home/rss/"><span class="icon elem3"></span>RSS</a></li> 
  
                            <li><a href="home/skype/"><span class="icon elem4"></span>Skype</a></li> 
  
                            <li><a href="home/stumbleupon/"><span class="icon elem5"></span>Stumbleupon</a></li> 
  
                        </ul> 
  
                    </li> 
  
                    <li {mact2}><a href="faces/">Faces</a> 
  
                        <ul> 
  
                            <li><a href="faces/1/"><span class="icon elem0"></span>Faces 1</a></li> 
  
                            <li><a href="faces/2/"><span class="icon elem0"></span>Faces 2</a></li> 
  
                            <li><a href="faces/3/"><span class="icon elem0"></span>Faces 3</a></li> 
  
                            <li><a href="faces/4/"><span class="icon elem0"></span>Faces 4</a></li> 
  
                            <li><a href="faces/5/"><span class="icon elem0"></span>Faces 5</a></li> 
  
                        </ul> 
  
                    </li> 
  
                    <li {mact3}><a href="clubs/">Clubs</a> 
  
                        <ul> 
  
                            <li><a href="clubs/step/1/"><span class="icon elem0"></span>Clubs 1</a></li> 
  
                            <li><a href="clubs/step/2/"><span class="icon elem0"></span>Clubs 2</a></li> 
  
                            <li><a href="clubs/step/3/"><span class="icon elem0"></span>Clubs 3</a></li> 
  
                            <li><a href="clubs/step/4/"><span class="icon elem0"></span>Clubs 4</a></li> 
  
                            <li><a href="clubs/step/5/"><span class="icon elem0"></span>Clubs 5</a></li> 
  
                        </ul> 
  
                    </li> 
  
                    <li {mact4}><a href="photos/">Photos</a> 
  
                        <ul> 
  
                            <li><a href="photos/10/10/"><span class="icon elem0"></span>Photos 10</a></li> 
  
                            <li><a href="photos/20/10/"><span class="icon elem0"></span>Photos 20</a></li> 
  
                            <li><a href="photos/30/10/"><span class="icon elem0"></span>Photos 30</a></li> 
  
                            <li><a href="photos/40/10/"><span class="icon elem0"></span>Photos 40</a></li> 
  
                            <li><a href="photos/50/10/"><span class="icon elem0"></span>Photos 50</a></li> 
  
                        </ul> 
  
                    </li> 
  
                    <li {mact5}><a href="videos/">Videos</a></li> 
  
                    <li {mact6}><a href="blog/">Blog</a></li> 
  
                </ul> 
  
            </nav> 
  
            <!-- search form --> 
  
            <div id="search"> 
  
                <form role="search" method="get"> 
  
                    <input type="text" placeholder="search..." name="s" value="" autocomplete="off" /> 
  
                </form> 
  
            </div> 
  
        </div> 
  
    </div> 
  
    <!-- main content section --> 
  
    <div class="main"> 
  
        <!-- left column --> 
  
        <div class="left"> 
  
            <!-- block element --> 
  
            <div class="block"> 
  
                <h3 class="head">{title}</h3> 
  
                <div> 
  
                    {explanation} 
  
                </div> 
  
                <h3 class="foot">Footer</h3> 
  
            </div> 
  
        </div> 
  
        <!-- right column --> 
  
        <div class="right"> 
  
            <div class="block"> 
  
                <h3 class="head">{title}</h3> 
  
                <div> 
  
                    Some extra content. Some extra content. Some extra content. Some extra content. 
  
                </div> 
  
                <h3 class="foot">Footer</h3> 
  
            </div> 
  
        </div> 
  
    </div> 
  
    <div class="footer"> 
  
        Permalinks tutorial (<a href="https://www.script-tutorials.com/permalinks-tutorial/">Back to original tutorial</a>) 
  
    </div> 
  
</body> 
  
</html>

There are only several template keys in use: {url} (to set a base url), {mact1} – {mact6} (menu active element status), {title} and {explanation} (to place title and some explanation).

Step 3 – PHP

index.php

Finally, the code of our main homepage:

// active menu elements, titles and explanations (depending on params) 
  
$sMac1 = $sMac2 = $sMac3 = $sMac4 = $sMac5 = $sMac6 = ''; 
  
$sTitle = $sText = 'Home'; 
  
if ($_GET) { 
  
    switch($_GET['module']) { 
  
        case 'home': 
  
            $sMac1 = 'class="active"'; 
  
            $sText = 'RewriteRule ^home/{0,1}$  index.php?module=home [QSA,L]'; 
  
            if (isset($_GET['key']) && $_GET['key']) { 
  
                $sTitle .= ' - ' . $_GET['key']; 
  
                $sText = 'RewriteRule ^home/([^/.]+)/{0,1}$  index.php?module=home&key=$1 [QSA,L]'; 
  
            } 
  
            break; 
  
        case 'faces': 
  
            $sMac2 = 'class="active"'; 
  
            $sTitle = 'Faces'; 
  
            $sText = 'RewriteRule ^faces/{0,1}$  index.php?module=faces [QSA,L]'; 
  
            if (isset($_GET['value'])) { 
  
                $sTitle .= ' - ' . (int)$_GET['value'] . ' page'; 
  
                $sText = 'RewriteRule ^faces/([0-9]+)/{0,1}$  index.php?module=faces&value=$1 [QSA,L]'; 
  
            } 
  
            break; 
  
        case 'clubs': 
  
            $sMac3 = 'class="active"'; 
  
            $sTitle = 'Clubs'; 
  
            $sText = 'RewriteRule ^clubs/{0,1}$  index.php?module=clubs [QSA,L]'; 
  
            if (isset($_GET['key']) && isset($_GET['value'])) { 
  
                $sTitle .= ' - ' . (int)$_GET['value'] . ' ' . $_GET['key']; 
  
                $sText = 'RewriteRule ^clubs/([^/.]+)/([0-9]+)/{0,1}$  index.php?module=clubs&key=$1&value=$2 [QSA,L]'; 
  
            } 
  
            break; 
  
        case 'photos': 
  
            $sMac4 = 'class="active"'; 
  
            $sTitle = 'Photos'; 
  
            $sText = 'RewriteRule ^photos/{0,1}$  index.php?module=photos [QSA,L]'; 
  
            if (isset($_GET['value1']) && isset($_GET['value2'])) { 
  
                $sTitle .= ' - ' . (int)$_GET['value1'] . ' : ' . (int)$_GET['value2']; 
  
                $sText = 'RewriteRule ^photos/([0-9]+)/([0-9]+)/{0,1}$  index.php?module=photos&value1=$1&value2=$2 [QSA,L]'; 
  
            } 
  
            break; 
  
        case 'videos': 
  
            $sMac5 = 'class="active"'; 
  
            $sTitle = 'Videos'; 
  
            $sText = 'RewriteRule ^videos/{0,1}$  index.php?module=videos [QSA,L]'; 
  
            break; 
  
        case 'blog': 
  
            $sMac6 = 'class="active"'; 
  
            $sTitle = 'Blog'; 
  
            $sText = 'RewriteRule ^blog/{0,1}$  index.php?module=blog [QSA,L]'; 
  
            break; 
  
        case 'other': 
  
            if (isset($_GET['key'])) { 
  
                $sTitle = 'Other - ' . $_GET['key'] . ' (or, error 404, not found)'; 
  
                $sText = 'RewriteRule ^([^/]+)/{0,1}$ index.php?module=other&key=$1 [QSA,L]'; 
  
            } 
  
            break; 
  
    } 
  
} else { 
  
    $sMac1 = 'class="active"'; 
  
} 
  
// Display main page 
  
$aKeys = array( 
  
    '{url}' => 'https://www.script-tutorials.com/demos/343/', 
  
    '{mact1}' => $sMac1, 
  
    '{mact2}' => $sMac2, 
  
    '{mact3}' => $sMac3, 
  
    '{mact4}' => $sMac4, 
  
    '{mact5}' => $sMac5, 
  
    '{mact6}' => $sMac6, 
  
    '{title}' => $sTitle, 
  
    '{explanation}' => $sText, 
  
); 
  
echo strtr(file_get_contents('templates/index.html'), $aKeys);

As you see, depending on params – this code generates different titles and explanation texts for our template. Also it passes the base ‘website’ url.

Live Demo

Conclusion

That’s all for today. I hope, that from now on you are able to apply your knowledge in practice in order to build friendly permalinks for your own projects. Good luck and welcome back.