Shortcodes

Shortcodes are tags inserted in page or article content and resolved server-side at render time. All shortcodes are parsed inside render_content_html() in template-functions.php.

---

Parsing order

1. [gallery id="X"] → renderGallery()
2. [toc] → injects id anchors on <h2>/</h2><h3> + table of contents
3. [callout type="…"]…[/callout]
4. [quote author="…"]…[/quote]
5. [button …]
6. [recent_articles …]
7. [recent_projects …]
8. [articles_by_tag …]
9. [contact_form]

Each parser is conditional — if the shortcode string is not found in the HTML, the regex is never executed.

---

Self-closing shortcodes

[toc]

Auto-generated table of contents from all </h3><h2> and </h2><h3> in the content.

---

[button url="…" label="…" style="…"]

Attribute	Values	Required
url	Any URL	Yes
label	Button text	Yes
style	primary \	secondary \	outline	No (defaults to primary)

[button url="/contact" label="Get in touch" style="primary"]

---

[recent_articles limit="3" tag="slug" category="slug"]

Renders a grid of recent articles. Optionally filtered by tag or category.

Attribute	Description	Required
limit	Number of articles to show	No (default: 3)
tag	Filter by tag slug	No
category	Filter by category slug	No

---

[recent_projects limit="3"]

Attribute	Description	Required
limit	Number of projects to show	No (default: 3)

---

[articles_by_tag tag="slug" limit="5"]

Alias of [recent_articles] with a mandatory tag filter.

---

[contact_form]

Renders the full contact form with CSRF protection, honeypot field, rate limiting, and optional hCaptcha. Automatically injects contact.css once per page.

---

Wrapping shortcodes

[callout type="info"]…[/callout]

Type	Colour
info	Blue
warning	Orange
tip	Green
danger	Red

---

[quote author="Name"]…[/quote]

Styled blockquote with attribution.

---

Adding a custom shortcode

1. Add the parser in render_content_html() after existing parsers, before the final return $html.
2. Add a render function if needed.
3. Use sl_load_index($type) to query data — never $GLOBALS['data'].
4. Add styles in the theme's shortcodes.css with sc-* prefixed classes.
5. Add the entry in the editor shortcode picker (editor.js).

if (strpos($html, '[myshortcode') !== false) {
    $html = preg_replace_callback(
        '/\[myshortcode([^\]]*)\]/i',
        function ($m) {
            $attrs = _shortcode_parse_attrs($m[1]);
            return '<div class="sc-myshortcode">…</div>';
        },
        $html
    );
}