Shortcodes
Definition
Shortcodes are markup elements that allow you to easily and securely extend the basic functionality of the CMS without having to write code. For example, to integrate advanced features or insert dynamic content such as contact forms, carousels, videos, images, galleries, audio files.
Example of use
Here is the shortcode that will allow you to insert a YouTube video:
if we want to play the following video: https://www.youtube.com/watch?v=j800SVeiS5I
just write:
[youtube j800SVeiS5I ]
List of shortcodes available
- Some are not well documented right now, because they are still under developement.
- More will be added in the future.
Anyway, here is the list :
quote • highlight • info • danger • warning • img2 • alert • video • youtube • youtube-videos • video-background • video-bg-fullscreen • cols • dump • include • featurette • render • code • posts • title • shortcodes • link • img • region • for • background • figure • bg • toc • lorem • date • load-js • script • encode • slides • gallery • carousel • demo • content • scrolly • list • submenu
Syntax of shortcodes
Shortcodes are written within brackets, with the specific name of the shortcode followed optionally by parameters.
[shortcode "parameter1" "parameter2"]
When rendering the page, if the CMS encounters a shortcode, it replaces it with the corresponding content or functionality.
Here is a detailed explanation of the syntax:
- Shortcodes are enclosed in brackets
[ ]
. - A shortcode starts with the name of the shortcode, optionally followed by parameters separated by spaces.
- Parameters are typically written in the format
key="value"
, wherekey
is the parameter name andvalue
is the value assigned to that parameter. Double quotes can be used to surround the value. - Some parameters may be optional, while others may be required. The exact syntax of shortcodes varies depending on the shortcode. Therefore, refer to the documentation for specific details on the syntax of available shortcodes.
- Shortcodes can contain text or other HTML tags inside them.
Here is a generic example of shortcode syntax:
[shortcode_name parameter1="value1" parameter2="value2" ...]
Some shortcodes have only keys for parameters, such as the shortcode for YouTube video.
[shortcode_name "value1" "value2" ...]
Double quotes may be optional if the value does not contain spaces.
[youtube j800SVeiS5I ]
Let's take an example:
[button text="Click here" color="blue" link="https://example.com"]
In this example, the shortcode is [button]
and it uses three parameters: text
, color
, and link
. The value of the text
parameter is "Click here"
, the value of the color
parameter is "blue"
, and the value of the link
parameter is "https://example.com"
. This shortcode could be used to generate a button with the text "Click here", blue color, and redirecting to the specified link.
Self-closing Shortcodes
Some shortcodes may have an opening and closing tag structure. They are called self-closing shortcodes. This type of shortcode is used when you want to surround specific content with the shortcode, allowing for more advanced customization options.
Example of use with the quote shortcode to display a quote:
[quote source="origin"]
Here is the text of the quote.
[/quote]
In this example, the content of the quote is placed between the opening and closing tags.