Keeping my header and footer on all webpages using PHP?

[Coplestone]

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? I've had answers elsewhere but this, for me, isn't working:

 

"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"

 

 

Any help would be greatly appreciated. 

Edited January 15, 2015 by Coplestone

[maxxd]

What about the suggested code isn't working and how is it not working?

[Coplestone]

What about the suggested code isn't working and how is it not working?

 

Main page: 

http://gyazo.com/eadf5b70bf495d56978f4fd32e926d61

 

PHP files:

http://gyazo.com/84d736a87253e928180af3e0479373e9

http://gyazo.com/b6348463d801b56ad2d14188b7f2ecbc

 

And inside the PHP being included are the CSS files.

[Coplestone]

Main page: 

http://gyazo.com/eadf5b70bf495d56978f4fd32e926d61

 

PHP files:

http://gyazo.com/84d736a87253e928180af3e0479373e9

http://gyazo.com/b6348463d801b56ad2d14188b7f2ecbc

 

And inside the PHP being included are the CSS files.

 

I've basically found out that I can't just link to the CSS file the same as I did in the main html page because it's already been used.

[CroNiX]

What you're doing is exactly the same thing as your first post.

 

I think your problem for including the css on subsequent pages is the location of the files on your webserver.

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

 

Instead of just "footer.css", put the full url to the footer.css location, like 'http://yoursite.com/css/footer.css" (or just /css/footer.css)

[CroNiX]

You can use just "footer.css" if all of your webpages are located in the same directory as the footer.css file, because that's what you're telling it by just using the filename instead of the path to the filename..."look for footer.css in the same directory as this web page".

[Coplestone]

You can use just "footer.css" if all of your webpages are located in the same directory as the footer.css file, because that's what you're telling it by just using the filename instead of the path to the filename..."look for footer.css in the same directory as this web page".

 

I thought it was that easy too until it didn't work?

 

On my main page, these are my links:

http://gyazo.com/c6dc6737a69245cdf019b65b7e25f6ad

 

And on my second HTML page (located in the same directory as my index.html) these are my links:

http://gyazo.com/23b5599d458a7113b0812d19d9d1bb06

 

As you can see I am linking to the same .css files bar one or two that are specific to the pages. But the header/footer don't appear on the second page.

Edited January 15, 2015 by Coplestone

[CroNiX]

CSS by itself won't create a header or footer. They are only styles, not HTML markup. The HTML markup for the header and footer must also appear on all pages for the stylesheets to be able to apply style them.

 

It would be more helpful if you posted the full HTML for both of your pages to troubleshoot this instead of just little snippets.

[ginerjm]

If you are using a standard CSS file for the body of your page you should simply include your header & footer CSS code in there as well. Your hdr and ftr HTML code should be what you are trying to include here.

[cyberRobot]

In your PHP includes, have you tried using root-relative links? That way the includes will work in any folder of your website and you won't need to change them from page to page. Based on the screenshots, it looks like you're using document-relative links.

 

You could try something like this (assuming that the "js" folder is in your root directory):

include $_SERVER['DOCUMENT_ROOT'] . '/js/header.php';

[Coplestone]

CSS by itself won't create a header or footer. They are only styles, not HTML markup. The HTML markup for the header and footer must also appear on all pages for the stylesheets to be able to apply style them.

 

It would be more helpful if you posted the full HTML for both of your pages to troubleshoot this instead of just little snippets.

 

As you've said that, and I read it, I felt a surge of idiocy rock my body. Wow. That was so stupid of me not to add the HTML.. My only question now though, is won't adding the same HTML to each webpage look very repetitive? 

Edited January 15, 2015 by Coplestone

[CroNiX]

Yes, but you can put those in a header.php and footer.php file.

 

Lets say "header.php" contained:

<div id="header">This is my header</div>

And footer.php contained:

<div id="footer">This is my footer</div>

Then in all of your other files you would:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="footer.css" type="text/css"/>
  <link rel="stylesheet" href="header.css" type="text/css"/>
