Orchard Core CMS Shortcode Templates! Create your first shortcode template in Orchard Core CMS.

Shortcode Templates in Orchard Core CMS

Shortcodes, made popular by Wordpress, are also available in Orchard Core CMS. Shortcodes can be created by the Orchard Core Developer via Shortcode Templates from the administrative backend or via code from custom Orchard Core Modules and Themes.

The goal of shortcodes is to make content management easier for the contributor. Shortcodes can be thought of as a shortcut or placeholder for more complicated HTML and JS. The contributor adds a simple shortcode when creating new content for the website, which gets processed by a shortcodes processor before rendered to the visitor. The shortcodes processor often replaces the shortcode with more complicated HTML and JS. As such, the shortcode simplifies tedious routine content management and will often make a complex feature easily available to the contributor.

In this Orchard Core CMS Tutorial we will create a shortcode using Shortcode Templates. In later tutorials, we will show you how to create shortcodes via code in your custom Orchard Core Themes and custom Orchard Core Modules.

Orchard Core CMS Shortcode Templates

Shortcode Templates in Orchard Core CMS allow one to create shortcodes from the administrator backend. Shortcode Templates need to be enabled by the website administrator. To enable Shortcode Templates, login as an administrator and navigate to Configuration-> Features. Here you will see a list of all features available to the Orchard Core CMS Website. Filter the features by typing "Shortcodes." You will see at least two features in the filtered list: Shortcode Templates and Shortcodes. Enable Shortcode Templates, which will automatically enable Shortcodes if it isn't already enabled.

Shortcode Templates Feature in Orchard Core CMS

When you enable Shortcode Templates a new Shortcodes menu option will appear in the Design menu. When you navigate to Design -> Shortcodes in the CMS backend you will see a list of available Shortcode Templates, which should be empty if this is your first time. We'll be creating our first shortcode template, [bq], to simplify adding blockqoutes to our Orchard Core CMS Website.

List of Shortcode Templates in Orchard Core CMS

Bootstrap Blockquote Shortcode in Orchard Core CMS

Let's imagine our Orchard Core CMS Website and Theme uses Bootstrap, and we regularly add blockquotes in our blog posts. The HTML to display a Bootstrap blockquote requires a fair amount of specific HTML that is tedious to type and not so easy to remember.

<blockquote class="blockquote">
  <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
  <footer class="blockquote-footer"><cite title="Source Title">Source Title</cite></footer>
</blockquote>

Rather than remember and type in all the HTML code, we decide to create a [bq] shortcode to simplify adding blockquotes to blog posts.

[bq cite="source"]quote[/bq]

This is far simpler to remember and type, and we can create this new shortcode easily using the Shortcode Templates feature in Orchard Core CMS.

Create a Shortcode Template in Orchard Core CMS

Shown below is a Shortcode Template for our new blockquote shortcode. The Hint and Usage fields in the shortcode template are used to describe the shortcode. The Categories field is used to help filter and find this shortcode from other shortcodes. The Default Shortcode Value is what gets injected into the HTML editor when you select the shortcode. And last and most important, the Content field is a Liquid template that gets processed by the shortcodes processor and rendered to the client. In our case, the Liquid template is the actual HTML code with a sparse amount of the Liquid template language used to display our blockquote in Bootstrap 4.

Create Shortcode Template in Orchard Core CMS

And that's all there is to creating a shortcode template in Orchard Core CMS.

Using the Shortcode Template in Orchard Core CMS

The new blockquote shortcode template can now be accessed via any HTML Field or HTML Body Part in your Content Types. In this example, we are editing an HTML Widget with an HTML Field as part of a Flow Part in a blog post. A shortcode picker is shown in the editor which allows us to choose a shortcode from all available shortcodes in the Orchard Core CMS website, which includes shortcode templates. We filter the shortcodes by Blog and add our blockquote shortcode to the editor.

Custom Shortcode Template in Orchard Core CMS

Available Shortcodes in Orchard Core CMS

We add one of our favorite quotes by Aristotle, which gets processed by Orchard's shortcode processor and displayed using the Bootstrap 4 blockquote markup.

Shortcode Template Renders Bootstrap 4 Blockquote

Congratulations! You've created your first Shortcode Template in Orchard Core CMS!

Conclusion

Shortcode templates are perfect for shortcodes that can be easily rendered as a Liquid template. This will be the case for many shortcodes that are primarily rendering HTML.

In cases where there may be more complex needs, Orchard Core CMS also supports creating shortcodes via code using shortcode delegates and shortcode providers. We will show you how to create shortcode delegates and provides in an upcoming Orchard Core CMS Tutorial.