Jump to content
Coplestone

Keeping my header and footer on all webpages using PHP?

Recommended Posts

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 by Coplestone

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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)

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Coplestone

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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';

Share this post


Link to post
Share on other sites

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 by Coplestone

Share this post


Link to post
Share on other sites

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 by CroNiX

Share this post


Link to post
Share on other sites

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 }

Share this post


Link to post
Share on other sites

 

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.

Share this post


Link to post
Share on other sites

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 by CroNiX

Share this post


Link to post
Share on other sites

 

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 by Coplestone

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.