Chap comes with a separate plugin that includes shortcodes that can do most of what you would need on a modern website. The plugin will function without Chap theme as well, so if you decide to part ways with the theme you don’t necessarily have to rewrite all your content.

How to use the shortcodes

Every shortcode has their arguments documented along with examples. You can also use the “Shortcode” button above the Classic Editor to insert shortcodes without having to remember them.

Insert shortcode button

In the new Gutenberg editor shortcodes can still be used inline with any Rich Text control or by adding a Shortcode block. Alternatively the Composite block can be used for it’s text editor (indenting) capabilities or for inserting any of the presets, although the Landing page preset and Content preset blocks provide the same presets in visual block format.


All shortcode documentation pages contain a list of arguments that the shortcode can use.

Here is an example of arguments for a shortcode:

Button shortcode arguments
Emphasisprimary secondary basic positive negative
Sizemini tiny small medium large big huge massive
Colorred orange yellow olive green teal blue violet purple pink brown grey black
Socialfacebook twitter vk linkedin instagram youtube
Floatleft floated right floated
Iconicon right icon labeled icon right labeled icon
Othercompact inverted circular fluid active disabled animated
Animationvertical fade
hrefThe href/url/link argument can be used to specify a link.
iconName of the icon to use.
hoverText to use on hover.
hover_iconName of the icon to use on hover.

All arguments are supposed to be included in the shortcode in the standard format:

<button (((chap-mark-start)))argument="value"(((chap-mark-end)))>Button</button>

However, any arguments without a value declaration will be used as HTML classes for that shortcode:

<button (((chap-mark-start)))primary(((chap-mark-end))) (((chap-mark-start)))blue(((chap-mark-end))) (((chap-mark-start)))class3(((chap-mark-end))) argument="value">Button</button>

So anything listed in the arguments as “Classes” can be added to the shortcode “as is”. Usually these are Semantic UI modifier classes. This makes the shortcode a lot more fluent to read and easy to understand what it’s purpose is.

Universal arguments

Most shortcodes can accept universal arguments with the names of some HTML attributes: id, name, type, value, classes, href, target, rel, download, method, action, placeholder, style, onclick, role, tabindex, data-*, aria-*.

Meaning if you need to add a unique ID for any shortcode, so you can later manipulate it with JavaScript or CSS, you can do so by just adding id="your_id" to any Chap shortcode.

<button (((chap-mark-start)))my_class(((chap-mark-end))) (((chap-mark-start)))id="my_button"(((chap-mark-end)))>Button</button>
Resulting button
<div id="my_button" class="ui my_class button">Button</div>

It’s possible to add inline styles:

<button (((chap-mark-start)))style="border:3px solid red"(((chap-mark-end)))>Bordered button</button>

Or trigger JavaScript:

<button (((chap-mark-start)))onclick="alert('Test')"(((chap-mark-end)))>Click me</button>
Helper classes

There are also various helper CSS classes that can be combined with shortcodes to override text color, alignment, responsive visibility etc.

Browse available shortcodes
Read also: how to use composites.