When designing a website in PHP, you typically have a header.php file that you include in every page on the site. The header.php file would include the <head> tag (among other things). However, I often find that I need to put page-specific JavaScript within the <head> tag.
The way I've handled this in the past is by adding IF statements to my header to determine what pieces of JavaScript should be outputted (i.e. IF this is the home page, output the JavaScript needed for the home page, IF this is the about page, output the JavaScript needed for the about page, etc.).
This is probably a terrible way to do it. What is the standard practice?
When designing a website in PHP, you typically have a header.php file that you include in every page on the site. The header.php file would include the <head> tag (among other things). However, I often find that I need to put page-specific JavaScript within the <head> tag.
The way I've handled this in the past is by adding IF statements to my header to determine what pieces of JavaScript should be outputted (i.e. IF this is the home page, output the JavaScript needed for the home page, IF this is the about page, output the JavaScript needed for the about page, etc.).
This is probably a terrible way to do it. What is the standard practice?
Share Improve this question asked Jul 5, 2012 at 19:22 David JonesDavid Jones 10.2k30 gold badges93 silver badges145 bronze badges5 Answers
Reset to default 3Well, first of all, <script> tags do not need to be located in the header. It's perfectly valid to put them anywhere in the HTML document.
But if you're determined to include them in the header, a simple solution is to declare a variable that the header should echo which contains your script tags. For example:
<?php
$scripts = "<script src='script.js' type='text/javascript'></script>";
include("header.php");
?>
And then your header.php script would like as follows:
<html>
<head>
<!-- header stuff goes here -->
<?php /*echo out scripts */ echo $scripts; ?>
</head>
<body>
<!-- part of body goes here -->
Assuming you are actually including header.php in every file, just define an array before you include header.php and add the extra scripts to that. Then in header.php, have it check for that array and write out extra script tags if necessary:
mypage.php:
$extra_scripts = array('jquery.js','jquery-ui.js');
include('header.php');
// Rest of your code.
header.php:
if (is_array($extra_scripts)) {
foreach( $extra_scripts as $script ) {
// Render a script tag
}
}
If you use a templating engine like Twig, you can inherit a base template as opposed to including a header and a footer and modify the 'blocks' defined in that base.
For example purposes, your base template might include a content block and a header_javascript block like so
{% block header_javascript %}
<script src='/js/jquery.js' type='text/javascript'></script>
{% endblock %}
Then, in your child template, you can override this block, call {{ parent() }} and then add your additional, page-specific scripts.
I can see that your question has been answered very clearly. but I would like to add something.
Well, technically, it is valid to place you script tag anywhere in your document but it is better to place your script at the end of document, unless necessary. it will let visitor still see your html and javascript yet to be download, and BTW normally you don't need to run you script until DOM is ready.
This is how I do it:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Page Title</title>
<meta name="description" content="Page Description" />
<!-- Includes header stuff, css, js, google analytics, etc.. -->
<? include('header.php'); ?>
</head>
<body>
...
This allow me to avoid repetitive coding while adding flexibility to my pages.