Chop CSS Templates Into Separate PHP-Included Files

Posted by webchicklet in Web Development on August 11th, 2008 | 5 responses

I thought I’d share my normal procedure for starting a new web site, using a free CSS template, chopping it up into separate PHP parts, editing bits, and putting it all back together again. Unless you are a web designer by trade, or have one that works for you, you may not be comfortable starting a design from scratch, so you probably head over to your favorite free templates site and look for one you like. I do that frequently! If I’m not in the mood to spend tons of time pulling creativity out of my a**, er, brain, I grab someone else’s creative genius, tweak it to match my needs, pull it apart, and put it back together again.

Now, some of you are probably wondering what I mean by chopping it up into separate PHP parts, and why I might do that. See, I love using dynamic bits of code in my pages, so that down the line, the site is easier to maintain. For instance, I always like to have my main navigation in one file that gets included on every page. If I need to make a change to the navigation, I only need to change it one place, rather than on every page. I do the same kind of thing to every element that is going to be the same site-wide (on every page of the site). To do this, I need to create separate files to hold each of these site-wide elements, and then put a little php code to call the files into the template I’m using for the site. Enough chatting, let me just show you what I mean.

Step One: Grab a free CSS template from your favorite template site (such as OSWD). I’ve chosen to use Coffee N Cream for this example. Click on that link (it will open in a new window or tab), so you can see the template we’ll be using. Now, if you right-click anywhere in that template, and choose This Frame > View Frame Source, you’ll see the HTML code that is used for that template (shown below). If you download the template, you’ll see that same code in a file called index.html. You’ll also see some images, and a file called default.css. Although the images and CSS file are necessary for the final product, we won’t need to touch them for our PHP chop shop. Right now, we’ll only be dealing with the HTML code – chopping it up into separate files that can be included in the original file as PHP code.


<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="description" content="description">
<meta name="keywords" content="keywords">
<meta name="author" content="author">
<link rel="stylesheet" type="text/css" href="default.css" media="screen">
<title>Coffee N Cream</title>

<div class="container">

	<div class="header">

		<div class="title">
			<h1>Coffee N Cream</h1>
		</div>

	</div>

	<div class="navigation">
			<a href="index.html">Vestibulum</a>

			<a href="index.html">Suspendisse</a>
			<a href="index.html">Elemen</a>
			<a href="index.html">Maecenas</a>
			<a href="index.html">Sodales</a>
			<div class="clearer"><span></span></div>
		</div>

	<div class="main">		

		<div class="content">

			<h1>Porttitor posuere</h1>
			<div class="descr">Jun 13, 2006 by Vulputate</div>

			<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>

			<blockquote><p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p></blockquote>

			<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>

			<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.
			</p>

			<h1>Adipiscing</h1>

			<div class="descr">Jun 11, 2006 by Laoreet</div>

			<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam. Phasellus rutrum elit vel nisi. Cras mauris nulla, egestas quis, cursus at, venenatis ac, ante. Fusce accumsan enim et arcu. Duis sagittis libero at lacus. Suspendisse lacinia nulla eget urna.</p>

			<ul>
				<li>Tristique</li>
				<li>Aenean</li>
				<li>Pretium</li>

			</ul>

			<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est. Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus. Fusce eleifend, dui ut posuere auctor, justo elit posuere sapien, at blandit enim quam fringilla mi.</p>

			<h1>Interdum</h1>
			<div class="descr">May 24, 2006 by Lectus</div>

			<p>Praesent nisi sem, bibendum in, ultrices sit amet, euismod sit amet, dui. Donec varius tincidunt nisi. Ut ut sapien. Integer porta. Fusce nibh. Curabitur pellentesque, lectus at <a href="index.html">volutpat interdum</a>, sem justo placerat elit, eget feugiat est leo tempor quam. Ut quis neque convallis magna consequat molestie. Nullam semper massa eget ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque a nibh quis nunc volutpat aliquam</p>

			<code>margin-bottom: 12px;
font: normal 1.1em "Lucida Sans Unicode",serif;
background: url(img/quote.gif) no-repeat;
padding-left: 28px;
color: #555;</code>

			<p>Eget feugiat est leo tempor quam. Ut quis neque convallis magna consequat molestie.</p>

		</div>

		<div class="sidenav">

			<h1>Something</h1>

			<ul>
				<li><a href="index.html">pellentesque</a></li>
				<li><a href="index.html">sociis natoque</a></li>
				<li><a href="index.html">semper</a></li>
				<li><a href="index.html">convallis</a></li>
			</ul>

			<h1>Another thing</h1>
			<ul>
				<li><a href="index.html">consequat molestie</a></li>
				<li><a href="index.html">sem justo</a></li>
				<li><a href="index.html">semper</a></li>
				<li><a href="index.html">sociis natoque</a></li>

			</ul>

			<h1>Third and last</h1>
			<ul>
				<li><a href="index.html">sociis natoque</a></li>
				<li><a href="index.html">magna sed purus</a></li>
				<li><a href="index.html">tincidunt</a></li>

				<li><a href="index.html">consequat molestie</a></li>
			</ul>

		</div>

		<div class="clearer"><span></span></div>

	</div>

	<div class="footer">© 2006 <a href="index.html">Website.com</a>. Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> &amp; <a href="http://validator.w3.org/check?uri=referer">XHTML</a>. Template design by <a href="http://templates.arcsin.se">Arcsin</a>

	</div>

