Skip to content

Shortcodes

Jory Hogeveen edited this page Sep 13, 2023 · 23 revisions

Since: 0.4

[ocs_trigger] | [ocs_trigger]Content[/ocs_trigger]

This can be a simple shortcode or a nested shortcode.

Arguments:

id             (Required) The off-canvas sidebar ID.
text           The text to show. (supports HTML)
action         The trigger action. (toggle, open or close)   Default: `toggle`
element        The HTML element.                             Default: `button`
class          Add extra classes? Also accepts a string with classes separated with a space.
icon           Icon classes.
icon_location  The icon location (`before` or `after`).      Default: `before`.
attr           List of other attributes to add.              Format:  key : value ; key : value

Notes:

  • If you want to use HTML with attributes in text a nested shortcode is required!
  • You can also use attributes instead of attr for readability. (if both are used, attributes is ignored)
  • You can also use classes instead of class for readability. (if both are used, classes is ignored)

Example 1: Simple shortcode with basic options:

[ocs_trigger id="left" text="Click here!"]

Example 2: Simple shortcode with all options:

[ocs_trigger id="left" action="open" element="a" class="button" text="My trigger button!" attr="href: #; rel: nofollow; alt: Yay!!"]

Example 3: Nested shortcode with some options:

[ocs_trigger id="right" attr="type:button;alt:Yay!!"]My trigger button text[/ocs_trigger]

Example 4: Nested shortcode around an image:

[ocs_trigger id="left" action="toggle" element="span"]<img src="http://yourdomain/location/to/your/image.jpg" />[/ocs_trigger]

Example 5: Simple shortcode with image output:

[ocs_trigger id="left" element="img" attr="src:http://yourdomain/location/to/your/image.jpg"]