Adding a New Zone to The Blog Theme Layout in Orchard Core CMS

Theme Development in Orchard Core CMS

In the last tutorial I enhanced The Blog Theme in Orchard Core by adding the ability to select a background image for each article. This was accomplished by adding a new Media Field to the Article Content Type and overriding the existing template to display the chosen background image. I want to continue this idea by adding a new zone to the layout of The Blog Theme. This will provide more flexibility as to where I can display shapes as well as reinforce overriding theme templates using The Templates Module in the Orchard Core CMS Admin Dashboard.

Zones in Orchard Core CMS

If you've done any theme development in Orchard CMS 1.x, you'll remember the plethora of zones in the default site theme (Theme Machine). I can probably list them by heart because I modeled my custom themes after these zones for consistency for years. A few of these zones include Header, Navigation, Featured, BeforeMain, BeforeContent, Content, AfterContent, AfterMain, Tripel1..3, QuadFooter1..4, etc. I even know the story as to how the Tripel zones got their name (insider secret :-p).

Zones are the same in Orchard Core CMS, but you won't find as many zones in the themes shipping with it. The Blog Theme, for example, only has a total of 3 zones. Two of the zones are shown in the admin dashboard: Content and Footer. A third zone is used internally to display headers: Header.

You can see the Content and Footer zone names for The Blog Theme in the admin dashboard as well as in the layer settings of the setup recipe. However, you have to look at the Layout.liquid template to see where the zones get displayed as well as the use of the Header zone (Dev). Here is a snippet of the Layout.liquid template.

{% render_section "Header", required: false %}
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
            {% render_body %}
        </div>
    </div>
</div>
<footer>
    {% render_section "Footer", required: false %}
</footer>

Note that {% render_body %) renders the Content zone.

Adding a New Zone to Orchard Core CMS

I will be adding a fourth zone to The Blog Theme, called Messages. It will display shapes right below the Header zone. Adding rendering support for the zone is as simple as adding a single line to the Layout template.

{% render_section "Header", required: false %}
{% render_section "Messages", required: false %}
<div class="container">
    <div class="row">
        <div class="col-lg-8 col-md-10 mx-auto">
            {% render_body %}
        </div>
    </div>
</div>
<footer>
    {% render_section "Footer", required: false %}
</footer>

Templates Feature in Orchard Core CMS

I won't be adding this new zone directly to the The Blog Theme's Layout, however. Instead, I will override the Layout.liquid template by adding a Layout template to the website using the Templates feature in Orchard Core CMS, which allows us to add templates to the site database in the admin dashboard. These templates override all other theme templates.

Add Zone to The Blog Theme Layout in Orchard Core CMS

Layers Settings in Orchard Core CMS

Even though we added the ability to render the new zone in the Layout template, the zone won't be exposed in the Orchard Core admin dashboard when editing Widget Layers yet. The Layers in The Blog Theme will still look as such.

Edit Widget Layers Zones in Orchard Core CMS

It's not until we add Messages to the Layer Settings in the admin dashboard that we will see the new Messages Layer.

Available Zones for Layers in Orchard Core CMS

The new Messages zone is now available in The Blog Theme.

Add New Layer Zone in Orchard Core CMS

Conclusion

I've successfully added a new zone to The Blog Theme and can now add any widgets to the zone in the Orchard Core CMS website. If you've been following along feel free to test it out.

I'm going to stop here, however, because in the next tutorial I will develop a custom widget in Orchard Core CMS to add to the zone. And as you can probably guess, I will use the templates feature again in Orchard Core CMS to add a template that displays the custom widget.