Shortcodes

Shortcodes are text blocks which WordPress knows how to translate into formatted HTML. All shortcodes are used by surrounding the shortcode name with brackets. Edit this page to see the patterns used to build the examples below.

When using a shortcode, follow this pattern:

For standalone shortcodes: [shortcode-name attribute=”value”]
For content shortcodes: [shortcode-name attribute=”value”]Add Content Here[/shortcode-name]

Some shortcodes are intended to work together and should not be used apart from one another. These are marked as combined shortcodes.

The second row of the Classic Editor includes some custom buttons which can be used to insert these shortcodes, including controls which set the options described below. If any content in the editor is selected prior to using one of the shortcode buttons, the generated tag will wrap that content.

Accordion

Generates an accordion with any number of collapsible panels. Requires two shortcodes: accordion and accordion-section.

Type

Combined

Available Attributes

accordion
- name (string): Assigns a unique id to the accordion.
accordion-section
- title (string): Displayed on the section header, always visible even when the content isn’t.

Example Usage

This is the content for Section One.

This is the content for Section Two.

This is the content for Section Three.

Block

The block shortcode provides multiple ways to put a collection of content into a decorative frame with internal padding. Content can be aligned horizontally and vertically.

Type

Content

Available Attributes

h-align (one of: left, center, right): Sets horizontal alignment. Note that the center option does not automatically center text.
v-align (one of: top, center, bottom): Sets vertical alignment.
bg-color (one of: light, dark, primary, primary-shade, secondary, secondary-shade): Sets a background color. See below for examples of each.
tight (true or false): If true, reduces the internal padding around the block’s content.
flush (true or false): If true, removes all internal padding around the block’s content.
rounded (true or false): If true, adds rounded corners.

Example Usage

A standard block with centered text.

A block with rounded corners.

A block with tight padding.

A block with no padding.

light

dark

primary

primary-shade

secondary

secondary-shade

Card

Creates a standalone panel with an optional header. If a header is provided, it is rendered on top of the panel with an alternate visual style.

Type

Content

Available Attributes

header (string): Adds a header and title to the rendered card.
type (one of: plain, dynamic, textured): Applies a predefined style to the card. See examples below.
full-height (true or false): If true, the card will attempt to fill the height of its container.

Example Usage

Plain

This is a plain card.

Dynamic

This is a dynamic card.

Textured

This is a textured card.

File List

Most pages on the site (including this one!) have the option to attach files directly to the page within the WordPress admin. The File Attachments section includes instructions on how to attach files. To actually place the list on your page, use the file-list shortcode. This can be nested inside any other Content shortcode described on this page.

Type

Standalone

Available Attributes

None.

Grid

The row and column shortcodes can be used to manually organize content into the 12-column grid system used by Bootstrap, the styling language powering this website. Any number of columns can be used within a single row, but columns will wrap to a new row if the total column count adds up to more than 12. Try resizing this page and watch the examples below.

Note that it is not necessary to include all four sizes in each column. If one is omitted, the column will fallback to the next smallest size, defaulting to 12 (full width).

Type

Combined

Available Attributes

row
- no-gutters (true or false): If true, removes the horizontal padding between columns.
column
- xs (number, 1–12): The number of columns to span on the very smallest displays (smaller phones in portrait mode, typically).
- sm (number, 1–12): The number of columns to span on small displays (larger phones, phones in landscape view, some small tablets).
- md (number, 1–12): The number of columns to span on medium displays (most tablets, small laptops).
- lg (number, 1–12): The number of columns to span on large displays (larger laptops, most if not all desktops).

Example Usage

This side will be:

12 columns at xs
6 columns at sm
5 columns at md
3 columns at lg

This side will be:

12 columns at xs
6 columns at sm
7 columns at md
9 columns at lg

At xs, all columns will stack. At lg, no columns will wrap.

At md, this column will wrap to the next line.

At sm, this column will wrap to the next line.

Media

This shortcode allows you to place an image next to a block of content, while preventing the text from wrapping under the image. The image can be horizontally and vertically aligned relative to the content. Note that the text always take a proportional amount of space and will force the image to shrink if necessary.

Type

Combined

Available Attributes

h-align (one of: left, right): Sets the horizontal alignment of the image.
v-align (one of: top, middle, bottom): Sets the vertical alignment of the image.

Example Usage

This shows the image to the left of this content. The content does not wrap under the image.

This shows the image to the right of this content. The content does not wrap under the image.

This shows the image to the left of this content, but vertically aligned to the bottom.

This shows the image to the right of this content, but vertically aligned to the bottom.

Tabs

Generates a set of independently controlled tabs, which can be used to create several browsable sections of content within a single region. Requires two shortcodes: tabs and tab. Titles provided to the nested tab shortcodes will be used to create the tab navigation. If the content of a tab contains any shortcodes, they will be rendered as expected within the tab region. Note that tabs cannot be nested.

Type

Combined

Available Attributes

