Skip to content

Shortcodes

WHAT IS A SHORTCODE?

A shortcode is a WordPress-specific code that lets you do nifty things with very little effort. Shortcodes can embed files or create objects that would normally require lots of complicated, ugly code in just one line. Shortcode = shortcut.

Shortcodes are surrounded by [square] brackets. The brackets contain a command that WordPress executes and renders. The command is followed by arguments, these help customize the output.

[name arg1="variable" arg2="variable2"]

Shortcodes can also wrap around content. This allows you to pass content to the command.

[name arg1="variable"] some content here [/name]

You’ll notice that the shortcode has an [start] tag and an [/end] tag. These tags help encapsulate the content being passed to the command.

For more clarification read through the available shortcodes.


YOUTUBE

The [youtube] shortcode is used to insert a YouTube video. It accepts two arguments.

Argument Description Choices Default
url YouTube video URL. This can be either the URL of the video or its shareable URL. Nothing, this field is required.
aspect Controls the video aspect ratio when resizing the browser. “16by9” or “4by3” “16by9”

Examples:

[youtube url="https://www.youtube.com/watch?v=dAF2VYTgSFE"]
[youtube url="https://youtu.be/dAF2VYTgSFE” aspect=”4by3”]

PANEL

The [panel] shortcode creates a styled panel. For information on the html panel visit: https://webmaster.idaho.gov/extras/components/#panels

Argument Description Choices Default
title This is the colorful bold area atop the panel. The title of the panel. Nothing, this field is required.
type Sets the coloring of the panel. “default”, “primary”, “success”, “info”, “warning”, “danger” “default”

Examples:

[panel title="Panel Title"] Panel Content [/panel]
[panel title="Error Panel" type="danger"]
Panel content can be multiple lines.
[/panel]

TABS

The [tabs] shortcode creates a tab group. This wraps the [tab] shortcodes that defines the individual tabs. The [tabs] shortcode doesn’t have any arguments. These are reserved for the individual [tab] it wraps around. For information on the html tabs visit: https://webmaster.idaho.gov/extras/javascript-components/#tabs

Argument Description Choices Default
title This is displayed in the tab. The title of the tab. Nothing, this field is required.
open Sets the tab as open. This should only be set once. “true” or “false” “false”

Example:

[tabs]
[tab title="Tab 1" open="true"] Tab Content [/tab]
[tab title="Tab 2"] Tab Content [/tab]
[/tabs]

ACCORDION

The [accordion] shortcode creates a collapsable group. This wraps the [collapse] shortcodes that defines the individual panels. The [accordion] shortcode doesn’t have any arguments. These are reserved for the individual [collapse] it wraps around. For information on the html accordions visit: https://webmaster.idaho.gov/layouts/components-js.html#collapse

Argument Description Choices Default
title This is displayed in the tab. The title of the tab. Nothing, this field is required.
open Sets the tab as open. This should only be set once. “true” or “false” “false”
type Sets the coloring of the panel. “default”, “primary”, “success”, “info”, “warning”, “danger” “default”

Example:

[accordion]
[collapse title="Collapse 1" open="true"] Collapse Content [/collapse]
[collapse title="Danger Collapse" type="danger"] Danger Message [/collapse]
[/accordion]