</head>
<body>
  <?php include('path/to/header.php'); ?>
  <div id="content">Here is the content for this page</div>
 <?php include('path/to/footer.php'); ?>
</body>
</html>

Edited January 15, 2015 by CroNiX

[CroNiX]

BTW: I'd combine your css files into a single file and just use comments to create sections so it's easy to find stuff:

 

styles.css

/* Header */
div#header { color:green }

/* Footer */
div#footer { font-weight: bold; color: red }

/* Content */
div#content { color: black; padding: 10px }

[Coplestone]

 

Yes, but you can put those in a header.php and footer.php file.

 

Lets say "header.php" contained:

<div id="header">This is my header</div>

And footer.php contained:

<div id="footer">This is my footer</div>

Then in all of your other files you would:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="footer.css" type="text/css"/>
  <link rel="stylesheet" href="header.css" type="text/css"/>
</head>
<body>
  <?php include('path/to/header.php'); ?>
  <div id="content">Here is the content for this page</div>
 <?php include('path/to/footer.php'); ?>
</body>
</html>

 

Ah I see. This is what I've done:

 

My second page now no longer has the duplicate HTML code, just what is needed which is just an image slideshow:

http://gyazo.com/5ba942657d7f8e5e8dc741813173bb4e

 

In my footer.php (it's quite long so not all of it will be shown):

http://gyazo.com/8846f6dcfad2f9607d968119bb05f94e

 

In my header.php:

http://gyazo.com/ddfacf078502d0cacecdaa9cf7d709ff

 

It's the exact code that's in my index.html page for both the header and footer. I've included it in my second page using: 

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

and in the same page linked to the css files/js files:

<link rel="stylesheet" href="footer.css" type="text/css"/>
 <link rel="stylesheet" href="header.css" type="text/css"/>
 <link rel="stylesheet" href="js/jsbody.css" type="text/css"/>
 <script type='text/javascript' src='js/slider.js'></script>

But it doesn't seem to be displaying. Sorry to be a pain.

[CroNiX]

Do you have your server set to show you errors? Try this at the top of your page above the <html> tag:

<?php
error_reporting(E_ALL | E_NOTICE);
ini_set('display_errors', '1');
?>

Also, your files that contain any php code should use the php extension instead of html, or the server won't parse them as php. Like if the page that isn't working is "index.html" you need to rename it to "index.php"

 

I should also ask, are you sure you have php installed and running on the server?

 

you could easily check by creating this file in the root directory of your site:

info.php

which only contains:

<?php phpinfo(); ?>

Then go to http://yoursite.com/info.php and see if you get a big page telling you all about php installed on your server.

Edited January 15, 2015 by CroNiX

[Coplestone]

 

Do you have your server set to show you errors? Try this at the top of your page above the <html> tag:

<?php
error_reporting(E_ALL | E_NOTICE);
ini_set('display_errors', '1');
?>

Also, your files that contain any php code should use the php extension instead of html, or the server won't parse them as php. Like if the page that isn't working is "index.html" you need to rename it to "index.php"

 

I should also ask, are you sure you have php installed and running on the server?

 

you could easily check by creating this file in the root directory of your site:

info.php

which only contains:

<?php phpinfo(); ?>

Then go to http://yoursite.com/info.php and see if you get a big page telling you all about php installed on your server.

 

 

Currently I'm creating this website offline, I do plan to host it, just not atm. I'm using XAMPP as the server whilst I create this in 'offline mode'. All of my files that contain PHP, just the one at the moment, out of two pages. Is named jspage.php and that contains the 

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

code.

Edited January 15, 2015 by Coplestone

[Coplestone]

I fixed it. I was being an idiot. At least I fully understand now. LOL.

 

Thanks a lot for your help there.

[CroNiX]

What did you change to fix it? Just curious...

[Coplestone]

What did you change to fix it? Just curious...

 

I didn't have Apache started in XAMPP.

[CroNiX]

Ah, yeah that helps glad you got it resolved!