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:
|The href/url/link argument can be used to specify a link.|
|Name of the icon to use.|
|Text to use on hover.|
|Name of the icon to use on hover.|
All arguments are supposed to be included in the shortcode in the standard format:
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="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>
It’s possible to add inline styles:
<button (((chap-mark-start)))style="border:3px solid red"(((chap-mark-end)))>Bordered button</button>
<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.Browse available shortcodes