Grow your CSS skills. Land your dream job.

How to include php headers and footers on html site

  • # August 26, 2012 at 1:22 pm

    Alright, so I built my site completely using html and css. I am finding that as I’m updating it along the way it is becoming rather laboursome to have to go to every single .html page to modify the header and footer code just so it will function the same. I know you can simplify this using php so you only have to modify the one file and it will automatically update for every page. So I guess my question is how do I go about doing that?

    # August 26, 2012 at 2:03 pm
    < ?php include 'header.php'; ?>

    You need to change your file extensions to .php

    So the end result would look like this:

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



    ALL YOUR CONTENT HERE



    < ?php include 'footer.php'; ?>
    # August 26, 2012 at 2:34 pm

    I usually also have a footer.php file and a sidebar.php file so I can break everything up and include it except the main content.

    # August 26, 2012 at 3:37 pm

    So let’s say my I change my index.html to index.php. I copy all of my header code and paste it into a header.php file and then add this code to the top of every page?

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

    Will the header code then look something like this?

    < ?php
    < ?xml version="1.0" encoding="UTF-8"?>
    < !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">











    ?>

    I tried experimenting with that and it won’t let me preview the index.php file (probably because it’s not a webpage)

    # August 26, 2012 at 3:49 pm

    The header doesn’t need to include < ?php ?> tags before and after, it can just be pure HTML.

    # August 26, 2012 at 4:02 pm

    Alright, how do I preview the .php files? Whenever I open them in the web they just close and then moves to my download folder.

    # August 26, 2012 at 4:05 pm

    Is there a reason you’re using XHTML? You can make it even more simple by using the HTML5 doctype (add this to your header.php file):

    < !doctype html>







    I also noticed your title. You’re going to need a loop to determine the title of the page.

    and then to include it for every page, just paste this in your index file(s)

    < ?php include 'header.php'; ?>
    __
    # August 26, 2012 at 4:06 pm

    What do you mean by “preview”? Are you trying to open them in a browser on your local machine? Are they on your live website? Do you have PHP installed?

    # August 26, 2012 at 4:09 pm

    I am trying to open them in my browser on my local machine. That is how I have been viewing my .html pages so far as my site isn’t completely live yet.

    # August 26, 2012 at 4:09 pm

    Yeah, if you’re trying to open them up locally, it won’t work. You would need to download Wamp (Windows) or Mamp (Mac). If you upload to a live server, it should work.

    # August 26, 2012 at 4:16 pm

    I’ll try downloading the Mamp and let you know the results. Looks like it’s going to take a couple minutes to download

    # August 26, 2012 at 4:19 pm

    Also, check out this screencast so you have an idea of how it works.

    http://css-tricks.com/video-screencasts/86-mamp/

    # August 26, 2012 at 5:01 pm

    Alright, MAMP is working properly, but I’m having a problem. I changed my index.html to index.php and placed it in the mamp/htdocs folder. I tested to see if it worked by placing random text into the index.php file and it appeared in the browser so Woot! But when I paste my html code that I had before the page remains completely blank. Not even any < p >text< /p > is showing up. I’m not sure what I should do from here

    # August 26, 2012 at 5:24 pm

    @hrechkaness Did you put anything for the root password?

    Also, just for kicks, try adding this before the HTML (at the very top of the page)

    < ?php

    and then

    ?>

    after the html

    # August 26, 2012 at 5:54 pm

    I don’t believe I put anything for the root password. I tried adding the php code to the beginning and end of my html and when I refreshed my web page I got a server error instead of a blank white page

    < ?php

    ?>
Viewing 15 posts - 1 through 15 (of 33 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".