Shortcodes

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.

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.

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:

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.

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>

<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>

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