Shortcodes

Shortcode = Shortcut

According to WordPress, “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.”

“A shortcode lets you do nifty things with very little effort.”

This page demonstrates some of the most useful shortcodes available within the UT System WordPress theme and provides samples that can be copied and pasted into your web pages.

You can find additional help with shortcodes – and quick access for inserting examples – using the Bootstrap Shortcodes Help button while logged into your WordPress website.

Lead Paragraph

It can be helpful to summarize a page’s content with a lead paragraph. The Lead shortcode allows you to make a block of text appear larger and easier to read.

[lead]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[/lead]

Columns

Our web templates are based on a 12 column grid. The Grid shortcode allows you to create columns in multiples of 12; two, three, four and six.

Column size values are calculated by dividing 12 by the desired number of columns. See the examples below.

Two Columns

Two Columns Shortcode

[row]
[column md="6"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/column]
[column md="6"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/column]
[/row]

Three Columns

Three Columns Shortcode

[row]
[column md="4"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/column]
[column md="4"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/column]
[column md="4"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/column]
[/row]

Four Columns

Four Columns Shortcode

[row]
[column md="3"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/column]
[column md="3"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/column]
[column md="3"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/column]
[column md="3"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/column]
[/row]

Six Columns

Six Columns Shortcode

[row]
[column md="2"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/column]
[column md="2"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/column]
[column md="2"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/column]
[column md="2"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/column]
[column md="2"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/column]
[column md="2"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
[/column]
[/row]

Tables

The default Tables shortcode adds borders and striped rows to your table. You will need to manually add an HTML table within the shortcode.

The example below provides sample code that can be used to start your table. If your table does not need a header row, you can replace the table header tag <th> with the standard table data tag <td>.

Table Example

Table Sample Shortcode

[table-wrap bordered="true" striped="true"]
<table>

<tbody>

<tr>

<th>Column One</th>

<th>Column Two</th>

<th>Column Three</th>

</tr>

<tr>

<td>Row One</td>

<td>Row One</td>

<td>Row One</td>

</tr>

<tr>

<td>Row Two</td>

<td>Row Two</td>

<td>Row Two</td>

</tr>

</tbody>

</table>

[/table-wrap]

Buttons

[button type="default" size="sm" link="#"] SMALL BUTTON [/button]

[button type="default" size="md" link="#"] MEDIUM BUTTON [/button]

[button type="default" size="lg" link="#"] LARGE BUTTON [/button]

Alerts

[alert type="success"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[/alert]

[alert type="info"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[/alert]

[alert type="warning"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[/alert]

[alert type="danger"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[/alert]

Panels

[panel type="default" heading="Panel Title" footer="Footer text"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[/panel]

[panel type="default" heading="Panel Title"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[/panel]

[panel type="default"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[/panel]

Wells

[well size="sm"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[/well]

Tabs

[tabs type="tabs"]
[tab title="One" active="true"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[/tab]
[tab title="Two"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[/tab]
[tab title="Three"]
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

[/tab]
[/tabs]

Collapsibles

[collapsibles]
[collapse title="Collapse 1" active="true"]
Here is the first collapsible item. It is open by default with the 'active' parameter set to "true".

[/collapse]
[collapse title="Collapse 2"]
Here is the second collapse item. It will be closed by default. This is a separate paragraph and the heading is generated by the 'title' attribute.

[/collapse]
[collapse title="Collapse 3"]
Here is the third collapse item. It will be closed by default. The collapsible pattern is especially handy when you have a long list of FAQs.

[/collapse]
[/collapsibles]