I have several files with a header and a footer, let's say file1.php, file2.php and file3.php
These files include() the files header.php and footer.php.
Now the concern is this... Each page has to load a general header content with certain css styles, but also a -specific- style for such page. This also happens on the footer: it loads a bunch of scripts for all pages, but a specific script for a specific page.
How can I achieve this?
I certainly don't want to put the specific script on the specific page because it might not only be attached to one, but several ones, the js script or the css style can be attached to five or ten pages...
I was thinking a switch() for each case in the header or footer page, then any conditional (such as $_SERVER['PHP_SELF']) in the other pages, but how can I do the include thing? is it include() what I'm looking for?
Thank you.
This is pretty much beyond the scope of Stackoverflow but why not.
Switch inside the template
I see you added that you were thinking of using a switch. Here is an example of something simple you could do.
header.php
<html>
<head>
<title>...</title>
<?php switch(basename($_SERVER["SCRIPT_FILENAME"], '.php')) {
case 'file1': ?>
<script src="file1.js"></script>
<?php break;
case 'file2': ?>
<script src="file2.js"></script>
<?php break;
}
?>
</head>
<body>
Just sample code in-between the case and break. This code initiates a switch on the file name, file1.php would be 'file1'.
Output Buffering
What else you could do is output buffering. Let's say you have a template at file1.tpl.php, then you have header.php. Inside file1.php, you could do this:
ob_start();
include "file1.tpl.php";
$content = ob_get_clean();
include "header.php";
Everything processed from file1.tpl.php will be stored in $content. Then inside header.php, you load $content where you see fit:
<html><head><?= $content ?></head><body>
A simple implementation might go like so:
Define a global styles array (say, in a config.php file that gets included on every page), which holds an array of CSS files that can be load:
global $styles = array(
"foo" => "/styles/foo.css",
"bar" => "/styles/bar.css",
);
with the value holding the path to the relevant CSS file.
At the top of the page in question, setup a variable to determine which CSS files to include:
$activeStyles = array('foo');
Then, in your header.php, check for the existence of the variable, and whether or not it contains any values:
<?php
if(isset($activeStyles) && count($activeStyles) > 0) {
# iterate through the array, generating the appropriate <link /> tags
foreach($activeStyles as $styleKey) {
?>
<link rel="stylesheet" type="text/css" href="<?php echo $styles[$styleKey] ?>" />
<?php
}
}
?>
You would use the same concept for scripts.
Related
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?
Thanks.
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
Suppose you have header that you want to include in all pages,
header.php
My header
now you can include it to other pages like this:
<?php
include "header.php";
?>
and do same for the footer!
Good luck!
Put the code for your header in a separate HTML file and then at the point in each page where you want it to appear use the following:
<?php include '../header.html'; ?>
Obviously put your own file path for the header file in there.
You have to create 2 others files : header.php & footer.php. Then you can include them in your others pages :
<?php
include "url/to/your/header.php";
include "url/to/your/footer.php";
?>
Example in a index.php :
<?php
include "views/header.php";
?>
// your content here html/php
<?php
include "views/footer.php";
?>
Create 2 files "header.html" and "footer.html" and include them at the top and the bottom of your php file.
<?php include("YourFile.html"); ?>
This would be the most basic PHP templating engine:
<?php include 'header.html'; ?>
---HTML content
<?php include 'footer.html'; ?>
Create a file called header.php and place the header content within that file. Then create another file called footer.php and place all your footer content in it.
You then include them on all your pages individually like so:
<?php include('header.php'); ?>
//content of that page here
<?php include('footer.php'); ?>
You could also use polymer. Download the polymer code (javascript) and include other files this way:
<link rel="import" href="my-custom-element.html">
https://www.polymer-project.org/platform/html-imports.html
It's the latest way to work with future web applications. No need to mess with server side language when you can just focus on the HTML alone.
I have a index.php page, which has a header.php page included in it, which references a style.php file.
The page I am working on has the following in the head:
<?php
$page = "testimonials";
include 'header.php';
?>
The header.php has if statements to set the correct style sheets and variables for the nav bar etc and also includes as I said, the style.php sheet using the following code:
<link href="style.php"
rel="stylesheet"
type="text/css">
My question is, I am trying to use an if statement in style.php as below:
<?php
header("Content-type: text/css; charset: UTF-8");
if ($page == testimonials){
print "margin-top: 5%;\n";
}
?>
The if statement does not seem to be working however as this is not being printed, and I am wondering if this is because I can't pull the value through the include, then through the stylesheet href?
Thinking about it, I think that as stylesheets are not included like .php files, this may be the reason, could someone just confirm this is the case, or suggest a better work around?
I was thinking of perhaps putting some CSS in the <head> of the PHP include for my file under an if statement, but I feel that may not be best practice.
You cannot do this .... the link element is not an actual server side include. If you want to give the style.php file access to the variable in the header.php page, pass it via the query-string to the style.php page in the link tag.
<link href="style.php?page=<?=$page?>"
rel="stylesheet"
type="text/css">
Then in the style.php page, read the value from the query-string parameter:
<?
$page = $_GET['page'];
?>
Then, you can use it in an if statement inside the style.php page:
if ($page == 'testimonials'){
Yes. If you include some file, it is the same, as if you write the code from that file there, instead of include.
Your Problem is this:
if ($page == testimonials){
It should be
if ($page == 'testimonials'){
Cheers
I've been playing with a number of different ways for including header.php and footer.php files for a site I am building.
What I'm not sure about is the most efficient place to reference the several .css and .js files that are required for different individual pages on the site. I have set up the included pages as follows (these are simplified to their minimum to make the point of the structure):
header.php:
<html>
<head>
<title>Example Page 1</title>
<link rel="stylesheet" type="text/css" href="menu_styles.css"/>
<script type="text/javascript" src="main_menu.js"></script>
</head>
<body>
<!------MENU CODE HERE------>
Followed by whatever page .php:
<?php
include 'header.php'
?>
<div>Page Content 1</div>
<div>Page Content 2</div>
<?php include 'footer.php' ?>
Where footer.php in its simplest form is as follows:
</body>
</html>
I can see the logic in referencing menu_styles.css and main_menu.js in the header as that is where the menu code will always be written. However, if I have an individual page with, for example, an image scroller with its own required js/css files, where is the most efficient way to define these? Can I do it within the main page itself or do I have to define every single .css and .js within header.php? This would produce a long list and to me seems inefficient as many pages will not require the links defined to these files.
I would do the following:
Create a global variable containing all of the CSS files, and another one for all Javascript files
In your "whatever php file", first change the global variables to contain the right CSS files and JS files.
Call require or include to insert your header, which adds the CSS files based on the global variables
Do whatever you need in your "whatever php" file
include or require your footer file, which inserts all of the JS files based on the global variable (it is recommended to include JS files at the end of the document to prevent pageload delays)
You can add the src of every needed css or JS to an array (PHP variable).
Then at the end of your page (before closing body), add your and tags.
<?php
include 'header.php';
$css = array();
$js = array();
?>
<div>Page Content 1</div>
<div>Page Content 2</div>
// content and content imports may add sources to css and js arrays
// where footer.php prints <script> and <link> tags, importing needed css and js
<?php include 'footer.php' ?>
</body>
</html>
You could use a different header template for the page with the image scroller, and just include the image scroller css in that header.
You can include Javascript files anywhere in your page, and in fact some consider it better practice to include them at the bottom of your page, so they load after your HTML content, and therefore don't delay the loading of content. However I believe CSS files must always be inlcuded within the head tags.
header:
<html>
<head>
<title>Example Page 1</title>
<?php
if ($css_inc != NULL) {
foreach ($css_inc as $value) {
echo '<link type="text/css" href="' . $value . '"></link>';
}
}
if ($js_inc != NULL) {
foreach ($js_inc as $value) {
echo '<script type="text/javascript" src="' . $value . '"></script>';
}
}
?>
</head>
<body>
<!------MENU CODE HERE------>
page.php
<?php
$css_inc = array('style.css', '\public\css\gallery.css');
$js_inc = array('public.js', '\public\js\jquery.js', '\public\js\jqueryui.js');
include 'header.php'
?>
<div>Page Content 1</div>
<div>Page Content 2</div>
<?php include 'footer.php' ?>
I have a common HTML header file which I use in several PHP files. I have a general CSS file which I have included inside the <head> tags in the header file. However, I want to include one additional CSS file only in one PHP file. Since I have common header file, do I have to include the additional CSS file in the common header or there is any way that I can include the additional CSS file only in the PHP file where it is required?
Thanks.
This is exactly why a lot of people include a piece of code in their header files that allow you to add more stylesheets to it on a per-page basis.
Something like this (goes in <head>):
<?php
if (!empty($styles) && is_array($styles)) {
foreach ($styles AS $style) {
echo '<link rel="stylesheet" href="/assets/css/'. $style .'">';
}
}
?>
You could expand on that if you wanted to include media types, but that snippet allows you to put a variable at the top of an individual script if you need a specific stylesheet:
<?php
$styles = array('custom_style.css');
?>
In that common header include file, use a conditional statement (if) and depending on the condition, place the link to the stylesheet.
Example:
<?php
if($somevar){
echo '<link rel="stylesheet" type="text/css" href="stylesheet.css">';
}
?>
The $somevar is your condition.
Just:
echo '<link rel="stylesheet" type="text/css" href="your-specified.css">';
in your desired PHP file.
One other option is to set a special class on the body on your page and use CSS selectors accordingly in only ONE CSS file:
<body class="<?php echo $pageName; ?>">
If your special page is "special", then use in the CSS:
body.special h2 {...}
It will override your common h2 declaration.
Much more easier to maintain if the changes in this special page are minor.
Something basic that i don't understand:
I have header.php with navigation bar for my site. Inside it, there's a <head>...</head> section.
Now, in each other page of my site, I'm using require_once 'header.php' so that each page will show the navigation bar. But, I need also specific <head>...</head> sections to the different page.
For example, in page customers.php, I'm using <script>...</script> to include the jQuery library. I don't need to include it in other pages.
Now, searching the web I see that multiple head tags is wrong syntax.
So, how can anyone:
avoid multiple "head" tags
WHILE
separating his work to different PHP files and including them ?
You have to change your page structure and employ templates.
Instead of loading header at the top of the code, you have to do it at the bottom!
And page code should output not a word, but collect all data in variables.
And only after that output can be started by calling template.
A example layout is going to be like this:
First. page itself.
it outputs nothing but only gather required data and calls a template:
<?
//include our settings, connect to database etc.
include dirname($_SERVER['DOCUMENT_ROOT']).'/cfg/settings.php';
//getting required data
$DATA=dbgetarr("SELECT * FROM links");
$pagetitle = "Links to friend sites";
//etc
//and then call a template:
$tpl = "links.php";
include "template.php";
?>
Next, template.php which is your main site template, consists of your header and footer:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My site. <?=$pagetitle?></title>
</head>
<body>
<div id="page">
<? include $tpl ?>
</div>
</body>
</html>
And, finally, links.php is the actual page template:
<h2><?=$pagetitle?></h2>
<ul>
<? foreach($DATA as $row): ?>
<li><?=$row['name']?></li>
<? endforeach ?>
<ul>
easy, clean and maintainable.
there are many advantages in such approach:
as requested, you can populate header with actual page-relevant data.
HTTP headers can be sent as well, before any output. It includes cookies, sessions, cache-control and many more.
it's 2011 today. AJAX era. You may wish change your code to return JSONed data instead of whole HTML page. It's going to be easy using such layout.
Imagine you're going to create very similar site with just different design. You will have to change only templates and don't touch engine files. That's really great advantage of using templates.
Here are some simple ways you can look at.
You can have jQuery on the pages
that don't need it; once it's
downloaded it will be cached so it
still wont use more bandwidth.
You can move out the closing </head>
tag from header.php and close the
<head> tag in the page that's including
header.php.
You can include javascript anywhere
on a page, not only in the header.
You can also do something like this.
Before you do require_once 'header.php'; you put a variable called $jquery = true;
In your header.php file you check if $jquery is set to true, if it is, you include jQuery.
in header.php
you can type like this
<head>
<?php echo $script; ?>
</head>
then in your customers.php
you can first assign the variable
$script = '<script>...</script>'
then
require_once 'header.php'
One possible solution.
You create a global variable before including header.php.
You test this variable in header.php.
If it is true, You print script or something. Something like this:
<!-- Fragment of header.php -->
<?php if ($i_want_jquery): ?>
<script ...>
...
</script>
<?php endif; ?>
On the other hand, a template may be a better solution.