Building BobSmithPhotography.net has stopped expanding because I've been overwhelmed with spam on the comment forums. So, if you're here and have questions about web design come and visit Forums, Blogs, Wikis dot com. It has articles that I've written, some of which are also here, and a web design forum as well so you can ask any questions you may have. There is still a lot of good stuff here though, so poke around the links and take a look.

Home » The tutorial » Adding Pages

Adding Pages 

Bob's happy with the design that we presented, but not with the content.  The lorem ipsum text that's filling space let Bob know what his site would look like, but isn't what he wants to show to customers.  We need to add pages.

First we're going to make a couple of changes to our header.php file.  Look in header.php for the following:

<title>Cleveland Wedding Photographer :: Bob Smith Photography</title>

and change it to:

<title><?php echo $pagetitle; ?></title>

Just go with this change for now, I'll explain it in just a minute.

Also in header.php change:

<a href="">Home</a><br>
<a href="portfolio">Portfolio</a><br>
<a href="contact">Contact</a><br>

to

<a href="index.php">Home</a><br>
<a href="portfolio_wedding.php">Wedding Portfolio</a><br>
<a href="portfolio_portrait.php">Portrait Portfolio</a><br>
<a href="pricing.php">Pricing</a><br>
<a href="contact.php">Contact</a><br>

This will change the navigation links on the left side to link to pages we're about to create.

Ok, back to the title change.  Open up index.php.  You should see the following line:

<?php include('header.php'); ?>

Change it to:

<?php
$pagetitle = 'Cleveland Wedding Photographer :: Bob Smith Photography';
include('header.php');
?>

Now when header.php is included the title tags will contain the variable $pagetitle. It doesn't change anything that you see on page for index.php, but it will make the additional pages easier.

Adding Pages
Now we need to create 4 additional files - portfolio_wedding.php, portfolio_portrait.php, pricing.php, and contact.php.  These are the same files that we changed Bob's navigation links to.

For now, I'm just going to give you the code for these pages.  But it should look very familar.  They are similar to the index.php file we already created.

portfolio_wedding.php

<?php
$pagetitle = 'Wedding portfolio';
include('header.php');
?>
<h1>Wedding Portfolio</h1>

<?php include('footer.php'); ?>

 

portfolio_portrait.php

<?php
$pagetitle = 'Portrait portfolio';
include('header.php');
?>
<h1>Portrait Portfolio</h1>

<?php include('footer.php'); ?>

 

pricing.php

<?php
$pagetitle = 'Pricing';
include('header.php');
?>
<h1>Pricing</h1>

<?php include('footer.php'); ?>

 

contact.php

<?php
$pagetitle = 'Contact Bob Smith';
include('header.php');
?>
<h1>Contact Bob</h1>

<?php include('footer.php'); ?>


Now, when we look at Bob's site we'll see a total of 5 different pages.  Of course, they're all blank.  But we'll start fixing that before too long...

Do you see how each page has a different value for the variable $pagetitle?  That will give each page a unique title while still being able to include the same header.php file.  Pretty slick, huh?



Content managed by the Etomite Content Management System.