Skip to main content

Yielding content to other places within the DOM & Layout

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

To do that, place:

<r:yield name="page-js">
  <r:content />

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

In this example, I 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 just want to be sure to include the same name in both places where you reference it (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-jsto what you want it to be! The DIY Outdoors Theme has a good example of this technique.

Last updated on February 10, 2020.

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 for help or use the form on the request help page.