• Manage your template/layout easier

    2 Comments
    06 Feb 2009 /  Web Design

    Stop torchering yourself. I’ve done this too many times, and I think it’s time to shed a little light into the web design world. Do you have experience with php? If you do, I heavily suggest  you create a system similar to mine.

    The gist: You have a php include file with a bunch of functions to echo content. Then, once you’ve created a template php file with all of the functions in the correct places echoing the correct stuff, create the site.

    Why? Let’s say you find a template you like, or just make a mistake in your custom edited template php/html file. Now, it turns out that 8 hours later you discover that you made a mistake and you’ll have to redo all of those dozens of pages. Or maybe you’re like me and just want to keep adding navigation links left and right – then remembering that you’ll have to redit and reupload every single file.

    You get the idea. Here’s what one of my sites looks like:

    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

    <?php
require_once("page.php");
?>
<html>
<link href="main.css" rel="stylesheet" type="text/css">
<head>
<title>
 
</title>
</head>
<body>
<?php logo(); ?>
<div id="wrap">
 
<?php menu(); ?>
	<div id="container">
<?php sidebar(); ?>
	<div id="mainbox">
		<div id="text">
			<div id="midbar">
				<div id="midbartxt">
					Text
				</div>
			</div>
			<div id="midbaritm">
				<div id="text">
					Some text
				</div>
			</div>
		</div>
	</div>
	</div>
 
</div>
<?php footer(); ?>
</body>
</html>

    You can see how this is working, right? Well here’s what the page.php file looks like anyway

    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

    <?php
 
function logo() {
	echo '<div id="logo">Logo</div>';
}
 
function menu() {
echo <<<EOF
<div id="menu">
 <div id="link">Hello
 <div id="link">Hello again
</div>
EOF;
 
}
 
function sidebar() {
echo <<<EOF
<div id="sidebar">
		<div id="text">
		Ello
		</div>
</div>
EOF;
}
 
function footer() {
echo <<<EOF
<div id="copy">&copy; their respective owners.</div>
EOF;
}
 
?>

    Seeing the potential benefits yet? Yes? Then go spread the word and implement something like this yourself. It is such a headache to manually edit every single page all over again just to add another navigation link. Just edit page.php or something similar and have the changes appear across all pages.

    - You’re welcome.

    Tags: ,