Keeping my header and footer on all webpages?

Question

I've finished designing my website home page and I've now moved on the some of the other pages, I want my header and footer to appear the same on every page. I've tried this basic way of linking the same stylesheet that makes up my header/footer in the second HTML file (already used in the homepage):

<link rel="stylesheet" href="footer.css" type="text/css"/>
<link rel="stylesheet" href="header.css" type="text/css"/>

I now understand that this isn't going to work. Would a server-side scripting language be my best bet here? Something like PHP?

If so, would anyone be able to link me with an article on how I could do this in PHP, I presume with the

 include

function?

Thanks.

Yes, in php you can include 1 header or footer in all pages! — Amit Verma, Jan 15 '15 at 14:13
Don't even need PHP for this - you could just use SSIs like `` (assuming your server is configured for it - which it probably is) : http://httpd.apache.org/docs/2.2/howto/ssi.html — CD001, Jan 15 '15 at 14:14
@CD001 Which would be a bad idea because it's not a portable solution. — Tek, Jan 15 '15 at 14:16
@Tek how on earth is that any **less** portable than using PHP? Unless you're making the assumption that PHP is more widely used than `Options +Includes` — CD001, Jan 15 '15 at 14:17
Probably a question to ask here on SO. Don't want to clutter up the comments section. — Tek, Jan 15 '15 at 14:29
@Tek - it was a rhetorical question. SSIs have been available on just about every web server for more than a decade without needing to install any additional back-end scripting language or anything; they're arguably the *most* portable way of doing includes. — CD001, Jan 15 '15 at 14:39

score 2 · Accepted Answer · answered Jan 15 '15 at 14:13

You are currently only linking the css for the header and footer. If you want to include the html as the same, create two separate files header.php and footer.php, then include them into each webpage.

<?php include('path/to/header.php');?> // in the location you want the header in the page
<?php include('path/to/footer.php');?> // in the location you want the footer

Essentially, you're making partials and placing them wherever you want them

score 1 · Answer 2 · answered Jan 15 '15 at 14:17

1

Suppose you have header that you want to include in all pages,

header.php

My header

now you can include it to other pages like this:

<?php
include "header.php";
?>

and do same for the footer!

Good luck!

answered Jan 15 '15 at 14:17

Amit Verma

40,709
21
93
115

Interesting, quite simple and makes sense. However my header and footer files are CSS files, can these have a .php extension? – Charlie Coplestone Jan 15 '15 at 14:36

Unamata Sanatarai · Answer 3 · 2015-01-15T14:17:54.487

0

This would be the most basic PHP templating engine:

<?php include 'header.html'; ?>
---HTML content
<?php include 'footer.html'; ?>

edited Jan 15 '15 at 14:17

answered Jan 15 '15 at 14:12

Unamata Sanatarai

6,475
3
29
51

Thanks, In which I presume my website would have to be PHP based. All of my HTML files extensions will have to be .PHP? – Charlie Coplestone Jan 15 '15 at 14:14
@CharlieCoplestone It doesn't _have_ to be PHP-based. It can be nearly any back-end language you want it to be. But you chose PHP for your question, so you got PHP for your answer. – sjagr Jan 15 '15 at 14:16

score 0 · Answer 4 · answered Jan 15 '15 at 14:14

0

Put the code for your header in a separate HTML file and then at the point in each page where you want it to appear use the following:

<?php include '../header.html'; ?>

Obviously put your own file path for the header file in there.

answered Jan 15 '15 at 14:14

MKC

186
1
15

score 0 · Answer 5 · answered Jan 15 '15 at 14:14

You have to create 2 others files : header.php & footer.php. Then you can include them in your others pages :

<?php 
include "url/to/your/header.php"; 
include "url/to/your/footer.php";
?>

Example in a index.php :

<?php
include "views/header.php";
?>

// your content here html/php

<?php
include "views/footer.php";
?>

score 0 · Answer 6 · answered Jan 15 '15 at 14:14

0

Create 2 files "header.html" and "footer.html" and include them at the top and the bottom of your php file.

<?php include("YourFile.html"); ?>

answered Jan 15 '15 at 14:14

WilliamN

89
11

Tek · Answer 7 · 2015-01-15T14:33:52.060

0

You could also use polymer. Download the polymer code (javascript) and include other files this way:

<link rel="import" href="my-custom-element.html">

https://www.polymer-project.org/platform/html-imports.html

It's the latest way to work with future web applications. No need to mess with server side language when you can just focus on the HTML alone.

edited Jan 15 '15 at 14:33

answered Jan 15 '15 at 14:19

Tek

2,888
5
45
73

score 0 · Answer 8 · answered Jan 15 '15 at 14:20

Create a file called header.php and place the header content within that file. Then create another file called footer.php and place all your footer content in it.

You then include them on all your pages individually like so:

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

//content of that page here

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

Keeping my header and footer on all webpages?

8 Answers8

Linked