Shortcodes

2. Formatting shortcodes

`gn:button`

The gn:button shortcode creates a link which looks like a button.

[gn:button href="/" icon="home"]Button Text[/gn:button]

This shortcode has very specific applications and is intended to be used primarily in site-wide configuration where the use of active user interface elements makes sense. Otherwise you should generally consider using a call to action (gn:cta) or a regular link instead.

The following parameters are supported:

href: specifies the url for the button action.
title: specifies a tooltip to be displayed when the user's mouse hovers over the button - usually a longer version of the button text or an explanation of what the button does.
icon: specifies the name of a FontAwesome icon to be displayed before the button, e.g. home.
type: specifies the type (appearance) of the button - one of default, primary, or cancel.

Callouts

There exists a large number of "callout" shortcodes which can be used to draw attention to a small fact or piece of information which is important. These are:

gn:note / gn:info / gn:information, for drawing attention to important considerations.

gn:tip, intended for information which is useful but could otherwise be omitted.

gn:announce, for notices or important announcements.

gn:warn / gn:warning

gn:danger

If in doubt as to which type should be used, use gn:note.

[gn:warn title="Oh no!"] I spilled my ice cream. [/gn:warn]

Oh no!

I spilled my ice cream.

The effective and expires attributes set dates and times at which a callout automatically becomes visible or hidden. These attributes must be valid ISO 8601 date strings of the form YYYY-MM-DD, YYYY-MM-DDTHH:MM or YYYY-MM-DDTHH:MM:SS.

[gn:warn effective="2015-12-21T17:00" expires="2016-01-01"]

Our offices are closed until the new year.

[/gn:warn]

`gn:codelisting`

The gn:codelisting shortcode generates a code listing presenting the enclosed content as monospaced text, complete with line numbers. This obviously has limited applications in content creation, but is enormously useful for self-documentation - the content examples on this page are themselves presented as code listings.

[gn:codelisting title="fold.js" caption="Simple fold implementation in Javascript."] function fold(arr, in, op) { var result = in; for(var i = 0; i < arr.length; i++) result = op(result, arr[i], i); return result; } [/gn:codelisting]

fold.js

function fold(arr, in, op) {

var result = in;

for(var i = 0; i < arr.length; i++)

result = op(result, arr[i], i);

return result;

}

Simple fold implementation in Javascript.

`gn:cta`

The gn:cta shortcode creates a call to action - a large centered button prompting the user to navigate elsewhere.

[gn:cta] call: Do details: all the things # The URL/destination of the link href: / [/gn:cta]

`gn:include`

The gn:include shortcode can be used to include the content of the named post verbatim in the current page. All WordPress post types including posts, pages, snippets, and custom post types are supported.

[gn:include from="snippet-contact-communications"]

Justice Communications

Senior Communications Advisor

Policy & Planning Division

Department of Justice

Government of the Northwest Territories

4903 49^th Street

PO Box 1320

Yellowknife

X1A 2L9

Canada

justice_communications (at) gov (dot) nt (dot) ca

1‑867‑767‑9256 x82103

`gn:tldr`

The gn:tldr shortcode maps directly to the CUE template's TLDR (too long; didn't read) component, which is used to display a very prominent, concise answer when a visitor might be disinclined to read the full version.

Within the TLDR content, some formatting elements which would ordinarily be displayed inline such as bold and italics are displayed very prominently on their own line.

[gn:tldr] The answer is **42** [/gn:tldr]

The answer is 42

2. Formatting shortcodes

gn:button

Callouts

gn:codelisting

gn:cta

gn:include

gn:tldr

Related Pages