MODX Quick Tip: Insert HTML at Closing BODY or HEAD Tag

Sep 11, 2012

Ze Problemo

You have a page ("Resource" in MODX terms) on which you want to add some javascript, or maybe a CSS style declaration. You may prefer to have the scripts at the bottom of the page, before the closing BODY tag, and the CSS must go in the HEAD element. However, these assets are ONLY for this one page. You don't want to make new templating elements (as easy as it is in MODX) just for this ONE page.

Ze Answer My Friend, Is Blowin in the Manual

This little gem was brought to my attention by the venerable Mark Hamstra:

http://rtfm.modx.com/display/revolution20/modX.regClientHTMLBlock

It's part of the MODX API that does exactly what we want: sends a bit of code or markup to just before the closing BODY tag. This:

http://rtfm.modx.com/display/revolution20/modX.regClientCSS

is how you send CSS to the head element. There's also all these:

"Stop Yapping. How Do I Do It?"

To use all this delectable MODX goodness, you write a little snippet (snippet code provided by the aforementioned Marky Mark)

  <code>$modx->regClientHTMLBlock($what);   return '';  
Break It Down:
  • $modx->regClientHTMLBlock » This sets in motion our fun little php class or method or whatever you server-side guys & dolls call it. (Has anyone else noticed that the "front-end" vs "back-end" nomenclature leaves the "back-end" peeps a little wanting for a decent nickname?) Replace this bit with $modx->regClientCSS to do the CSS thing.
  • ($what) » This is a variable, the value of which you will pass to the snippet via the snippet call (coming up in a sec here...)
  • return ''; » This, um...returns stuff.
Usage
  <code>  
Break It Down:
  • [[SnippetName? » Whatever you named the snippet when you created it, call it here. Check out Bob's Guides if you don't know how to add a new snippet in MODX.
  • &what=`...` » Pass the contents of this property to the snippet for the $what variable. We tell the snippet "what" to send to the bottom of the page (cheeky, Mark)

And that's it! Enjoy the Creative Freedom that MODX affords you :)

**UPDATE: One Snippet to Rule Them All

Here's a simple multi-use snippet:

if(isset($cssFileInHead)) $modx->regClientCSS($cssFileInHead);  if(isset($jsFileInHead)) $modx->regClientStartupScript($jsFileInHead);  if(isset($htmlInHead)) $modx->regClientStartupHTMLBlock($htmlInHead);  if(isset($jsFileAtClose)) $modx->regClientScript($jsFileAtClose);  return '';

If you've read those docs I linked to, there's prolly no need to Break It Down:

..but basically if you define a value for any of the properties, those assets will be registered/inserted. Example usage:

[[insert?jsFileInHead=`assets/js/test.js` &cssFileInHead=`assets/css/test.css` &htmlInHead=`` &jsFileAtClose=`assets/js/close.js`]]