Shortcodes in Pages

Pages are different from widgets and templates in a few key aspects. Most importantly, pages treat enclosing and self-enclosed shortcodes differently. A trailing slash is required so the parser can determine the shortcode type without lookbacks. Without the slash, parsing errors may occur. The example below displays the difference between a self-enclosed and enclosing shortcode. Pay close attention to the placement of the trailing slash "/":

// Enclosing Short Code
[EXAMPLE]Enclosing[/EXAMPLE]

// Self Enclosed Shortcode
[EXAMPLE /]

Conceptually, pages are an array of shortcodes, with the ability to nest shortcodes within the content of other shortcodes. Shortcodes contained within other shortcodes are referred to as widgets. When a page is parsed, widgets are converted into text and the shortcode is flattened into a single piece of text that is then inserted into the template.

Shortcode Naming & Uniqueness

Each shortcode at the page level must have a unique name. If two shortcodes share the same name, the second one will replace the first. Widgets, however, do not have this restriction and can be referenced multiple times on a page.

// Pages
[ABC]First instance not Used[/ABC]
[ABC]This text is used instead[/ABC]

// Widgets
[XYZ]First & second instances are used[/XYZ]
[XYZ attribute="value" /]

Passing Values to Widgets

Pages can pass values to widgets through the shortcode content or attributes. This allows widgets to be customized without modifying the underlying widget file. Refer to the widget documentation for detailed usage.

[EXAMPLE custom="value" /]

The HEAD Shortcode

The HEAD shortcode has a special meaning for pages. It allows a page to pass information directly to the template, which would not be possible otherwise. Using HEAD, you can:

• Specify the body class for a page.
• Insert custom JavaScript or CSS into the template head on a per-page basis.
• Pass additional page-specific attributes for template use.

[HEAD template="full-bleed" title="My Title"]
  <style>body{ background: blue; }</style>
  <script>alert("Hello Word!")</script>
[/HEAD]

Nesting Shortcodes

Shortcodes can be nested within the content of other shortcodes, allowing for reusable and modular components. For example, you might have a sidebar widget included inside a page shortcode:

[CONTENT]
  [CARD class="list"]
    <p>Click the link below</p>
    [BUTTON url="/contact.html"]Click[/BUTTON]
  [/CARD]
[/CONTENT]

The parser will resolve the inner shortcode first, convert it to text, and then insert it into the outer shortcode or template at the correct location. This recursive behavior enables complex layouts without duplicating code. The following code is an example of how the previous shortcodes would be rendered to the static pages:

<div class="card list">
  <p>Clink on the link Below</p>
  <a href="/contact.html" class="btn">Click</a>
</div>