php templating header and footer - php

For each page on the site I have a header and footer, so I decided to create a template for both then just include them on each page.
<?php include_once("header.php")?>
contents of the page...
<?php include_once("footer.php")?>
header.php contains:
<!DOCTYPE html>
<head>
<title>Items Page</title>
<link rel="stylesheet" href="assets/css/item.css">
<script src="assets/css/item.js"></script>
</head>
<body>
<header>
contains a navigation bar
</header>
footer.php contains:
<footer>...</footer>
</body>
</html>
The above codes are for the Items page however I also have Users page they both have the same footer and header markup however different linked CSS and JS files. How can change <link> and <script> inside the <head> tag on the header.php include file if the user navigates to the user page, for example: mysite.com/user/blabla.
The correct link for the Users page should be:
<link rel="stylesheet" href="assets/css/user.css">
<script src="assets/css/user.js"></script>

Use this format in all pages
<?php
$page_title = "title_here";
$cssfiles = array("path/to/css1.css", "path/to/css2.css", ...);
$jsfiles = array("path/to/js1.js", "path/to/js2.js", ...);
?>
<?php include_once("header.php")?>
contents of the page...
<?php include_once("footer.php")?>
And in header.php
<head>
<title><?php echo $page_title;?></title>
<?php
foreach($cssfiles as $css){
?>
<link rel="stylesheet" href="<?php echo $css;?>">
<?php
}
foreach($jsfiles as $js){
?>
<script src="<?php echo $js;?>"></script>
<?php
}
?>
</head>

Try this way
User Type Page
<?php
$pageType = 2; // USER
?>
<?php include_once("header.php")?>
contents of the page...
<?php include_once("footer.php")?>
in other pages
<?php
$pageType = 1; // OTHER
?>
<?php include_once("header.php")?>
contents of the page...
<?php include_once("footer.php")?>
and in header
<!DOCTYPE html>
<head>
<?php if ( $pageType == 1 ) { ?>
<title>Items Page</title>
<link rel="stylesheet" href="assets/css/item.css">
<script src="assets/css/item.js"></script>
<?php } else if ( $pageType == 2 ) { ?>
<title>User Page</title>
<link rel="stylesheet" href="assets/css/user.css">
<script src="assets/css/user.js"></script>
<?php } ?>
</head>

Split up your nav and header include.
header.php
<!DOCTYPE html>
<head>
<title>Items Page</title>
<link rel="stylesheet" href="assets/css/item.css">
<script src="assets/css/item.js"></script>
nav.php
</head>
<body>
<header>
contains a navigation bar
</header>
whatever.php
<?php include_once("header.php")?>
<link rel="stylesheet" href="assets/css/user.css">
<script src="assets/css/user.js"></script>
<?php include_once("nav.php")?>

session_start();
if($_SESSION['user'])
{
?>
<link rel="stylesheet" href="assets/css/item_user.css">
<script src="assets/css/item_user.js"></script>
<?php
}
else
{
?>
<link rel="stylesheet" href="assets/css/item.css">
<script src="assets/css/item.js"></script>
<?php
}
?>

Try to set every page a variable for css and javascript like so:
$css = 'assets/css/user.css';
$javascript = 'assets/css/user.js';
<?php include_once("header.php")?>
contents of the page...
<?php include_once("footer.php")?>
on the header page you need to call those variable:
<!DOCTYPE html>
<head>
<title>Items Page</title>
<link rel="stylesheet" href="<?php echo $css; ?>">
<script src="<?php echo $javascript; ?>"></script>
</head>
<body>
<header>
contains a navigation bar
</header>

You can do like this
header.php
if(!isset($custom_css)) {
echo '<link rel="stylesheet" href="assets/css/item.css">';
}
if(!isset($custom_js)) {
echo '<script src="assets/css/item.js"></script>';
}
And in your users files, give values to $custom_css and $custom_js before including header
user.php
$custom_css = '<link rel="stylesheet" href="assets/css/user.css">';
$custom_js = '<script src="assets/css/item.js"></script>';
<?php include_once("header.php")?>

Related

How do I get the template file for a single.php pods page?

