Apr 11 2009

Website template using PHP

0

webpage_template1Many times I’ve had to take over a website and update or redesign it. There is nothing more stressful than repetitious work especially when you’re dealing with a website for which the layout was poorly planned and implemented. I recommend creating a template-based website that is easy to maintain and keeps consistency throughout. In this tutorial I will show you how to create a master header with dynamic <title> and <meta> tags as well as a static footer to insert into as many pages as you need to create.



A typical web page might look like this:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>My Page</title>
<meta name="description" content="This is my page" />
<meta name="keywords" content="keyword 1, keyword 2" />
<link type="text/css" href="style.css" />
</head>
<body>
 <div id="header">
  <div id="menu">
   <ul>
    <li>Home</li>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
   </ul>
  </div>
 </div>
 <div id="content">
  The quick smart fox jumped over the lazy dog.
 </div>
 <div id="footer">mysite.com</div>
</body>
</html>

Now assume that you need to rename a menu option or insert new header tags. You will spend a lot of time making the same update to all pages that need updating. That’s a lot of work and this method of implementation is prone to inconsistency and mistakes. A better solution would be to create a template in which you insert the header and footer as separate files so you can make updates to these files only once.

header.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<?php
    echo "<title>";
   
    $page = $_SERVER['REQUEST_URI']; //capture the file name
   
    //create a list of all your pages and let the switch() function match the $page variable with the proper title
    switch($page)
    {
        case "/index.php": echo "Home Page";
            break;
        case "/page1.php": echo "Page 1";
            break;
        case "/page2.php": echo "Page 2";
            break;
        //And so forth
    }
   
    echo "</title>" ."\n";
   
    //for the description and keywords meta tags you can use array elements that contain arrays with you meta tags information
    $tags_array = array("/index.php" => array("This is the hompage", "keyword 1, keyword 2"),
                        "/page1.php" => array("This is page 1", "keyword 1, keyword 2"));
   
    //since the meta tag information is within an array you have to use the foreach() function to match the $page variable
    //with the corresponding file name and echo the proper description and keywords. the description will always be in
    //the 0 element of the array and the keywords in element 1
    foreach($tags_array as $file => $properties)
    {
        if($file == $page)
        {
            echo '<meta name="description" content="' .$properties[0] .'" />' ."\n";
            echo '<meta name="keywords" content="' .$properties[1] .'" />' ."\n";
        }
    }
?>
<link type="text/css" href="style.css" />
</head>
<body>
 <div id="header">
  <div id="menu">
   <ul>
    <li>Home</li>
    <li>Page 1</li>
    <li>Page 2</li>
    <li>Page 3</li>
   </ul>
  </div>
 </div>

page.php

1
2
3
<div id="content">
  The quick smart fox jumped over the lazy dog.
 </div>

footer.php

1
2
3
<div id="footer">mysite.com</div>
</body>
</html>

template.php

1
2
3
4
5
<?php include("header"); ?>
 <div id="content">
  The quick smart fox jumped over the lazy dog.
 </div>
<?php include("footer"); ?>

By creating a template-based website you isolate elements that makeup the web page so they can be easily updated. Using PHP to dynamically generate page titles and meta tags will allow you to create SEO friendly web pages that contain only relevant information.

Apr 11th by Hektor