tabs
- direction (horizontal or vertical): Sets the direction of the generated tab menu. The default option is horizontal.
- style (one of: large, decorative): If present, applies an alternative visual style.
- sticky-tabs (true or false): If true, will cause the tabs to “stick” to the top of the screen while scrolling.
tab
- title (string): Sets the title of the tab.

Example Usage

This is the content for Tab One.Nulla nullam habitant praesent odio facilisis ultrices dolor porttitor dapibus dictumst laoreet pellentesque blandit arcu aliquet, ut non malesuada cursus pharetra purus ipsum natoque velit netus ac quis maecenas.

This is the content for Tab Two. Auctor arcu faucibus habitasse porttitor sagittis pulvinar rhoncus tellus varius tortor, pharetra rutrum aliquam velit praesent euismod justo ultricies lorem.

This is the content for Tab Three. Lacinia adipiscing vestibulum sem luctus a est morbi quisque fusce dictum phasellus placerat lorem erat, torquent fermentum in augue massa maecenas rhoncus nam facilisis habitant magna metus.

This is the content for Tab Two. Auctor arcu faucibus habitasse porttitor sagittis pulvinar rhoncus tellus varius tortor, pharetra rutrum aliquam velit praesent euismod justo ultricies lorem.

This is the content for Tab One in a vertical style. Aenean curabitur ex hendrerit elit vel sit himenaeos nisi dignissim justo duis sapien, erat dis id vehicula neque bibendum fames nec sodales velit.

This is the content for Tab Two in a vertical style. Proin quam habitasse interdum blandit sed netus magnis enim finibus quisque metus ullamcorper ut tempor, montes adipiscing pulvinar magna eu ac imperdiet etiam sagittis diam mollis nisl.

This is the content for Tab Three in a vertical style. Fringilla eu imperdiet phasellus donec taciti commodo euismod facilisis lorem augue primis etiam, potenti pharetra accumsan morbi ullamcorper bibendum fusce auctor dictum nullam.

Text Columns

Text and inline photo content wrapped by the text-columns shortcode will be automatically sorted into a defined number of columns. The number of columns can be set at multiple browser window sizes, as seen in the example. The maximum column count is four. If a particular size is not included, the browser will use the next smallest one, ultimately defaulting to a single column.

Type

Block

Available Attributes

xs (number, 1–4): The number of columns on the very smallest displays (smaller phones in portrait mode, typically).
sm (number, 1–4): The number of columns on small displays (larger phones, phones in landscape view, some small tablets).
md (number, 1–4): The number of columns on medium displays (most tablets, small laptops).
lg (number, 1–4): The number of columns on large displays (larger laptops, most if not all desktops).

Example Usage

Himenaeos malesuada inceptos aenean taciti ad lobortis hendrerit per cursus ante eu vestibulum cras quisque eleifend proin, lacinia duis molestie pretium arcu libero turpis egestas id consectetur netus non metus magnis integer. Libero ridiculus maecenas erat nascetur lectus taciti facilisi habitant massa, risus purus cursus est rutrum neque pulvinar tristique adipiscing, lacus sapien dictum amet ut finibus lorem vehicula.

Porttitor inceptos egestas tellus mattis sit id auctor netus, neque habitasse fringilla leo natoque turpis vestibulum magnis feugiat, efficitur massa duis tempus ullamcorper volutpat maecenas. Erat arcu vestibulum quis risus tellus cras lobortis netus, amet class habitant habitasse fermentum tincidunt. Mauris faucibus convallis porttitor phasellus rhoncus inceptos ridiculus tincidunt ante, curae habitasse felis netus nam suspendisse magna. Nam curabitur blandit scelerisque iaculis at nibh urna commodo dapibus mus, aenean duis imperdiet gravida penatibus tincidunt nec adipiscing integer. Nam ac hendrerit nunc tristique proin ex quis at ante pellentesque, platea netus molestie pretium et cursus adipiscing sem suspendisse, felis lacus viverra tellus ad suscipit justo parturient eros.

Pharetra vitae habitasse nullam nisi litora suscipit iaculis auctor mauris ullamcorper faucibus, convallis rhoncus velit tortor feugiat curae per blandit primis lacus. Tempus vitae congue lacus magna mollis lectus rutrum felis aliquet odio, cubilia ad taciti auctor per eros ac ut sapien risus, consequat urna gravida at vehicula ante sem laoreet dignissim.

Sed tempus volutpat quam arcu nunc fringilla, interdum est diam vehicula sapien. Diam porttitor malesuada commodo pellentesque ligula maecenas tincidunt torquent consectetur, odio donec taciti laoreet amet iaculis velit vitae, ridiculus fringilla nunc adipiscing at curae vestibulum neque. Neque ac nisl class adipiscing lorem lectus erat pellentesque odio porta, fermentum donec habitant dictumst quisque massa aliquet pharetra. Morbi nostra laoreet finibus lobortis class montes mi phasellus fermentum orci, posuere sed facilisi ipsum natoque molestie massa dapibus dolor.

Timeline

The timeline shortcode works in conjunction with the Timelines feature seen in the lefthand sidebar. This allows you to create an interactive timeline of events and then insert it into any location within a page. See the Timelines section of the site for more information.