Skip to content

Shortcodes

Shortcodes in Wordpress are a way to create custom tags that Wordpress will translate into the corresponding HTML behind the scenes. There are several included shortcodes that come out of the box with Wordpress; however, we have also created several custom shortcodes for creating specific elements and layouts in the Bridge School Wordpress installation.

Overview

Shortcodes are very similar to HTML tags; they contain the shortcode itself and optional attributes. Shortcodes use square brackets to designate the start and end of a tag (versus angle brackets for traditional HTML). Attributes -- again like in HTML -- are key/value pairs delimited by and equals sign. For example, in the following shortcode:

[gallery id="123"]

gallery is the shortcode, and id is an attribute with a value of 123.

In order to add a shortcode to a Wordpress page, simply type the shortcode directly into the HTML editor (no need to switch it to Text/HTML view). When the page renders, Wordpress will replace it with the appropriate HTML.

Now, onto the custom Bridge School shortcodes...

This adds a "Return to Top" link to the page. It is the simplest shortcode and requires no nested shortcodes or attributes.

[top]

Google Calendar embed

Google calendar is a bit tricky since Wordpress by default tries to prevent embedding of elements that could contain malicious code (like iframes). The Google Calendar shortcode gets around this. In order to embed a Google Calendar, you'll first need to login to the Google account for the calendar. Open the settings for the calendar and:

  1. Go to the sharing settings for the calendar and make sure it is set to "public".
  2. Get the ID of the calendar. This will look something like
okcjf369qhnh4kmtjtufn63f9o@group.calendar.google.com

If you cannot find the ID listed in the settings, you should be able to grab it from the embed code that is provided. The ID for the calendar will be the value of the src attribute in the embed code. E.g.

https://calendar.google.com/calendar/embed?src=okcjf369qhnh4kmtjtufn6g69o%40group.calendar.google.com&ctz=America%2FLos_Angeles

Once you have changed the settings for the calendar and copied the ID, you can embed the calendar with the following shortcode (replacing {{id}} with the calendar ID):

[gcal id={{id}}]

Expander

This creates an expanding container. This shortcode requires a closing tag and has a single attribute:

  • title: The text for the title bar which, when clicked, will toggle the visibility of the content
[expander title="My Title"]
  The hidden content goes here
[/expander]

Accordion

The accordion functions very similarly to the expander except that only one expander in the group can be open at any given time. The accordion shortcode also requires nested shortcodes to work. Like the expander shortcode, the accordion shortcode has a single attribute:

  • title: The text for the title bar which, when clicked, will toggle the visibility of the content for that accordion element
[accordions]
  [accordion title="Accordion 1"]Content 1[/accordion]
  [accordion title="Accordion 2"]Content 2[/accordion]
  [accordion title="Accordion 3"]Content 3[/accordion]
[/accordions]

Tabs

The tabs shortcode creates a tab interface. The tabs shortcode is more complicated that most of the other shortcodes. It is composed of four elements:

  • [tabgroup]: This is a wrapper element in which all the rest of the tab elements should exist
  • [tabs]: This is a wrapper element for the tabs themselves
  • [tab]: An individual tab. Contains two attributes: title: The text on the tab; target: A reference to the tabpanel that this tab will activate. This should be the same as the id attribute for the associated [tabpanel]
  • [tabpanel]: The panel of content that is activated by a tab. The id attribute for the tabpanel should match the target attribute of the [tab] that is meant to activate it.
[tabgroup]
  [tabs]
    [tab title="Tab One" target="tab-1"]
    [tab title="Tab Two" target="tab-2"]
    [tab title="Tab Three" target="tab-3"]
  [/tabs]
  [tabpanel id="tab-1"]
    Content for tab 1
  [/tabpanel]
  [tabpanel id="tab-2"]
    Content for tab 2
  [/tabpanel]
  [tabpanel id="tab-3"]
    Content for tab 3
  [/tabpanel]
[/tabgroup]

Grid

Warning

The grid shortcodes below still work. However, Wordpress now handles in-page grid systems quite well with the build-in "columns" blocks. Those methods should be preferred over this shortcode.

The grid provides basic layout functionality in a 6-column grid. Composing a grid uses two components:

  • row: This is a required wrapper element around the column elements
  • column: Creates and individual column. The column takes a single span attribute which defines the number of columns you want your column to span. span should be a minimum of 1 and a maximum of 6. For any given row element, the sum of the column spans should never go above 6.
[row]
  [column span="2"]2 column span[/column]
  [column span="1"]1 column span[/column]
  [column span="3"]3 column span[/column]
[/row]

The carousel shortcode creates a content carousel. It uses two components:

  • carousel : This is a required wrapper element around the carousel panels
  • carouselpanel : Defines an individual panel within the carousel. The content for a carousel can be any html including images and (within reason) other shortcodes: There is one optional attribute for a carouselpanel :
    • caption : Defines a caption for the panel
[carousel]
  [carouselpanel caption="This is my caption"]Content for panel 1[/carouselpanel]
  [carouselpanel ]Content for panel 2[/carouselpanel]
  [carouselpanel caption="Another caption"]Content for panel 3[/carouselpanel]
[/carousel]