3

I am building my site using HTML files. I would like my header and footer to be dynamic so that I can easily update anything... verses updating 10+ files every time. I'm not familiar with creating a .php file for this use.

I've researched and tried a few ways to do this... but it's not working...I know I'm doing this wrong. haha...

I do not want to make my index.html into index.php. Is there an easier way to do this?

5
  • Here's some info: boutell.com/newfaq/creating/include.html, but I'd consider using a layout file (if you haven't already). There are other ways to do this as well. Commented Aug 14, 2013 at 16:10
  • 2
    server-side includes are an option (nothing to do with PHP), otherwise you have to make it index.php Commented Aug 14, 2013 at 16:11
  • You could change your server setup to serve html as php if you really want to, but the better approach is to change all URLs to use extension-less names. The basic idea is each page is a directory with an index file. You point people to the directory and the corresponding index file runs. No user ever sees the file extensions. Commented Aug 14, 2013 at 16:13
  • Google is your friend, there are LOTS of examples on how to build a php template. Here's just one: 1stwebdesigner.com/css/how-to-create-php-website-template Commented Aug 14, 2013 at 16:14
  • OK wow, you're getting a lot of bad answers here. Commented Aug 14, 2013 at 16:20

5 Answers 5

1

If you absolutely can't make your index a php file. Then, you can always make an ajax request to get the header and footer. However, it is very simple to have a dynamic header and footer with php.

The index

<!DOCTYPE html>
<html>
   <head>
       <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
       <?php include 'header.html'; ?>
       <?php include 'footer.html'; ?>
   </body>
</html>

The header.html file

<header>
    <p>Some stuff in my header...</p>
</header>

The footer.html file

<footer>
    <p>Some stuff in your footer</p>
</footer>

The style.css file

header {
    /* My styles here */
}

footer {
    /* My styles here */
}

Hope this helps you.

Sign up to request clarification or add additional context in comments.

Comments

1

You can use javascript to load the header and footer. Create a header.html and footer.html and load them via AJAX.

Comments

0

You can use Server Side Includes and save your files as .shtml More information from Wikipedia: http://en.wikipedia.org/wiki/Server_Side_Includes

The syntax is eg. <!--#include file="header.shtml" -->

Comments

0

Edit your .htaccess file and add these line, this will tell apache to treat .html as .php

AddType application/x-httpd-php .html

and for .htm

AddType application/x-httpd-php .htm

1 Comment

Bad idea. This will slow down serving all static content and can mess up caching.
0
<html>
<body>
<!--#include virtual="head.html" --> 
<h1>Body goes here...</h1>
<!--#include virtual="footer.html" --> 
</body>
</html>

you could try something like this.

If it doesn't seem to work, try changing your extension to .shtml, instead of .html.

for more info on server include you can try this site: http://www.boutell.com/newfaq/creating/include.html

5 Comments

this is a server-side include and requires the shtml extension or a specially configured server
yeas but is a solution using only html.
No it isn't. It uses HTML and Apache
(to be clear, by the time the page content is treated as HTML rather than just text, the include has already been done. Those lines are text substitution. Nothing to do with HTML at all. They just look like HTML)
still html, with a minor server config, php is not required.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.