Handling page-specific JavaScript in PHP header files

Question

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?

jeff · Accepted Answer · 2012-07-05 19:27:16Z

3

Well, 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 -->

answered Jul 5, 2012 at 19:27

jeff

8,3582 gold badges34 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

David Jones Over a year ago

Huh. I guess I did know that <script> tags don't need to be placed in the header but for some reason I always felt compelled to put them there. I guess my life will get a lot simpler if I just insert the script tags directly after the include('header.php') statement...

David Jones Over a year ago

With this new wisdom, I've decided to not put JavaScript in the <head> tag but rather at the end of each page (right before my include('footer.php') statement. This will allow me to keep page-specific JS on the page it pertains to. Thanks!

Eric Petroelje · Accepted Answer · 2012-07-05 19:27:49Z

3

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
   }
}

answered Jul 5, 2012 at 19:27

Eric Petroelje

60.7k9 gold badges133 silver badges178 bronze badges

1 Comment

David Jones Over a year ago

That's interesting. So I could keep the script in separate JavaScript files and then simply import them. I guess that's pretty obvious, huh. This is nice from a coding standpoint because syntax highlighting doesn't always work will in a mixed-code environment...

Lusitanian · Accepted Answer · 2012-07-05 19:26:32Z

2

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.

answered Jul 5, 2012 at 19:26

Lusitanian

11.1k1 gold badge43 silver badges38 bronze badges

1 Comment

David Jones Over a year ago

Thanks. I'm not using a templating engine this time around, but I'm definitely looking at that option for future projects...

Rab Khan · Accepted Answer · 2012-07-05 19:34:59Z

2

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.

answered Jul 5, 2012 at 19:34

Rab Khan

35.7k4 gold badges52 silver badges66 bronze badges

Comments

Etienne Dupuis · Accepted Answer · 2012-07-05 19:25:57Z

1

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.

answered Jul 5, 2012 at 19:25

Etienne Dupuis

13.8k7 gold badges50 silver badges58 bronze badges

Collectives™ on Stack Overflow

Handling page-specific JavaScript in PHP header files

5 Answers 5

2 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related