I am using PHP and CodeIgniter. In every view file, I include the header.php, seen below:
<head>
<link rel="...">
<script type="text/javascript">...</script>
</head>
Notice that the head tag is closed in this file. Now I want to add a <script> tag in another file without modifying header.php. C# has ContentPlaceHolder that can be used to indicate where tags can be added within head tag. Is there any equivalent in php? If not, How can I achieve this?
You can easily add other scripts in your header by adding a single variable in your controller like this:
Controller:
$data['myScript'] = '<link rel="..."><script type="text/javascript">...</script>';
$this->load->view('myView',$data);
Then in your header.php add:
<head>
<link rel="...">
<script type="text/javascript">...</script>
<?php if (isset($myScript)) echo $myScript; ?>
</head>
This makes a very customizeable template for each view because you can add the scripts only in the views you need them.
Here's what I usually do with any CodeIgniter project...
I extend the HTML helper (application/helpers/MY_html_helper.php) to include a js() function:
function js($js)
{
$js_base_path = '';
// If you have multiple JS files, pass an array
if(is_array($js))
{
foreach($js as $script_src)
{
if(strpos($script_src, 'http://') === false && strpos($script_src, 'https://') === false)
{
$js_base_path = base_url() . 'js/';
}
echo '<script src="' . $js_base_path . $script_src . '"></script>';
}
}
// Otherwise, a string will do
else
{
if(strpos($js, 'http://') === false && strpos($js, 'https://') === false)
{
$js_base_path = base_url() . 'js/';
}
echo '<script src="' . $js_base_path . $js . '"></script>';
}
}
In my controller, I'll include my footer (header, in your case) with a js parameter:
$this->load->view('_footer', array('js'=>'jquery.cycle.lite.js'));
My _footer view runs the js() function like this:
<?php
if(isset($js))
{
$this->load->helper('html');
js($js);
}
?>
This has worked great for me, feel free to customize it to your needs.
Phil Sturgeon's template library has some handy functionalities for this:
http://philsturgeon.co.uk/demos/codeigniter-template/user_guide/library.html#prepend_metadata
Related
I'm creating a web app where I want to include JavaScript files with all file sources in an array, but I can't do that.
Header.php
<head>
<?php
$import_scripts = array(
'file01.js',
'file02.js'
);
foreach ($import_scripts as $script) {
echo '<script src="' . $script . '"></script>';
}
?>
</head>
<body>
Index.php
<?php
include('header.php');
array_push($import_scripts,'file03.js')
?>
But this only includes file01.js and file02.js, JavaScript files.
Your issue is that you've already echo'ed the scripts in headers.php by the time you push the new value into the array in index.php. So you need to add to extra scripts before you include headers.php. Here's one way to do it (using the null coalescing operator to prevent errors when $extra_scripts is not set):
header.php
<?php
$import_scripts = array_merge(array(
'file01.js',
'file02.js'
), $extra_scripts ?? []);
?>
<!DOCTYPE html>
<html>
<head>
<!-- Scripts Section -->
<?php
foreach ($import_scripts as $script) {
echo '<script src="' . $script . '"></script>' . PHP_EOL;
}
?><title>Demo</title>
</head>
<body>
<p>Blog</p>
index.php
<?php
$extra_scripts = ['file03.js'];
include 'header.php';
?>
Output (demo on 3v4l.org)
<!DOCTYPE html>
<html>
<head>
<!-- Scripts Section -->
<script src="file01.js"></script>
<script src="file02.js"></script>
<script src="file03.js"></script>
<title>Demo</title>
</head>
<body>
<p>Blog</p>
header.php
<?php
function scripts()
{
return [
'file01.js',
'file02.js'
];
}
function render($scripts)
{
foreach ($scripts as $script) {
echo '<script src="' . $script . '"></script>';
}
}
?>
<head>
index.php:
<?php
include 'header.php';
$extra_scripts = scripts();
$extra_scripts[] = 'script3.js';
render($extra_scripts);
?>
</head>
<body>
PHP is processed top down so it will currently be adding file03.js to the array after the foreach has been run.
This means you have two options:
Run the scripts after the header (Not reccomended)
Like Nick suggested, in index.php, specify additional scripts before the header is called
Other answers have answered why (you output content before adding the item to the array).
The best solution is to do all your processing before your output. Also helps with error trapping, error reporting, debugging, access control, redirect control, handling posts... as well as changes like this.
Solution 1: Use a template engine.
This may be more complex than you need, and/or add bloat. I use Twig, have used Smarty (but their site is now filled with Casino ads, so that's a concern), or others built into frameworks. Google "PHP Template engine" for examples.
Solution 2: Create yourself a quick class that does the output. Here's a rough, (untested - you will need to debug it and expand it) example.
class Page
{
private string $title = 'PageTitle';
private array $importScripts = [];
private string $bodyContent = '';
public setTitle(string $title): void
{
$this->title = $title;
}
public addImportScript(string $importScript): void
{
$this->importScripts[] = $importScript;
}
public addContent(string $htmlSafeBodyContent): void
{
$this->bodyContent .= $bodyContent;
}
public out(): void
{
echo '<!DOCTYPE html>
<html>
<head>
<!-- Scripts Section -->
';
foreach ($this->importScripts as $script) {
echo '<script src="' . htmlspecialchars($script) . '"></script>' . PHP_EOL;
}
echo '
<!-- End Scripts Section -->
<title>' . htmlspecialchars($this->title) . '</title>
</head>
<body> . $this->bodyContent . '
</body>
</html>';
exit();
}
}
// Usage
$page = new page();
$page->setTitle('My Page Title'); // Optional
$page->addImportScript('script1');
$page->addImportScript('script2');
$page->addContent('<h1>Welcome</h1>');
// Do your processing here
$page->addContent('<div>Here are the results</div>');
$page->addImportScript('script3');
// Output
$page->out();
I'd create a new php file, say functions.php and add the following code into it.
<?php
// script common for all pages.
$pageScripts = [
'common_1.js',
'common_2.js',
];
function addScripts(array $scripts = []) {
global $pageScripts;
if (!empty ($scripts)) { // if there are new scripts to be added, add it to the array.
$pageScripts = array_merge($pageScripts, $scripts);
}
return;
}
function jsScripts() {
global $pageScripts;
$scriptPath = './scripts/'; // assume all scripts are saved in the `scripts` directory.
foreach ($pageScripts as $script) {
// to make sure correct path is used
if (stripos($script, $scriptPath) !== 0) {
$script = $scriptPath . ltrim($script, '/');
}
echo '<script src="' . $script .'" type="text/javascript">' . PHP_EOL;
}
return;
}
Then change your header.php as
<?php
include_once './functions.php';
// REST of your `header.php`
// insert your script files where you needed.
jsScripts();
// REST of your `header.php`
Now, you can use this in different pages like
E.g. page_1.php
<?php
include_once './functions.php';
addScripts([
'page_1_custom.js',
'page_1_custom_2.js',
]);
// include the header
include_once('./header.php');
page_2.php
<?php
include_once './functions.php';
addScripts([
'./scripts/page_2_custom.js',
'./scripts/page_2_custom_2.js',
]);
// include the header
include_once('./header.php');
You are adding 'file03.js' to $import_scripts after including 'header.php', so echoing scripts it have been done yet. That's why 'file03.js' is not invoked.
So, you need to add 'file03.js' to $import_scripts before echoing scripts, this means before include 'header.php'.
A nice way is to move $import_scripts definition to index.php, and add 'file03.js' before including 'header.php'.
But it seems that you want to invoke certain JS scripts always, and add some more in some pages. In this case, a good idea is to define $import_scripts in a PHP file we can call init.php.
This solution will be as shown:
header.php
<head>
<?php
foreach ($import_scripts as $script) {
echo '<script src="' . $script . '"></script>';
}
?>
</head>
<body>
init.php
<?php
$import_scripts = array(
'file01.js',
'file02.js'
);
index.php
<?php
require 'init.php';
array_push($import_scripts,'file03.js');
include 'header.php';
header.php
<?php
echo "<head>";
$importScripts = ['file01.js','file02.js'];
foreach ($importScripts as $script) {
echo '<script src="' . $script . '"></script>';
}
echo "</head>";
echo "<body>";
index.php
<?php
include 'header.php';
array_push($importScripts, 'file03.js');
print_r($importScripts);
Output
Array ( [0] => file01.js [1] => file02.js [2] => file03.js )
I am having trouble preloading CSS on my WordPress site. I was writing a script to find every JS and CSS script enqueued in the footer, and preload it in the <head>. The code for the JS scripts works fine (when I go to page source on the site, I can see the <link> tags with the preload attribute inside), but the CSS preload link tags aren't showing up.
It is very likely I am doing this completely wrong, as I found working code for the JS scripts and then tried to alter it to get it to work for the CSS. For instance, I don't think the version appendage applies to CSS, but I assumed it would still work since it would default to false, right?
As a related question, I am having the same issue with webfonts. Google Pageview Insights is telling me to preload webfonts, so I added some php to do that, but when I run pageview insights again, no dice.
Here is the code:
add_action('wp_head', function () {
global $wp_scripts;
global $wp_styles;
foreach($wp_scripts->queue as $handle) {
$script = $wp_scripts->registered[$handle];
//-- Check if script is being enqueued in the footer.
if($script->extra['group'] === 1) {
//-- If version is set, append to end of source.
$source = $script->src . ($script->ver ? "?ver={$script->ver}" : "");
//-- Spit out the tag.
echo "<link rel='preload' href='{$source}' as='script'/>\n";
}
}
foreach($wp_styles->queue as $handle) {
$style = $wp_styles->registered[$handle];
if ($style->extra['group'] === 1) {
$source = $style->src . ($style->ver ? "?ver={$style->ver}" : "");
echo "<link rel='preload' href='{$source}' as='style' onload='this.rel = \"stylesheet\"'/>\n
<noscript><link rel='stylesheet' href='{$source}'/></noscript>\n";
}
}
//This is the code to preload webfonts
echo "<link rel='preload' href='/wp-content/themes/salient/css/fonts/fontawesome-webfont.woff?v=4.2' as='font' type='font/woff'>";
echo "<link rel='preload' href='/wp-content/themes/salient/css/fonts/fontawesome-webfont.ttf?v=4.2' as='font' type='font/ttf'>";
}, 1);
Welcome to StackOverflow!
A function that I have used in my projects for preloading CSS effectively is:
function add_rel_preload($html, $handle, $href, $media) {
if (is_admin())
return $html;
$html = <<<EOT
<link rel='preload' as='style' onload="this.onload=null;this.rel='stylesheet'"
id='$handle' href='$href' type='text/css' media='all' />
EOT;
return $html;
}
add_filter( 'style_loader_tag', 'add_rel_preload', 10, 4 );
A similar function could in theory be used for JS and Webfonts, but this has only been tested with CSS.
Hope this is helpful!
The exact code, which has worked for me:
function preload_for_css ( $html, $handle, $href, $media ) {
if ( is_admin () )
{
return $html;
}
echo '<link rel="stylesheet preload" as="style" href="' . $href . '" media="all">';
}
add_filter ( 'style_loader_tag', 'preload_for_css', 10, 4 );
It will pass GTmetrix and Google Insights test. At least passed for me :-)
I'm having trouble getting a PHP script to work. It doesn't seem to be working accurately. I'm trying to make a script to only show HTML or Javascript on the homepage only. This script will be used for multiple things. I did google this, but most answers are for WP. This is vanilla PHP.
Here's what I used:
<!-- Add Only On The Homepage Or Else -->
<?php
$currentpage = $_SERVER['REQUEST_URI'];
if($currentpage=="/" || $currentpage=="/index.php" || $currentpage=="" ) {
echo '
<header id="main-header" class="home">
';
}
else {
echo '
<header id="main-header">
';
}
?>
The results are that it shows the content of else, even though it's the homepage. I tested it on "/" and "/index.php".
I commonly use this snippet:
index.php
if (preg_match('/^m\.[^\/]+(\/(\?.*|index\.html(\?.*)?)?)?$/i', $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'])) {
readfile('index.html');
} else {
// Your framework bootstrapper or your own logic
}
I would like to import a css stylesheet in a page depending on a php condition (or other), this condition is based upon the domain URL.
For example, if the page loaded is "mydomain.com/about-us" import a "css/about-us.css" file.
I have tried with this code, but it does not work.
<?php
$url = $_SERVER['REQUEST_URI'];
if (strstr($url, "mydomain.com/about-us/")) {
include '/css/about-us.css';
}
?>
How can I import, or use a <style> tag conditionally?
solution correct:
the correct solution is use only the page name, so if you page is mydomain.com/about-us/
use " /about-us/" only.
now have other question, with the code posted you can import css for specific page , but I noticed that if the domain is mydomain.com/about-us/team.html example in the page team.html load also the css of "about-us" how load the css for about-us only in the page mydomain/about-us/ ??
How you can read here, strstr will return a string or FALSE. You can change it like this:
<!DOCTYPE html>
<head>
<?php
if (strstr($_SERVER['REQUEST_URI'], "mydomain.com/about-us/")!=false) {
echo '<link rel="stylesheet" type="text/css" href="/css/about-us.css">';
} ?>
</head>
...
</body>
</html>
Or:
<!DOCTYPE html>
<head>
<style type="text/css">
<?php
if (strstr($_SERVER['REQUEST_URI'], "mydomain.com/about-us/")!=false) {
echo file_get_contents('/css/about-us.css');
} ?>
</style>
</head>
...
</body>
</html>
In the first example your CSS is included through the <link> tag, in the second, the PHP-script loads your CSS file into the script-tags. You can not use include because it will load another php file and execute where it was included. You should use my first example, because it is more server-friendly because the CSS file doesn't need to be read. Your page will be faster.
You can add a stylesheet to the page with PHP by including this in the <head> of your html document:
<?php
echo '<link rel="stylesheet" type="text/css" href="' . $file . '">';
?>
Where $file is the name of the css file. You're going to have to provide some more information as to what you're trying to do for a better answer.
Update
The variable $_SERVER[REQUEST_URI] only gives the requested page, not the whole domain. From the PHP manual,
'REQUEST_URI'
The URI which was given in order to access this page; for instance, '/index.html'.
So the code should look as follows:
<?php
$requested_page = $_SERVER['REQUEST_URI'];
if ($requested_page === "/about-us" || $requested_page === "/about-us/") {
echo '<link rel="stylesheet" type="text/css" href="/css/about-us.css">';
}
?>
This will test if the requested page is "/about-us" (the client is requesting the "about-us" page) and if it does, the link to the stylesheet will be echoed.
use this:
<?php
$url = $_SERVER['REQUEST_URI'];
if (strstr($url, "mydomain.com/about-us/"))
{
// output an HTML css link in the page
echo '<link rel="stylesheet" type="text/css" href="/css/about-us.css" />';
}
else
{
// output an HTML css link in the page
echo '<link rel="stylesheet" type="text/css" href="/css/another.css" />';
}
?>
you can also do this to import the css contents directly, but probably some media/images links can break:
<?php
$url = $_SERVER['REQUEST_URI'];
if (strstr($url, "mydomain.com/about-us/"))
{
// output css directly in the page
echo '<style type="text/css">' .file_get_contents('./css/about-us.css').'</style>';
}
else
{
// output css directly in the page
echo '<style type="text/css">' .file_get_contents('./css/another.css').'</style>';
}
?>
Run into a bit of a sticky situation which I can't seem to wrap my finger around. Basically what I am trying to achieve is having the ability to inject different Javascript files on different page.
Some simple, random example:
Page 1: import jquery.js
Page 2: import mootools.js
So what I have done is, I've created a function called addScript() like so:
function addScript($file) {
$script = '';
$script .= '<script src="'. REL_PATH . '/path/to/file/' . $file . '">';
$script .= '</script>';
return $script;
}
so if I call addScript('jquery.min'); it, outputs correctly.
What I now want to do is replace the closing </head> tag with the output from the above function. If I do the following then it works fine:
ob_start();
require_once("models/header.php");
$contents = ob_get_contents();
ob_end_clean();
echo str_replace('</head>', addScript('jquery.js') . '</head>', $contents);
However I would like this to be a little more dynamic as there may be multiple script that I need to inject on each page like so:
addScript('script.js');
addScript('script2.js');
addScript('script3.js');
I then thought of creating a getHead() function with a foreach loop inside and returning str_replace there instead but this did not work.
Can anyone guide my in the direction to dynamically inject as many script as required and output the last bit of the head?
Why not do something like this:
class Assets {
private static $css = array();
private static $js = array();
static function add_style($path) {
self::$css[] = $path;
}
static function add_script($path) {
self::$js[] = $path;
}
static function get_styles() {
$output = '';
foreach(self::$css as $path) {
$ouput .= '<link rel="stylesheet" href="'. $path .'" />' . "\n";
}
return $ouput;
}
static function get_scripts() {
$output = '';
foreach(self::$js as $path) {
$ouput .= '<script type="text/javascript" src="'. $path .'"></script>' . "\n";
}
return $ouput;
}
}
Then anywhere in your project:
Assets::add_style('path/to/style.css');
Assets::add_script('path/to/jquery.js');
And in header.php:
<head>
<!-- other header stuff -->
<?php echo Assets::get_styles(); ?>
<?php echo Assets::get_scripts(); ?>
</head>
Is much more convenient, and you can can extend the class to do more fancy stuff.
Disclaimer: there is much debate about using static vars, as they look like globals. I agree, but this is quick-and-dirty and works no matter what kind of framework you use. You can also make the variables oldschool instance vars, but then you'll have to pass the assets object to the header.php as well.
What's wrong with the following??
echo str_replace('</head>',
addScript('jquery.js').
addScript('jquer1.js').
addScript('jquer2.js').
addScript('jquer3.js').
'</head>', $contents);
How about you put the ob_start(); in header.php. Then your function is:
function addScript($file) {
$script = '<script src="'. REL_PATH . '/path/to/file/' . $file . '"></script>';
echo str_replace('</head>', addScript('jquery.js') . '</head>', ob_get_clean());
}
Then:
addScript('script.js');
This method keeps the output buffer going and you can manipulate it later in the script whenever you want. just as you do with the addScript().