I am currently using a template file called single-product.php and want to check for page template in header.php. I've tried using get_page_template_slug($post->ID) but it returns empty. I've also tried is_page_template('single-product.php'); but that returns nothing, as well.
Here's my header. You'll notice that I'm trying to get the template file through s_page_template('single-product.php') ny setting it as the value of $isProductPodTemplate at the top and use it in the if statement at the bottom:
<?php
$page = get_the_title($post->ID);
$frontpageId = get_option('page_on_front');
$isStandardTemplate = is_page_template('standard.php');
$isContactTemplate = is_page_template('contact.php');
$isProductPodTemplate = is_page_template('single-product.php');
?>
<!DOCTYPE html>
<html id="mainHTML" lang="en">
<head>
<title>Architectural Iron Works</title>
<meta name="description" content="Architectural Iron Works">
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link rel=icon type="img/ico" href=/favicon.ico> -->
<link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/main.bundle.css" />
<link href="https://fonts.googleapis.com/css?family=Poiret+One" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet">
<?php wp_head(); ?>
<script type="text/javascript">
document.getElementById("mainHTML").style.display = "none";
</script>
</head>
<body>
<!-- Header -->
<?php
if ($post->ID == $frontpageId)
{
get_template_part('/includes/_home-header');
echo "<div class='main-content'>";
}
else if (is_404() ||
$isContactTemplate ||
$isStandardTemplate)
{
get_template_part('/includes/_no-banner-header');
echo "<div class='main-content no-banner'>";
}
else if ($isProductPodTemplate)
{
// do something
}
else
{
get_template_part('/includes/_default-header');
echo "<div class='main-content'>";
}
?>

when i normally run html bootstrap enabled code, it shows proper output but when i load it using codeigniter view it shows different output

This is my directory:
miuse/application
miuse/application/views/templates/header.php
miuse/bootstrap/css
miuse/bootstrap/js
miuse/bootstrap/fonts
This is my controller code:
<?php
class page extends CI_controller{
public function view($page= 'home')
{
if(!file_exists(APPPATH.'views/pages/'.$page.'.php'))
{
show_404();
}
$data['title']='Moodlist home';
$this->load->view('templates/header', $data);
}
}
?>
This is my view code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>
<?php echo $title; ?>
</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://localhost/miuse/bootstrap/css/bootstrap.css">
<link rel="stylesheet" href="header.css" type="text/css">
</head>
<body>
<header class="container">
<div class="row">
<h1 class="col-sm-4">List</h1>
<nav class="col-sm-8 text-right">
<p>Home</p>
<p>Category</p>
<p>About us</p>
</nav>
</div>
</header>
</body>
</html>
when i run my view normally in a browser it shows proper output but when i load it with codeigniter view then it shows different output which i dont want.
I guess your header.css file is not being loaded.
Put the header.css file in miuse/bootstrap/css directory.
And change your code from,
<link rel="stylesheet" href="header.css" type="text/css">
to
<link rel="stylesheet" href="http://localhost/miuse/bootstrap/header.css" type="text/css">
When loading css and other stuff I would recommend using base_url() in your head area
<head>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('bootstrap/css/bootstrap.css');?>">
<link rel="stylesheet" type="text/css" href="<?php echo base_url('assets/css/header.css');?>">
</head>
Make sure you have set the base url in config.php and autoload the url helper.

How do I put my content in the right place and for all my pages?

