Using Shortcodes in Wrangler Templates

Using Shortcodes in Wrangler Templates

Shortcodes let you embed dynamic content — dates, site details, images, video embeds, post lists — directly inside any text or content field, without needing to write code.

Syntax

There are two types of shortcode: commands and variables.

Commands

{wrt command-name}
{wrt command-name param="value" param2="value2"}

wrt, write, and w all work as the keyword — they are interchangeable.

Variables

{$variable}
{$page.title}
{$page.category.colour}

Variables are resolved from the current page context. Use dot notation to access nested properties. If the variable doesn't exist the tag is left unchanged.

Escaping (output literally)

{{wrt command-name}}

Double braces prevent the shortcode from being processed and output the single-brace form as plain text — useful when you're writing documentation or code samples.

Available variables

The following variables are always available inside page components:

Variable Description
{$page.title} The current page title
{$page.slug} The page URL slug
{$page.description} The page description / meta description
{$page.url} The page URL path
{$page.category.name} The category name (if a category is assigned)
{$page.category.colour} A category colour field (if present)
{$page.live_components.0.title} First component title — use numeric index for array access
{$request.q} A URL query parameter, e.g. ?q=search-term

Use {wrt vars} (see below) to see all variables available on any given page.

Commands: site & page info

{wrt year}

Outputs the current 4-digit year. Ideal for copyright notices.

© {wrt year} Acme Corp. All rights reserved.

{wrt date format="d M Y"}

Outputs the current date.

Parameter Description
format PHP date format string. Default: d M Y 
Last updated: {wrt date format="j F Y"}
Page generated: {wrt date format="d/m/Y H:i"}

Common format codes: d day, m month number, M short month name, F full month name, Y 4-digit year, H:i 24-hour time.

{wrt sitename}

Outputs the site name from application settings.

Welcome to {wrt sitename}

{wrt siteurl}

Outputs the site's root URL.

Visit us at {wrt siteurl}

{wrt get var="key"}

Outputs a value stored in the site's Global Options.

Parameter Description
var The option key name 
{wrt get var="phone-number"}
{wrt get var="festival-year"}

{wrt user field="name"}

Outputs a field from the currently logged-in user. Shows nothing for guests.

Parameter Description
field The user field: name, email, etc. Default: name 
Welcome back, {wrt user field="name"}!
Your account email is {wrt user field="email"}.

Commands: media

{wrt img src="path/to/image"}

Renders an image from the media library.

Parameter Description
src The asset storage path 
{wrt img src="uploads/hero.jpg"}

{wrt asset id="5"}

Renders an asset by ID, using the appropriate output for its type — image, video, audio, or a file download link.

Parameter Description
id The asset ID from the media library
template Optional template variant 
{wrt asset id="42"}

{wrt assets ids="1,2,3"}

Renders a mixed collection of assets. Images and videos display as a grid; audio and files display as a list.

Parameter Description
ids Comma-separated list of asset IDs
order manual (default), date, or random
template Optional template variant 
{wrt assets ids="10,11,12" order="manual"}

{wrt img-collection ids="1,2,3"}

Renders a gallery of images selected by asset IDs, direct URLs, or tag names.

Parameter Description
ids Comma-separated asset IDs, URLs, or tag names
order manual, date, or random
template Optional blade template variant 
{wrt img-collection ids="5,6,7" template="grid"}
{wrt img-collection ids="landscape" order="random"}

{wrt download src="documents/guide.pdf" label="Download Guide"}

Renders a download link to a file in the media library.

Parameter Description
src The asset storage path
label Link text. Defaults to the filename if omitted 
{wrt download src="docs/brochure.pdf" label="Download our Brochure"}

{wrt youtube id="dQw4w9WgXcQ"}

Embeds a YouTube video.

Parameter Description
id The video ID from the YouTube URL (the part after ?v=)
title Accessible title for screen readers. Default: YouTube video 
{wrt youtube id="dQw4w9WgXcQ" title="Our 2024 Showreel"}

{wrt vimeo id="123456789"}

Embeds a Vimeo video.

Parameter Description
id The numeric Vimeo video ID
title Accessible title. Default: Vimeo video 
{wrt vimeo id="987654321" title="Behind the Scenes"}

{wrt map address="123 Main St, Sydney" zoom="14"}

Embeds a Google Maps location. No API key required.

Parameter Description
address Street address or place name
zoom Zoom level 1–20. Default: 14
height Height in pixels. Default: 400 
{wrt map address="Sydney Opera House" zoom="16"}
{wrt map address="123 Example St, Melbourne" height="300"}

Commands: content & navigation

{wrt button href="/contact" label="Get in touch" style="primary"}

Renders a styled button link.

Parameter Description
href The link destination
label Button text. Default: Learn more
style primary, secondary, or outline. Default: primary
target Set to _blank to open in a new tab (optional)
class Extra CSS classes (optional) 
{wrt button href="/register" label="Register Now" style="primary"}
{wrt button href="https://example.com" label="Visit Website" target="_blank" style="outline"}

{wrt posts type="news" limit="5"}

Renders a linked list of recent published posts.

Parameter Description
type Post type slug to filter by. Omit to show all types
limit Maximum number of posts. Default: 5
cache Cache results for this many seconds. Default: 0 (no cache) 
{wrt posts type="news" limit="3"}
{wrt posts type="events" limit="10" cache="3600"}

{wrt collection slug="products" limit="6"}

Renders a linked list of posts from a specific collection. Works the same as {wrt posts} but uses the collection slug instead of type.

Parameter Description
slug The collection slug
limit Maximum number of posts. Default: 6
cache Cache results for this many seconds. Default: 0 
{wrt collection slug="featured-resources" limit="4"}

{wrt partial view="partials.cta"}

Renders a Blade template partial. The current page context is available inside the partial.

Parameter Description
view Dot-notation view name (ask your developer for available partials) 
{wrt partial view="partials.newsletter-signup"}

Commands: debugging

These commands are intended for admin use during content development. They should not appear in live, published content.

{wrt vars}

Displays a table of all variables available in the current page context, with their values. Use this to discover what {$variable} names are available on a given page.

{wrt vars}

{wrt debugcontext}

Dumps the full page context as raw JSON in a scrollable box. More detailed than {wrt vars}.

The Shortcodes tool

The Shortcodes page at /textstem/tools/shortcodes is your reference for all available commands. It shows the full signature, description, and parameters for every command registered in the system — including any custom commands added for your site.

It also includes a Live Sandbox where you can type a shortcode and preview the rendered output using the site's real front-end styles. Useful for testing before placing a shortcode in a published page.

Tips

Quotes around parameter values are required:

{wrt button href="/contact" label="Get in touch"}   ✓
{wrt button href=/contact label=Get in touch}        ✗

Parameters can be in any order:

{wrt date format="Y"} and {wrt date format="d M Y"}

Shortcodes work inside TinyMCE and plain text fields — anywhere the content goes through the page renderer.

Combine variables and commands freely:

© {wrt year} {wrt sitename}. All rights reserved.
Welcome {wrt user field="name"} — you're viewing {$page.title}.
esc