How to insert/register code before closing </head> or </body>?

[titanium]

Is there a neat little function already existing for inserting some JS/CSS-code before the closing tags </head> or </body>?

Reason is, I usually work with a header.inc and a footer.inc, but on some pages I have to insert different javascript or CSS to the header or footer. I feel uncomfortable if I have to create several header.inc and footer.inc's for this purpose...

MODX (and Wordpress, I think) have some functions to register CSS and JS to the pages, which is quite handy. Maybe there is something similar in Processwire?

[Luis]

if($page->title == 'customPageName') echo 'your js/CSS link';

[Adam Kiss]

Since PW doesn't generate any HTML, there is actually multiple ways to do this;

Based on how often you do this, you might either go with luis' solution, or you might do something more robust. for instance, if you only need to add one file per template, you can do this:

<?php  // in template  $footer_js = '/path/to/my_file.js';   // in footer.inc  if (isset($footer_js)) {    echo "<script type='text/javascript' src='{$footer_js}'></script>";  }

You can make this accept arrays, whatever you want, really.

[titanium]

if($page->title == 'customPageName') echo 'your js/CSS link';

Thanks, this is a quick and handy solution. On the long run, it's not as clean as I would like to see it, because the header.inc and footer.inc have "to know" about the scripts needed in certain pages.

EDIT 2013-02-01: in the original version of this post I published a module here. Today I discovered that my module has issues when caching is enabled. I will post an update asap.

[Pete]

So where are you calling this:

$injector = $modules->get('Injector');
$injector->regClientHTMLBlock('<script>document.write('Hello world!');</script>');
$injector->regClientCSS($config->urls->templates . 'css/basic.css');
$injector->regClientStartupScript($config->urls->templates . 'scripts/jquery-1.9.0.min.js');

At the very top of head.inc?

[titanium]

So where are you calling this:

$injector = $modules->get('Injector');
$injector->regClientHTMLBlock('<script>document.write('Hello world!');</script>');
$injector->regClientCSS($config->urls->templates . 'css/basic.css');
$injector->regClientStartupScript($config->urls->templates . 'scripts/jquery-1.9.0.min.js');

At the very top of head.inc?

You could do that, but that would not make too much sense. The call should work everywhere. I called it in one of the templates which include "head.inc" and "footer.inc". This way, "head.inc" and "footer.inc" can be very generic, that's why I made it. You can integrate some lightbox or something like that to a certain template, but you can use the same head.inc as all the other templates.

But again, I didn't spend too much time on this. Maybe there are some bugs, or it could be done better. But for me it works so far. I'm happy if you try it out.

A better documentation of the possible calls and more examples could be found on the MODX page. Or you can look into the source code.

[Soma]

You could also use PWs $config->scripts->add(path) and $config->styles->add(path) to register scripts and output them same way as in the default.php found in templates-admin. https://ryancramerdesign/ProcessWire/blob/master/wire/templates-admin/default.php#L67

[adrian]

For anyone else who stumbles across this post, Soma's link should be:
https://github.com/ryancramerdesign/ProcessWire/blob/master/wire/templates-admin/default.php#L67

[titanium]

You could also use PWs $config->scripts->add(path) and $config->styles->add(path) to register scripts and output them same way as in the default.php found in templates-admin. https://ryancramerdesign/ProcessWire/blob/master/wire/templates-admin/default.php#L67

Hmmm... I stumbled upon the same problem today again. Given the following setup: my page template includes head.inc and foot.inc.

head.inc contains before closing </head>:

<?php
foreach ($config->styles->unique() as $style) {
    echo $style;
}
?>

foot.inc contains before closing </body>:

<?php
foreach ($config->scripts->unique() as $script)
{
    echo $script;
}
?>

My page template contains:

<?php
$config->styles->add('<link rel="stylesheet" href="mystyle.css" />');
$config->scripts->add('<script src="myscript.js"></script>');
?>

Result:

myscript.js gets injected in the output html footer, but mystyle.css does NOT get into header (as I wanted to and I assumed that it works this way). Did I do something wrong? Did I misunderstand the use of $config->styles->add?

[ryan]

$config->scripts and $config->styles are meant to hold filenames, not entire tags. So you want to switch things around.

$config->styles->add($config->urls->templates . "styles/mystyle.css"); 

<?php
foreach ($config->styles->unique() as $style) {
  echo "<link rel='stylesheet' type='text/css' href='$style' />";
}
?>

Also make sure that they are happening in this order. So if you are using a head.inc file, then you would want to make sure that your stylesheet file is added sometime before the include("./head.inc"). This by the way is one reason why I think using a main.php is a little better than head.inc/foot.inc.

[titanium]

$config->scripts and $config->styles are meant to hold filenames, not entire tags.

In the past, it seems that I have somewhat "abused" $config-scripts and put some dynamically generated js scripts to it. It worked fine so far, but I'm willing to learn how to do it better.

Do you have some advise for me what would be best if I have to put some JS before the closing body-tag? The js should echo some php variables like this:

$("#carousel").carousel({
	interval: <?php echo $page->carouselInterval; ?>
})

In this case, static js files can't be used...

This by the way is one reason why I think using a main.php is a little better than head.inc/foot.inc.

Whoever reads this and is wondering about what could be meant by "main.php": I strongly advise to download Ryan's Blog profile. I wish I had done this much sooner, it's a great example which shows clearly the concept behind "main.php". This approach is discussed here (very interesting to read, I think).

[ryan]

Do you have some advise for me what would be best if I have to put some JS before the closing body-tag? The js should echo some php variables like this:

It looks to me like the way you are doing it is right, if I understand it correctly. You could set a user-defined variable to $page, like $page->myJS = 'some javascript here'; and then output that before your closing </body> tag. 

Whoever reads this and is wondering about what could be meant by "main.php": I strongly advise to download Ryan's Blog profile. I wish I had done this much sooner, it's a great example which shows clearly the concept behind "main.php". This approach is discussed here (very interesting to read, I think).

The skyscrapers profile is probably an even better example of the main.php approach. Whereas the blog profile is also taking an MVC approach, so there's a little more going on in the blog profile that may be harder to follow at first. Though note that in the skyscrapers profile, the "main" file is called _out.php.