I need help for something please. I'm working on my structure, but I've some problems...
I created a page called "page-container.php" and the content is:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?= $page_title; ?></title>
<link href="css/style.css" rel="stylesheet">
<link href="css/fonts/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Patrick+Hand" rel="stylesheet">
</head>
<body id="<?= $page_id; ?>">
<?php include "includes/header.php"; ?>
<div class="wrapper">
<div class="page-content">
<?php if(isset($sidebar)): ?>
<div class="main-container">
<div class="main-content">
<?php endif; ?>
<h1 class="page-title"><?= $page_title; ?></h1>
I WANT TO HAVE MY CONTENT HERE FOR ALL MY PAGES
</div>
</div>
</body>
</html>
You can see the "I WANT TO HAVE MY CONTENT HERE FOR ALL MY PAGES".
What I mean is that when I write the content in my other pages (for example, my registration page), I want that all the content is placed at this location, like this:
http://prntscr.com/a3oz5k
All my other pages are like this (exemple with index.php):
<?php
$page_title = "Home";
$page_id = "home";
?>
<?php require "includes/page-container.php"; ?>
If I want to write some content in this page, I need to do like this:
<?php
$page_title = "Home";
$page_id = "home";
?>
<?php require "includes/page-container.php"; ?>
<div id="mycontent">
<p>Heellloo</p>
</div>
But look the result: http://prntscr.com/a3p32y
In the code source this is not normal... http://prntscr.com/a3p3kg
My content is below the html and body tag and I want it to be placed just below my h3 title. How can I do please?
Simple example using ob_start(), ob_get_clean().
<?php
ob_start();
?>
<div id="mycontent">
<p>Hello</p>
</div>
<?php
$page = ob_get_clean();
require "includes/page-container.php";
?>
And then in page-container.php just do echo $page;.
Your code will be still formatted as HTML in your editor instead if it would be in a variable.
You can also split your page-container.php into two parts and include the first part before the content and the second one after.
Reference: ob_start(), ob_get_clean()
You can keep another vartiable say $page_content and use as below :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title><?= $page_title; ?></title>
<link href="css/style.css" rel="stylesheet">
<link href="css/fonts/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Patrick+Hand" rel="stylesheet">
</head>
<body id="<?= $page_id; ?>">
<?php include "includes/header.php"; ?>
<div class="wrapper">
<div class="page-content">
<h1 class="page-title"><?= $page_title; ?></h1>
<?= $page_content; ?>
</div>
</div>
</body>
</html>
And for some content in another page
<?php
$page_title = "Home";
$page_id = "home";
$page_content = "content";
?>
<?php require "includes/page-container.php"; ?>
`

How to add css files using PHP inside the <head> tag?

Ok, let me explain:
I have a some files, something basic like this:
index.php
<html>
<head>
<title>Simple page</title>
</head>
<body>
<?php include 'home.php'; ?>
</body>
</html>
home.php
<div class="thisWillBeBlue">Still not blue</div>
style.css
.thisWillBeBlue {background: blue}
Now the question: Using php I want to insert the style.css inside the head tag, calling it from the file home.php. Well, I came out with a solution, but it was not very effective:
index.php
<?php $css = array();
$css[] = 'linktothecss.css'
?>
<html>
<head>
<title>Simple page</title>
<?php
foreach($css as $item){
echo "<link rel='stylesheet' href='".$item."' />";
}
?>
</head>
<body>
<?php include 'home.php'; ?>
</body>
</html>
But the problem it is, If I call the css from home.php it will be added to the array later, therefore it will not be echoed inside the head tag. Any ideas?
You could do it using ob_start() and ob_end_flush() functions
e.g.
index.php
<?php
$csspage = "default.css";
function loadCSS($buffer) {
global $csspage;
return (str_replace('{{ css }}', $csspage, $buffer));
}
ob_start("loadCSS"); ?>
<html>
<head>
<!-- the string {{ css }} is just a placeholder that will be replaced
with the new value of $csspage defined later in the code, otherwise
it will replaced with its initial value (default.css)
-->
<link href="{{ css }}" />
</head>
<body>
<?php include 'home.php'; ?>
</body>
</html>
<?php ob_end_flush(); ?>
home.php
<?php $csspage = "custom_style.css"; ?>
<div class="thisWillBeBlue">blue</div>
Further reference: http://it1.php.net/ob_start
I think you are looking for something like this ..(include a piece of code in their header files, so that it will allow you to add more stylesheets )
This will allow you to add more stylesheets to it on each page.
(add this to <head>)
<?php
if (!empty($styles) && is_array($styles)) {
foreach ($styles AS $style) {
echo '<link rel="stylesheet" href="/assets/css/'. $style .'">';
}
}
?>
You can put a variable at the top of an individual script if you need a specific stylesheet:
<?php
$styles = array('custom_style.css');
?>
CSS file references can be placed in the body of your code, if needed.
<body>
<link href="linktothecss.css" rel="stylesheet" type="text/css" />
<div class="thisWillBeBlue">
I'll be blue as soon as linktothecss.css finishes loading!
</div>
</body>
The only difference is that when in the HEAD, they are guaranteed to be loaded before the page is rendered. When they are in the BODY, there may be a split-second where they are still loading and the styles haven't been applied yet.
If you definitely want them in the HEAD, you could define the css requirements in a separate folder with the same file name, like so:
index.php:
<html>
<head>
<?php
include('css-requirements/home.php');
?>
</head>
<body>
<?php include('home.php'); ?>
</body>
</html>
and
css-requirements/home.php:
<link href="mycss.css" rel="stylesheet" type="text/css" />
<link href="myothercss.css" rel="stylesheet" type="text/css" />

How to add content to PHP include files?

Ok I may not have the best title , but I will try to give a better explanation.
Let's assume you are using PHP include() to structure your website:
Header.php
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name=keywords content="somthiefn"/>
<title>Website</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="Scripts/jquery-1.8.3.min.js"></script>
<link rel="icon" type="image/png" href="/images/favicon.ico" />
</head>
<body>
Footer.php
</body>
</html>
Then a sample page:
Index.php
<!--Header-->
<?php include ('includes/header.php'); ?>
<div class="content">
<!-- some content-->
</div>
<!--Footer-->
<?php include ('includes/footer.php'); ?>
Basically I just want to know if there is a way to load some script into my header section.
I would like to achieve something like ASP.NET and its master Page, where I can just add content the header. for example
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<script src="Scripts/somescript.js"></script>
</asp:Content>
Yes, you can do like this:
index.php
<?php
// Wanted page title
$title = "some";
// JS Files..
$scripts = array();
$scripts[] = '<script src="js/some.js" />';
$scripts[] = '<script src="js/some2.js" />';
$scripts[] = '<script src="js/some3.js" />';
// Include header
include ('includes/header.php');
header.php
<title><?php echo $title ?></title>
<?php echo implode("\n",$scripts) ?>
Of course the variables could be named as you want and contain any data. Main thing is that you can pass them between files like i showed.
In index.php, before you include header.php, you could set an array for your scripts like:
header.php
<?php if(!isset($scripts)) $scripts = array(); ?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name=keywords content="somthiefn"/>
<title>Website</title>
<link rel="stylesheet" href="css/style.css" type="text/css">
<script src="Scripts/jquery-1.8.3.min.js"></script>
<link rel="icon" type="image/png" href="/images/favicon.ico" />
<!-- Include dynamic scripts-->
<?php foreach($scripts in $script): ?>
<script src="<?php echo $script; ?>"></script>
<?php endforeach;?>
</head>
<body>
index.php
<?php
$scripts = array('Scripts/somescript.js', 'http://server.com/path/anoterscript.js);
?>
<!--Header-->
<?php include ('includes/header.php'); ?>
<div class="content">
<!-- some content-->
</div>
<!--Footer-->
<?php include ('includes/footer.php'); ?>
Do you want to add PHP code to the header? Then you can add your code between tags (or tags if short tags are enabled), but I would consider to just call an include between the PHP tags and have the logic in that include.
Another option could be a template engine, e. g. Smarty. In most of the templates engine you can define your own functions and call them from the templates.
You could do this:
// content.php
<?php
$head = "<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='keywords' content='somthiefn' />
<title>Website</title>
<link type='text/css' rel='stylesheet' href='css/style.css' />
<script src='Scripts/jquery-1.8.3.min.js'></script>
<link type='image/png' rel='icon' href='images/favicon.ico' />
</head>
<body>";
$foot = "\n<body>\n</html>";
?>
// index.php
<?php
include 'includes/content.php';
$dom = new DOMDocument; #$dom->loadHTML($head);
$hd = $dom->getElementsByTagName('head'); $hd = $hd->item(0);
$script = $dom->creatElement('script');
$scriptAttr = $dom->createAttribute('src');
$scriptAttr->value= 'Scripts/somescript.js'; $script->appendChild($scriptAttr);
$hd->appendChild($script);
echo $dom->saveHTML().$foot;
?>
The other option is to use variables to separate your code then only echo portions. That is what I would do. It's technologically faster. Try this:
// content.php
<?php
$headTop = "<!DOCTYPE html>
<html>
<head>
<meta http-equiv='content-type' content='text/html;charset=utf-8' />
<meta name='keywords' content='somthiefn' />
<title>Website</title>
<link type='text/css' rel='stylesheet' href='css/style.css' />
<script src='Scripts/jquery-1.8.3.min.js'></script>\n ";
$headBottom = "\n <link type='image/png' rel='icon' href='images/favicon.ico' />
</head>
<body>";
$foot = "\n<body>\n</html>";
?>
// index.php
<?php
include 'includes/content.php';
echo "$headTop<script src='Scripts/somescript.js'></script>$headBottom$foot";
?>
You can see why you would use the second option.
This works for me. It dynamically loads title, scripts and styles.
header.php
<?php
if(!isset($scripts))
$scripts = array();
if(!isset($styles))
$styles = array();
?>
<!DOCTYPE html>
<html>
<head>
<title><?php echo $title ?></title>
<link rel="stylesheet" href="css/somestyle.css" type="text/css">
<script src=somescript.js"></script>
<!-- include styles -->
<?php foreach($styles as $style): ?>
<link href="<?php echo $style; ?>" rel="stylesheet">
<?php endforeach; ?>
<!-- include scripts-->
<?php foreach($scripts as $script): ?>
<script src="<?php echo $script; ?>"></script>
<?php endforeach;?>
</head>
<body>
index.php
<?php
$title = "some dynamic title";
$scripts = array('js/somescript.js', 'http://server.com/anoterscript.js');
$styles = array('css/somestyle.css', 'css/anotherstyle.css');
require_once ('header.php');
?>
<div class="content">
<!-- some content-->
</div>
<?php require_once('footer.php'); ?>

Categories