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?
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.
You can use javascript to load the header and footer. Create a header.html and footer.html and load them via AJAX.
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" -->
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
<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
Related
So I've recently discovered how to use php includes to include a footer and header in each of my files to avoid copy pasting all the header/footer code to each file. But let's say I have a footer.php, header.php, home.php, and about.php
Do I have my title, opening html/body tag, etc. in the header.php or home.php and about.php.
//header.php
<html>
<head>
links to header.css
links to home.css
links to about.css
</head>
<body>
//home.php
<?php include("header.php"); ?> //PROBLEM: the header.php also includes other .css such as "about.css", etc. that could result in problems later.
</body>
</html>
What Should I do to fix this? One way I thought of is to remove the beginning part(html,head,title) of the header.php file and move it home.css and about.css so they each have their own css links.
You're on the right track. Break out the stylesheets as well as the javascripts into other php files and include them as well. So all pages have the following structure.
home.php
<?php $this_page = "home.php";
include "template.php";
For other pages, just replace the $this_page variable. The structure common to all pages is actually the template.
template.php
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<!-- CSS-->
<?php include "stylesheets.php" ?>
</head>
<body>
<!-- common header -->
<?php include "header.php" ?>
<section>
<!-- PAGE CONTENT HERE determined by $this_page value -->
<!-- 'content_home.php', 'content_about.php'... have the content-->
<?php include "content_$this_page" ?>
</section>
<!-- common footer -->
<?php include "footer.php" ?>
<!-- link javascript files -->
<?php include "scripts.php" ?>
</body>
</html>
The only thing that changes from one page to the next is the value of $this_page. It's what determines which content gets loaded in the template above, and it also determines which CSS and JS files to include.
stylesheets.php
<?php
$cssDir = "path/to/styles/"; //folder where all CSS files live
//Link each page to its CSS file
$styles = [
'home.php' => 'home.css',
'about.php' => 'about.css',
'contact.php' => 'contact.css',
];
?>
<!-- CSS common to all pages -->
<link rel="stylesheet" type="text/css" href="<?="$cssDir/common.css"?>>
<!-- CSS, specific to the current page -->
<link rel="stylesheet" type="text/css" href="<?="$cssDir/$styles[$this_page]"?>>
The same approach can be used with the javascript you link to in scripts.php. Now that your HTML is into discrete modules, it is easy to edit a part of your site without worrying about another part breaking. In particular I recommend never to open a tag in one php file and close it in another because that would be a nightmare to debug, maintain and modify as your site gets bigger.
About paths:
Remember that when the browser sees the page, in place of include "stylesheets.php" and include "scripts.php", it will see the echoed contents of that file exactly as they are. So in those files you want your path to be either:
absolute paths from your domain root (simplest)
relative paths from the location of the top-level php file (eg home.php)
just the file name, if it is located in PHP's include PATH (places where PHP looks for content by default before throwing an error)
For header and nav you have to create a seperate file like nav.php which will contain only the nav and your site header not <head></head> and include it after your header.php. LIKE
//Home.php
<?php
include("header.php"); this will contain your head part mostly your .css and .js files
include("nav.php"); This will only contain header and nav
// home.php code goes here
?>
Also use below code will automatically get path to your root.
<?php
$PATH = "http://localhost/Folder/"; // change this when needed
$PAGE = basename($_SERVER['PHP_SELF']);
?>
Then Add your files like this
<link rel="stylesheet" href="<?php echo $PATH; ?>assets/plugins/font-awesome/css/font-awesome.css">
the bottom line is your code being accessible & easy to maintain, I would have a head.php, header.php & footer.php file. In the head.php you may want to include your config.php if you are connecting to a database & also have all the <html><head><title><link><script> tags you will include in every page then on your index.php or home.php
include('head.php');
include('header.php');
etc etc
I have a index PHP page where I include all PHP files like index.php?page=example. All pages are in another folder, here is the structure:
public_html/index.php
public_html/css/style.php
public_html/pages/
Index calls the CSS file from css/style.php.
Pages are called from index.php like (include pages/example.php) using GET function.
If I run index.php I get no problems with CSS, if I run only the included page like example.php I get CSS problems because the CSS is in index.php and obviously will not show the CSS correct.
But when I run the index.php and include the index.php?page=example then the index CSS show correct but the classes from the included pages does not work...
I suppose the include will only import the code but it seems like something is wrong with the server or I am doing something wrong?
Here is a example code of what I am using. This is index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<?php
include('pages/example.php');
?>
</body>
</html>
Index.php all css classes works fine but the style class from the included pages does not work they are just not styled
You shouldn't write your css code in a php file. Better create a css file and put your style directives in there. You can include css styles best by following conventions, create a basic html template like the following and link to your css file and include the php in there.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="part/to/file.css"> <!-- link your stylesheet here -->
</head>
<body>
<?php
include('path/to/file.php'); // include your php code here
?>
</body>
</html>
Make sure you have header("Content-type: text/css"); as your first line in php file so it renders correctly as css. Then do not include the file. Instead refrence to it like a normal css file only change the .css to .php. <link rel="stylesheet" href="part/to/file.php">. That should get you working. I am assuming your pulling data from a database to fill in your css, so make sure it is format correctly. Do not use something like .headertext{
color:<?=$row['headercolor'];?>; . Instead declare it in php tags. $color= $row['headercolor']; . Then in css part of php file call that variable. .headertext{
color:<?=$headercolor?>;. Hope that helps
This question already has answers here:
Include another HTML file in a HTML file
(41 answers)
Closed 7 years ago.
is there an HTML non-php way of calling to a file? For example, I am working on a large site that I don't want to have to edit each page when I want to edit the menu, footer, etc. Sort of like how wordpress uses php to include the header/menu data, I'd like to have one file to edit, but without using php. I don't know how possible this is. I am developing the site with HTML5/Bootstrap/JS and would like to avoid php if possible!
One method you can use is the .shtml file extension.
It also has SSI capabilities and is server-side, not client-side, therefore it runs off the server.
Server Side Includes (SSI)
Basic syntax to include files is:
<!--#include virtual="/footer.html" -->
<!--#include file="footer.html" -->
<!--#include virtual="/cgi-bin/counter.pl" -->
You can also include other files inside included files.
For example, say you have a header file <!--#include virtual="/header.shtml" --> and you want to include a navigation bar, you just do
header.shtml would contain
<!--#include virtual="/nav.shtml" -->
all inside the same file, say you call it index.shtml
index.shtml would contain this structure
<!doctype html>
<head>
<!--#include virtual="/js_files.shtml" -->
<!--#include virtual="/metatags.shtml" -->
<title>
<!--#include virtual="/title.shtml" -->
</title>
</head>
<body>
<!--#include virtual="/header.shtml" -->
<div>Hello world!</div>
<!--#include virtual="/footer.shtml" -->
</body>
</html>
and inside <!--#include virtual="/header.shtml" -->
you could have this tag included in there <!--#include virtual="/nav.shtml" -->
containing
Home -
About -
Info
By using the same or similar structure for all your files, any change you make to one (include) file, will be affected globally throughout the site.
This is a method I use myself for certain websites where PHP isn't a requirement and have used for many years and works quite well, including Bootstrap-based.
References:
http://httpd.apache.org/docs/2.2/howto/ssi.html
http://en.wikipedia.org/wiki/Server_Side_Includes
http://www.htmlgoodies.com/beyond/webmaster/article.php/3473341
If your are already using java script lets just use JQuery
Using jQuery:
index.html:
<html>
<head>
<script src="jquery.js"></script>
<script>
$(function(){
$("#header").load("header.html");
$("#footer").load("footer.html");
});
</script>
</head>
<body>
<div id="header"></div>
<div id="footer"></div>
</body>
</html>
header.html
<p><b> This is my header file </b></p>
footer.html
<p><b> This is my footer file!</b></p>
You can use an iframe to include one HTML page inside another page.
I have my index.php call to insert a html section during the page load:
index.php:
<html>
<head>
<link href="css/style.css" rel="stylesheet">
</head>
<body>
<!-- navigation -->
<?php include 'navigation.html'; ?>
</body>
</html>
navigation.html:
<div>
<p class="paragraph-inline">Welcome to the amazing navigation system!</p>
</div>
Ok, it's an simple example, the jist of the matter is that at the moment the navigation.html is rendered entirely before being inserted into the page. This means the css is not being called and can only be called if I include the css within the html blob.
I would prefer not to include css into every blob (footer, header, etc...)
So how can I force the site to load the html and apply the styles afterwards? I only want one css link at the top of the main page.
Your navigation should be .php as well. I'm not sure if there are options as far as syntax, but I write it like this <?php include("whatever-partial.php"); ?> This has never been an issue for me. I usually make a head.php with the boring stuff, and then include that in the header.php - and then an index.php - which pulls in header.php and footer.php for example. The server reads all that php - and spits out an html page that is served to your browser and applies the styles. It's not dynamic.
Make sure your include is a php file - then it will be inserted into the page before the browser gets ahold of the page and renders the css. Should be simple as that.
Here's the code I have in the html file to "include" the file "vmenu.php"
<div id="apDivVistaMenus">
<?php
include 'vmenu.php';
?>
<!-- Begin Vista-Buttons.com -->
<!-- End Vista-Buttons.com -->
</div>
The menus used to be between the comments below the php include request. But I save that code into the vmenu.php file, which looks like this:
<link href="../menu-files/peaceland_styles_zkkus.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript"> var vbImgPath="../menu-files/"</script>
<script type="text/javascript" src="../menu-files/sczkkus.js"></script>
<noscript>Xp Style Menu by Vista-Buttons.com v2.73</noscript>
What's the problem?
They are both in the same directory.
If I put the code from the vmenu.php back into the html file, it will load fine.
Thank you!
Note that, in order for PHP includes to work, the file must be parsed by the PHP engine. By default, major web servers like Apache do not run .html files through the PHP interpreter, so you must either specify in your web server's configuration that you want to parse .html files as PHP files, or rename the .html file to a .php file.
Change your code to this:
<div id="apDivVistaMenus">
<!-- Begin Vista-Buttons.com -->
<?php include 'vmenu.php'; ?>
<!-- End Vista-Buttons.com -->
</div>
...and you'll be golden.