</div>

Step Two: Look at the various sections of the HTML code and determine where the logical separations are, and which pieces should be pulled out into their own separate files. For this example, I would pull out the entire navigation div (the one that starts with <div class=”navigation”> and ends with the closing div tag just before the main div. I would also pull out the sidenav div and the footer div. Each of those are elements that I will likely want to be the same throughout the site – on every page. So for a 100 page site, rather than repeating (and editing) each of those elements 100 times, I’d rather just edit them once – in their own separate files – and just include them into my template.

Step Three: Cut/paste each of those sections into a new blank page (using your favorite HTML editor or text editor). Name each one appropriately. So I would remove the navigation div from the main template, place it into a new blank page, and name that page main-nav.inc (for example). You don’t have to end these pages in .inc if you don’t want, but I do it so that I know that these are bits of code that will be included in other pages (with “inc” being short for “include”). In the place of the code in the template, I would place this one line of php code: <?php include(“main-nav.inc”); ?> From now on, any time I make a change to the main-nav.inc code, it will automatically be instantly updated on every page of the site that is using that template. Repeat the same steps for the sidenav div and footer div, saving each part as sidenav.inc and footer.inc, and then replacing that code in the template with <?php include(“sidenav.inc”); ?> and <?php include(“footer.inc”); ?> respectively.

Step Four: To review, you should be starting out with just the one template page that you downloaded, (not counting the css file), but you’ve ended up with four pages – the original template page that now has bits of php code included in it, and three new pages, main-nav.inc, sidenav.inc, and footer.inc. You can reuse that template page many times. You’ll be changing the information in the top HEAD portion, and you’ll be changing the information in the main and content divs, but you won’t have to deal with the menus or footers within these templates ever again. (Each separate file listed below).

New index.html file:


<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="description" content="description">
<meta name="keywords" content="keywords">
<meta name="author" content="author">
<link rel="stylesheet" type="text/css" href="default.css" media="screen">
<title>Coffee N Cream</title>

<div class="container">

	<div class="header">

		<div class="title">
			<h1>Coffee N Cream</h1>
		</div>

	</div>

	<div class="main">		

		<div class="content">

			<h1>Porttitor posuere</h1>
			<div class="descr">Jun 13, 2006 by Vulputate</div>

			<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, <a href="index.html">nunc eget pretium</a> porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est.</p>

			<blockquote><p>Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus.</p></blockquote>

			<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam.</p>

			<p>Fusce porta pede nec eros. Maecenas ipsum sem, interdum non, aliquam vitae, interdum nec, metus. Maecenas ornare lobortis risus. Etiam placerat varius mauris. Maecenas viverra. Sed feugiat. Donec mattis <a href="index.html">quam aliquam</a> risus. Nulla non felis sollicitudin urna blandit egestas. Integer et libero varius pede tristique ultricies. Cras nisl. Proin quis massa semper felis euismod ultricies.
			</p>

			<h1>Adipiscing</h1>

			<div class="descr">Jun 11, 2006 by Laoreet</div>

			<p>Aliquam risus justo, mollis in, laoreet a, consectetuer nec, risus. Nunc blandit sodales lacus. Nam luctus semper mi. In eu diam. Phasellus rutrum elit vel nisi. Cras mauris nulla, egestas quis, cursus at, venenatis ac, ante. Fusce accumsan enim et arcu. Duis sagittis libero at lacus. Suspendisse lacinia nulla eget urna.</p>

			<ul>
				<li>Tristique</li>
				<li>Aenean</li>
				<li>Pretium</li>

			</ul>

			<p>In hac habitasse platea dictumst. Duis porttitor. Sed vulputate elementum nisl. Vivamus et mi at arcu mattis iaculis. Nullam posuere tristique tortor. In bibendum. Aenean ornare, nunc eget pretium porttitor, sem est pretium leo, non euismod nulla dui non diam. Pellentesque dictum faucibus leo. Vestibulum ac ante. Sed in est. Sed sodales nisl sit amet augue. Donec ultrices, augue ullamcorper posuere laoreet, turpis massa tristique justo, sed egestas metus magna sed purus. Fusce eleifend, dui ut posuere auctor, justo elit posuere sapien, at blandit enim quam fringilla mi.</p>

			<h1>Interdum</h1>
			<div class="descr">May 24, 2006 by Lectus</div>

			<p>Praesent nisi sem, bibendum in, ultrices sit amet, euismod sit amet, dui. Donec varius tincidunt nisi. Ut ut sapien. Integer porta. Fusce nibh. Curabitur pellentesque, lectus at <a href="index.html">volutpat interdum</a>, sem justo placerat elit, eget feugiat est leo tempor quam. Ut quis neque convallis magna consequat molestie. Nullam semper massa eget ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Pellentesque a nibh quis nunc volutpat aliquam</p>

			<code>margin-bottom: 12px;
font: normal 1.1em "Lucida Sans Unicode",serif;
background: url(img/quote.gif) no-repeat;
padding-left: 28px;
color: #555;</code>

			<p>Eget feugiat est leo tempor quam. Ut quis neque convallis magna consequat molestie.</p>

		</div>

		<div class="clearer"><span></span></div>

	</div>

</div>

main-nav.inc file:

	<div class="navigation">
			<a href="index.html">Vestibulum</a>

			<a href="index.html">Suspendisse</a>
			<a href="index.html">Elemen</a>
			<a href="index.html">Maecenas</a>
			<a href="index.html">Sodales</a>
			<div class="clearer"><span></span></div>
		</div>

sidenav.inc file:

		<div class="sidenav">

			<h1>Something</h1>

			<ul>
				<li><a href="index.html">pellentesque</a></li>
				<li><a href="index.html">sociis natoque</a></li>
				<li><a href="index.html">semper</a></li>
				<li><a href="index.html">convallis</a></li>
			</ul>

			<h1>Another thing</h1>
			<ul>
				<li><a href="index.html">consequat molestie</a></li>
				<li><a href="index.html">sem justo</a></li>
				<li><a href="index.html">semper</a></li>
				<li><a href="index.html">sociis natoque</a></li>

			</ul>

			<h1>Third and last</h1>
			<ul>
				<li><a href="index.html">sociis natoque</a></li>
				<li><a href="index.html">magna sed purus</a></li>
				<li><a href="index.html">tincidunt</a></li>

				<li><a href="index.html">consequat molestie</a></li>
			</ul>

		</div>

footer.inc file:

	<div class="footer">© 2006 <a href="index.html">Website.com</a>. Valid <a href="http://jigsaw.w3.org/css-validator/check/referer">CSS</a> &amp; <a href="http://validator.w3.org/check?uri=referer">XHTML</a>. Template design by <a href="http://templates.arcsin.se">Arcsin</a>

	</div>

***
If you are the first to "discover" any of my posts in StumbleUpon, one of the following categories would probably be the most appropriate to place it into. You don't have to choose one of these, of course, but based on what I usually write about, there's a good chance any of my posts will fall into one of these categories.

Computers * Computer Graphics * Computer Hardware * Computer Security * Databases * Internet * Internet Tools * Linux/Unix * Web development * Weblogs(Blogs) * Windows

Share and Enjoy:

No related posts.

Related posts brought to you by Yet Another Related Posts Plugin.

Bookmark
Related Posts
Tags

5 Comments »

April 2nd, 2009

caren ola Says:

hi there,
this is a piece of code that i had and now im wondering if this is the correct way to do it.. just echo the function…

please let me know whats the proper way or IN PRACTICE in professional way

coz this is what i’ve learned from school and i already heard from one of the programmer that i should separate my css from php and i dont understand what he is trying to tell me.

thank you so much

function fMainNavi()
{
$list = “”;
$list .= “home“;
$list .= “about“;
$list .= “blog“;
$list .= “customize order“;
$list .= “contact“;
$list .= “whyHG?“;
$list .= “faq“;
$list .= “”;
return $list;
}//End fMainNavi

echo fMainNavi(); on each page.
April 3rd, 2009

WebChicklet Says:

obviously, the code you put in the comment got rendered instead of displaying as code, but i was able to see it as you intended in the admin. in any case, i’m not sure what he meant either, since your code didn’t have any css in it at all. nothing to separate out.
April 3rd, 2009

caren ola Says:

thanks for the quick reply..
unfortunately i made a mistake.. i copied the whole thing and output the wrong one.

function fNavi() {
$list = “”;
$list .= “<a class=’navi’ href=’#'>Home</a>”;
$list .= “<a class=’navi’ href=’#'>About</a>”;
$list .= “<a class=’navi’
href=’#'>Contact</a>”;

return $list;
}
echo fNavi();

he said i should not embed the html/css tags in my php code.

im a fresh graduate and im really wanted to improve and learn the good practice and professional way

thanks
April 3rd, 2009

WebChicklet Says:

Ok well, he may be right, unless of course your entire page is being built via php. In that case, it would be pretty much impossible to separate the html and css from the php, since the php would necessarily have to include those elements as well. But if you are only building portions of the page with php, then you could put the html and css outside of the php code. It just depends really on how you are building the page, and what portions of it must be built with php and what doesn’t. Unless the fact that I haven’t had coffee yet is blurring my mind.