Yielding content to other places within the DOM & Layout

CleanSlate Theme Development Tutorial Series
Video #16 Move CSS & JavaScript to other places in the DOM

Sometimes you may want to place certain things in different places than where your normal <r:yield /> tag is. For example: you may want to move JavaScript to just before your closing </body> tag. Or, you want to put another stylesheet in your <head> but you only want this CSS or JavaScript to be used in one specific template (eg: frontpage.html).

To do that, place:

<r:yield name="page_js">
  <r:content />
</r:yield>

into your layout (probably default.html) where you want the content to appear. This is your "hook." Then, in your template (say frontpage.htmlfor example), place:

<r:content_for name="page_js"> 
  <!-- Your stuff goes between these tags! -->
</r:content_for>

In this example, we called it page_js. You can name it whatever you want (as long as you follow the best practices outlined on the Convert a theme to CleanSlate page).

You want to be sure to include the same name in both places (e.g., in your layout [say default.html] and in your page template [say frontpage.html]). In other words, don't just copy and paste blindly, rename page_js to what you want it to be! The DIY Outdoors theme has a good example of this technique.

Sometimes you may want to place certain things in different places than where your normal {{ __TEMPLATE_CONTENT__ }} tag is. For example: you may want to move JavaScript to just before your closing </body> tag. Or, you want to put another stylesheet in your <head> but you only want this CSS or JavaScript to be used in one specific template (eg: frontpage.html).

To do that, place:

{{ content_for.page_js }}

into your layout (probably default.html) where you want the content to appear. This is your "hook." Then, in your template (say frontpage.html for example), place:

{% content_for "page_js" %}
  <!-- Your stuff goes between these tags! -->
{% endcontent_for %}

In this example, we called it page_js. You can name it whatever you want (as long as you follow the best practices outlined on the Convert a theme to CleanSlate page).

You want to be sure to include the same name in both places (e.g., in your layout [say default.html] and in your page template [say frontpage.html]). In other words, don't just copy and paste blindly, rename page_js to what you want it to be! The DIY Outdoors theme has a good example of this technique.

Last updated on July 20, 2022.

We welcome all questions, feedback and bug reports. If you're having an issue, we usually need the following information:

  • A brief description of the issue
  • A link to the page where you saw the issue
  • Screenshots that illustrate the problem - How do I take a screenshot?

Kindly email CleanSlate@mail.wvu.edu for help or use the form on the request help page.