The Ghost Themes Developer Hub

Welcome to the Ghost Themes developer hub. You'll find comprehensive guides and documentation to help you start working with Ghost Themes as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    

body_class

{{body_class}} Helper - Outputs dynamic CSS classes to identify the context of the page

Usage: {{body_class}}

Type
Parameters
Attributes

n/a

n/a

Description

{{body_class}} – outputs dynamic CSS classes intended for the <body> tag in your default.hbs or other layout file, and is useful for targeting specific pages (or contexts) with styles.

The {{body_class}} helper outputs different classes on different pages, depending on what context the page belongs to. For example the home page will get the class .home-template, but a single post page would get .post-template.

Full details of what is output on each page can be found in the context table on the Context Overview page.

Examples

Hint

Switch between the Handlebars and HTML tabs to see the the output from the helper

Handlebars from default.hbs, HTML as would be output on /page/2 of a blog:

<html>
    <head>...</head>
    <body class="{{body_class}}">
    ...
    {{{body}}}
    ...
    </body>
</html>
<html>
    <head>...</head>
    <body class="home-template paged">
    ...
    </body>
</html>

Handlebars from default.hbs, HTML as would be output on a static page with the permalink /about/

<html>
    <head>...</head>
    <body class="{{body_class}}">
    ...
    {{{body}}}
    ...
    </body>
</html>
<html>
    <head>...</head>
    <body class="page-template">
    ...
    </body>
</html>

body_class

{{body_class}} Helper - Outputs dynamic CSS classes to identify the context of the page