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'); ?>
Related
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'>";
}
?>
I have trouble with the contruction of a working well formmated DOM, through php.
The source-code is diplayed right, but all the dev-tools of Chrome, Firefox and Edge, display the head-tag inside the body-tag. Can you please help me to spot the mistake, beacuse the frontend is now faulty displayed.
it look like this:
php-snippet:
<?php
session_start();
//doctype
echo "<!DOCTYPE HTML>\n";
//html
echo "<html>\n";
//html-head
echo "<head>\n";
include "inc/head.html";
echo "</head>\n";
//html- body start-end
echo "<body>\n
some content
</body>\n</html>\n";
?>
head.html:
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<meta name='author' content='MGM'>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.2.0.min.js'></script>
<link rel="shortcut icon" href="media/favicon.png" type="image/png">
<link rel='stylesheet' type='text/css' href='media/desktop.css'>
sourcecode html:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv='content-type' content='text/html; charset=UTF-8' />
<meta name='author' content='MGM'>
<script type='text/javascript' src='http://code.jquery.com/jquery-2.2.0.min.js'></script>
<link rel="shortcut icon" href="media/favicon.png" type="image/png">
<link rel='stylesheet' type='text/css' href='media/desktop.css'></head>
<body>
some content
</body>
</html>
You can either use file_get_contents() for this
$content = file_get_contents('head.php');
print $content;
Or use the include function but receive its output.
$content = include('head.php');
print $content;
NOTICE
Keep in mind, that if you decide to use include for this, it will execute the code inside head.php first, which file_get_contents() wouldnt.
Maybe this also helps you.
I would suggest using PHP's output buffer, changing your code to look like this:
<?php
session_start();
ob_start();
?>
<!DOCTYPE HTML>
<html>
<head>
<?php include "inc/head.html"; ?>
</head>
<body>
some content
</body>
</html>
<?php
echo ob_get_clean();
?>
I am trying to create a very simple web application, basically to understand the best practices of coding in HTML5, CSS and JavaScript.
My application has 3-4 pages and each one is using same menu header. So I want to make it reusable by writing it in a separate file (either PHP or HTML).
head.php (it is to be made reusable):
<!DOCTYPE html>
<html>
<head>
<link href="../../css/headermenu.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="menu">
<li>Home<span></span></li>
</ul>
<p>
</p>
</body>
</html>
front.php:
<?php
include ("$_SERVER[DOCUMENT_ROOT]/page/common/head.php");
?>
HTML markup (dirty code):
<!DOCTYPE html>
<html>
<head>
<!DOCTYPE html>
<html>
<head>
<link href="../../css/headermenu.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<ul id="menu">
<li>Home<span></span></li>
</ul>
<p>
</p>
</body>
</html></head>
<body>
<div>
</div>
<p>
</p>
</body>
</html>
I have following questions:
head.php has both <body> and <head> tag. So where should I write these PHP lines to include it? (in <head> or <body>) (I don't want to have multiple <head>s and <body>s in the final page)
What are the other best practice I should follow? (any link to references welcome)
I have already read w3schools.
In my opinion it would be a good idea to read about templating systems or have a look how frameworks/CMS handle this.
Doing it your way, you can't completly avoid repeating e.g. the closing head tag </head> in every content.php.
So this is just an idea:
head.php
<?php
// Some other includes / requires,
// code snippets...
?>
<!DOCTYPE html>
<html>
<head>
<!-- site-wide stylesheets -->
<!-- & js-files -->
<link href="css/main.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="my/global/scripts.js"></script>
content.php
<?php
include ($_SERVER['DOCUMENT_ROOT'] . '/page/common/head.php');
?>
<!-- put page specific scripts &
<!-- styles here -->
<link href="my/pages/css/style.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="my/pages/js/scripts.js"></script>
</head>
<body>
<div id="container">
<!-- content start -->
<div id="content">
<h1>title</h1>
<p>Your content</p>
</div>
<!-- end of content div -->
<?php
include ($_SERVER['DOCUMENT_ROOT'] . '/page/common/foot.php');
foot.php
<div id="foot">
copyright etc
</div>
</div> <!-- end of container div -->
</body>
</html>
php is rendering html and if you have in both files header of course it will be printed twice
you should separate in includes but don't write in both files tag
example
<header>
<?php
// this file should not include <head> taf
include ($_SERVER[DOCUMENT_ROOT] . '/page/common/header.php);
?>
</header>
BODY
<header>
<?php
include ($_SERVER[DOCUMENT_ROOT] . '/page/common/foot.php);
?>
</header>
include will bring content from head.php and foot.php and will put in index.php file
Another possible solution to avoid multiple head tags which also makes it possible to add additional css files:
<?php
// head.php
$html = <<< EOF
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">
<head>
<title>{$title}</title>
{$meta}
<link href="../../css/headermenu.css" rel="stylesheet" type="text/css"/>
{$additional_style}
</head>
<body>
<ul id="menu">
<li>Home<span></span></li>
</ul>
{$mainbody}
{$footer}
{$javascript}
</body>
</html>
EOF;
?>
<?php
// page1.php
$title = 'some title';
$meta = '';
$additional_style = '';
$mainbody = 'your body';
$footer = '';
$javascript = '';
include_once("head.php");
echo $html;
?>
<?php
// page2.php
$title = 'some other title';
$meta = '';
$additional_style = '<link href="../../css/page2.css" rel="stylesheet" type="text/css"/>';
$mainbody = 'your body';
$footer = '';
$javascript = '';
include_once("head.php");
echo $html;
?>
It also allows for multiple levels of inheritance (for example, you could define the same footer for a couple of pages). This principle can also be used without EOF, but I think that it looks nicer this way.
The main downside is that you will get a warning if you do not set all the variables of head.php in the pages including it.
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")?>
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" />