Jump to content

Keeping my header and footer on all webpages using PHP?


Coplestone

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. 

Link to comment
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.

Link to comment
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)

Link to comment
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".

Link to comment
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.

Link to comment
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.

Link to comment
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';
Link to comment
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? 

Link to comment
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>
Link to comment
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 }
Link to comment
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.

Link to comment
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.

Link to comment
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.

Link to comment
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.