Adding CSS and JS

Register CSS and JavaScript from a Snippet instead of a Template Variable you would otherwise edit on every Resource.

Adding to the HEAD¶

These methods append CSS and/or JavaScript to the HEAD of the current page in the order you call them, so call them in the order the assets should appear. Registration is de-duplicated by URL: calling a method twice with the same $src keeps only the first registration, so an asset’s position is fixed by its first call.

regClientCSS¶

Register a CSS file by passing its URL:

$modx->regClientCSS('assets/css/my-custom.css');

Prefer the MODX_ASSETS_URL constant so the Snippet keeps working when the assets location is non-standard:

$modx->regClientCSS(MODX_ASSETS_URL.'css/my-custom.css');

An optional second argument adds a media attribute to the generated <link> tag:

$modx->regClientCSS(MODX_ASSETS_URL.'css/print.css', 'print');

If the string already contains <style or <link, it is inserted as-is instead of being wrapped in a <link> tag.

regClientStartupScript¶

Register a script for the HEAD:

$modx->regClientStartupScript('assets/js/site.js');

$modx->regClientStartupScript('//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js');

If the string already contains <script, it is inserted as-is; the optional second argument $plaintext = true forces this raw-insert behavior (this is how regClientStartupHTMLBlock works under the hood).

regClientStartupHTMLBlock¶

This function is useful if you need to set some JS variables, or output some HTML into the HEAD:

$modx->regClientStartupHTMLBlock('
<meta tag="here" />
<script type="text/javascript">
var myCustomJSVar = 123;
</script>');

Adding Before the BODY End¶

These methods insert JavaScript or HTML just before the BODY tag closes — typical for analytics or for scripts that must run at body level rather than in the HEAD.

regClientScript¶

Similar to regClientStartupScript except that it runs before the closing BODY tag:

$modx->regClientScript('assets/js/footer.js');

As with regClientStartupScript, a string containing <script is inserted raw, and $plaintext = true forces raw insertion.

regClientHTMLBlock¶

Similar to regClientStartupHTMLBlock except that it runs before the closing BODY tag:

$modx->regClientHTMLBlock('
<div>custom stuff here</div>
<script type="text/javascript">
runAnalytics();
</script>');

In an Extra you distribute, make CSS/JS insertion a toggle, so the user can switch it off or replace the content.

See Also¶

1. Templating Your Snippets
2. How to Write a Good Snippet
3. How to Write a Good Chunk