Shortcodes

Chap comes with a separate plugin that includes shortcodes. 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 editor to insert shortcodes without having to remember them.
Insert shortcode button
Arguments
Here is an example of arguments for a shortcode:

[button] shortcode arguments
classes:
Emphasis -
[primary|secondary|basic|positive|negative]
Size -
[mini|tiny|small|medium|large|big|huge|massive]
Color -
[red|green|blue|...]
Social -
[facebook|twitter|google plus|vk|linkedin|instagram|youtube]
Float -
[left floated|right floated]
Icon -
[icon|right icon|labeled icon|right labeled icon]
Other -
[compact|inverted|circular|fluid|active|disabled|animated]
Animation -
[vertical|fade]
href:
The href/url/link argument can be used to specify a link.
icon:
Name of the icon to use.
hover:
Text to use on hover.
hover_icon:
Name 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 values inserted without the argument name will be counted 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>
Universal arguments
All shortcodes can accept arguments with the names of some HTML attributes:
id
name
type
value
classes
url/link/href
method
action
placeholder
style
target
data-*

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>
HTML
Resulting button
<div class="ui my_class button" id="my_button">Button</div>

It’s also possible to add inline styles to shortcodes:

<button (((chap-mark-start)))style="margin-top:10em;margin-left:5em"(((chap-mark-end)))>
Read also: how to use composites.