Orchard Core CMS implements shortcodes, which are shortcuts that allow you to add features to your website that would typically be more complicated to add on their own. If you are familiar with Wordpress, you've probably heard of shortcodes and possibly used them when adding content to a Wordpress website.

These shortcodes are usually denoted using single keywords with one or more arguments surrounded by brackets. For example, if you want to embed an image from the Orchard Core CMS media gallery into the body of your web page you could use the image shortcode. Shown below is a simplified version of the shortcode that also accepts optional arguments of width, height, class, mode, and alt.

[image]hero.jpg[/image]

Behind the scenes Orchard Core CMS has a shortcodes processor that translates this shortcode to an HTML image tag for the browser.

Shortcode Templates

Shortcodes can be implemented in code by Orchard Core developers, and in a later post I will show you how to develop a shortcode using a custom IShortcodeProvider. However, the easiest way to get started with shortcodes is to use the Shortcode Templates feature that allows one to create shortcodes in the backend without coding. Shortcode Templates is a feature that needs to be enabled for your Orchard Core CMS website.

Shortcode Templates Feature Orchard Core CMS

Bootstrap Alert Shortcode

A simple shortcode that illustrates Shortcode Templates is a Bootstrap Alert shortcode that simplifies the process of adding an alert to your Bootstrap-enabled Orchard Core CMS website.

Rather than typing in a lot of HTML code to display an alert, it would be far easier to create a shortcode that displays a Bootstrap Alert using the following syntax. Simply provide the text to display in the alert along with an optional argument to specify the type of alert (e.g. primary, secondary, success, info, etc.) you would like to display. If no type is specified, a primary alert is displayed by default.

[alert]Primary alert by default![/alert]
[alert info]Informational alert![/alert]

To create your first shortcode template, enable the Shortcode Templates feature in Orchard Core CMS and navigate to Design -> Shortcodes in the backend and click the Add Shortcode button to create the new [alert] shortcode.

Below is a screenshot showing the shortcode details. The most important piece is the template, which converts the shortcode to the proper HTML for a Bootstrap Alert using the liquid template language. If you're a web designer or web developer you will probably recognize the Bootstrap HTML right away. If you're a Shopify developer, you will be familiar with the liquid template language. There is only a small amount of liquid template language to help specify the Bootstrap Alert type before rendering it to the browser.

Custom Shortcode Template in Orchard Core CMS

Using Shortcodes in Orchard Core CMS

The built-in HTML Field and HTML Body Part support shortcodes in Orchard Core CMS. Almost all Orchard Core Themes will have a Content Type that implements one or both for adding content to the website.

The built-in Agency Theme (based on Bootstrap), for example, has an HTML Widget which uses an HTML Field. One can enter the Bootstrap Alert shortcode to this field in the widget and it will be rendered as a Bootstrap Alert on the frontend. In fact, the HTML Field offers an option that allows one to pick a shortcode within the editor. This shortcode picker is available on all the HTML Field editors in Orchard Core CMS. Below you can see the shortcode picker on the Standard and Wysiwyg Editors when entering content to the Orchard Core CMS website.

Shortcode Picker Orchard Core CMS

Insert Shortcode Picker Orchard Core CMS

Choosing the Insert Shortcode option will display a dialog that allows one to filter through a list of shortcodes available in the website by category and select one for insertion into the editor. Shortcodes added via the Shortcode Templates feature will automatically be populated in the list. Once chosen, the default shortcode value specified in the shortcode template will be inserted into the editor.

Available Shortcodes Orchard Core CMS

When the HTML field is being rendered on the frontend, the shortcode will be processed by the shortcode processor in Orchard Core CMS and converted to the Bootstrap Alert HTML I specified in the shortcode template on the backend.

Sample Bootstrap Alert Shortcode Orchard Core CMS

At any point you can modify the [alert] shortcode template to change the way it renders on the frontend. If you want the option to have a dismissible Bootstrap Alert, for example, you can change the existing template to support dismissible alerts. You can make all alerts dismissible or introduce an optional shortcode argument that specfies whether an alert should be dismissible. If you don't want to change the existing shortcode template, create an entirely new shortcode for dismissible alerts.

Conclusion

The Shortcode Templates feature is by far the easiest way to add custom shortcodes in Orchard Core CMS. It doesn't require a custom module or an Orchard Core Developer to build and maintain them. Changes to shortcode templates can be done from the backend with minimal knowledge of HTML and the liquid template language.

If you're an Orchard Core CMS Developer and want to create your own shortcodes as part of a custom module or custom theme, I will show you how to create a custom IShortcodeProvider in a future blog post.