Question

Firstly I’m very new to web development so forgive me if this is a stupid or repeated question.

All my web pages have the same header so I simply add the following line to the top of every page:

    <?php require('header.html') ?>

This works fine. But now I’d like to vary the image in the header depending on which page it is on. I’m thinking about using a php function like this:

    function create_header($image){
        //1. echo contents of header.html

        //2. replace default image location with $image if not null
    }

Problem is I don’t know how to do steps 1 or 2. Is this possible and/or is there a better way of doing what I want?

Answer 1

You should use some basic form of templating.

Let’s say your header looks like this:

<div id="header">
    <img src="images/myimage.jpg" alt="" />
    <h1>Welcome to my site!</h1>
</div>

If we modify it to turn the image into a variable we get this:

<div id="header">
    <img src="images/<?php echo $header_image; ?>" alt="" />
    <h1>Welcome to my site!</h1>
</div>

Now all you have to do is set your variable before you include your header file like so:

<?php
$header_image = "image2.jpg";
include "header.html";
?>

This concept of basic templating can be applied to an entire page template and is not limited to header files.