Pleae Note: This is a plugin that needs to be activated.



more content

even more content

How it’s done

The [accordions] shortcode can be used to split content into a collapsible accordion.

PLEASE NOTE: Shortcode attributes, for example, an attribute would be the title in the accrodion shortcode [accordion title="Accordion Title"], should not contain any html tags and/or special for example: strong tags, header tags, page breaks, ' (apostrophe). The effect could cause issues with the websites layout or functionality.

Auto Height

For auto height on accordion content, add parameter heightStyle=content i.e. [accordions heightStyle=content]

Auto Collapse

For accordions to stay collapsed when the page loads (i.e. the first accordion does not open automatically), add the parameters collapsible=true and active=false, i.e., [accordions collapsible=true active=false].

Add Classes to Accordion

Use the "style" attribute to add a class to either the entire accordion container or to each accordion heading. See example below.

See below, for example:

[accordions collapsible=true active=false style=accordion-container]
 [accordion title="section 1" style="accordion-style1"]
 [accordion title="section 2" style="accordion-style2"]
  more content
 [accordion title="section 3" style="accordion-style3"]
  even more content

The below code will display the first accordion as 'open' as this is the default behavior of accordions


[accordions style=accordion-container]
 [accordion title="section 1" style="accordion-style1"]
 [accordion title="section 2" style="accordion-style2"]
  more content
 [accordion title="section 3" style="accordion-style3"]
  even more content

Built on top of jQueryUI Accordion:


Pleae Note: This is a plugin that needs to be activated.

How It’s Done

By default, the main content on the page is presented as one column with additional content or navigation in the widget areas of the page. If you wish to use a multiple column layout for the content (as seen below), you can easily achieve this by using the grid shortcode system.

Example of the column shortcode on the CMS Features page

Dividing Into 2 Equal Columns

The [column] shortcode divides the page into two columns by default. Therefore, if there are four pieces of content, each enveloped by the column shortcode, then that content will be divided into two columns and 2 rows.


[column] This content will be in row 1 and column 1 [/column]
[column] This content will be in row 1 and column 2 [/column]
[column] This content will be in row 2 and column 1 [/column]
[column] This content will be in row 2 and column 2 [/column]

IMPORTANT: The content is enveloped by the opening [column] tag and closing [/column] tag. Please ensure that you always enclose your content in both tags or else your page will display undesirable results.

Dividing Into Multiple Equal Columns

The column shortcode also features a "size" parameter that allows the user to create more than two equally sized columns or columns of differing sizes (the next section covers columns of differing sizes).

The "size" parameter can be seen as dividing the content area into 12 twelfths. Giving a single column a size of '1' would result in that column taking up 1/12th of the page.

Therefore, to create a three equal columns layout, you need to do the following:

[column size=4] 1st column's content goes here [/column]
[column size=4] 2nd column's content goes here [/column]
[column size=4] 3rd column's content goes here [/column]

Likewise, for four equal columns you can do:

[column size=3] 1st column's content goes here [/column]
[column size=3] 2nd column's content goes here [/column]
[column size=3] 3rd column's content goes here [/column]
[column size=3] 4th column's content goes here [/column]

Dividing Into Columns of Differing Sizes

Any combination of column sizes is allowed. However, if you wish to ensure that there are no formatting issues, you have to remember that the column sizes have to add up to 12.



[column size=4] 1st column's content goes here (smaller content area) [/column]
[column size=8] 2nd column's content goes here (larger content area) [/column]


[column size=3] 1st column's content goes here (smaller content area) [/column]
[column size=3] 2nd column's content goes here (smaller content area) [/column]
[column size=6] 3rd column's content goes here (larger content area) [/column]

PLEASE NOTE: Using sizes lower than 3 is not advised as they offer little spacing for content.

Development Notes

  • Don't mix [Column] short codes with Gravity Form short codes. Forms will not display this way. CTLT's statement: "It's not designed for that. Don't use the gravity form with the [column] shortcode; try to create a table instead."
  • For the most consistent results, leave a line before and after the [Column] and the closing tag [/Column]. An example is shown below:
[column size="4"]

//stuff here


[column size="4"]

Please Note: This is a plugin that needs to be activated.

RSS Feeds

You can pull an RSS feed by using the RSS Widget as described in the section: How to embed a news feed from RSS; however, this method will only allow you to place an RSS feed in the widget area of your site and the feed will be visible throughout the entire site (unless it's on the frontpage). This might not be what you want. No worries! You can use the feed shortcode to place an RSS feed exactly where you want it, on any page of your liking. You can either use the Section widget and type the feed shortcode in the Section widget, like so: [feed].

The shortcode has a number of parameter values:

  1. view=
    • list
    • rsswidget
    • blog
    • archive (does need excerpt_length to be set)
    • cal or calendar
    • events
    • listevents
    • upcoming (does not work with month parameter on RSS feed)
    • timeline
    • flickr (Flickr feeds are limited to the latest 20 images and the gallery will not show more than 20 images no matter what you set the parameter num to)
  2. num - number of items that you want to display : num=5 will list the latest 5 items
  3. url - the url of the feed or site
  4. target= - sets whether links open up in the same or new window
    • '_self' - links open in the same window (default)
    • '_blank' - links open up in a new window
  5. date_format - what the date format should look like default 'M d, Y' - look at PHP Date format for more info
  6. empty - what it should say if the feed is empty
  7. excerpt_length - the number of character it should display
  8. time_zone - a string that is documented here - we are setting the default timezone with the function (shouldn't really need to define this)
  9. show_author - 'true' or 'false' - false if left out only applies to view = rsswidget
  10. show_date - 'true', 'updated' or 'false' - false if left out only applies to view = rsswidget - 'updated' mean that the dates are being sorted by updated xml filed as opposed to the published date
  11. order_by_date - if set to 0, it will use the order given by the rss feed, if set to 1 (also default value), it will try to re-order posts by date.

[feed url=""]

See example below:


Specify on which page you would like this feed to be displayed.


Please see the example of the outcome below.


Alternatively, you can place RSS shortcode in the main content area of the page. For example,


Please see the example of the outcome below.


For example, you can do something like the following:


The shortcode above pulls the list of events from UBC Events Calendar and displays the description of the event below the link.


Please see below how this shortcode works on the webpage.


Here is another shortcode example using parameter "list" and the outcome on the webpage:


Here is another example of the shortcode being used! [feed url='' view='rsswidget' show_author='true' show_date=updated date_format='l, M d, Y h:i:sA' time_zone="America/Vancouver"]


A popular form of navigation is tabbed navigation. This is generally a group of links that give the impression of being sub-navigation built within the page. When clicked on, each tab contains a section of content associated with the tabs title. You can use text, images and/or other shortcodes.

Some shortcode might not work in tabs.


This is the content of tab 1

This is the content of tab 2

How It’s Done

Basic usage below, for more advanced features, please refer to

 [tab title="tab1"]
    tab 1 content
 [tab title="tab2"]
    tab 2 content

Here are the some attributes that the shortcode also excepts

[tabs collapsible="true" selected="0" event="click" position="top" ]
 [tab title="title1"]
  tab content 
 [tab title="title2"] 
  another content tab 

  • collapsible = true or false - weather the tabs should be allowed to be collapsed - this doesn't work with twitter bootstrap
  • selected = integer for example - what tab should be selected. 0 means the first tab. 1 means the second tab etc.
  • event = 'click' or 'mouseover' - does do you user need to click on the tab or just mouse over to get to the content. Tip: Don't use mouseover if you are concerned with mobile.
  • position = 'top' , 'bottom' , 'left', 'right' on what side do you want the tabs to appear. See screenshots for an example.
  • vertical_tabs = true or false - depreciated is the same as position = left

The [menu] shortcode allows you to place custom menus (see Creating Custom Menus to learn how to create custom menus) anywhere on the site. You can place it in main content area of the page/post or you can use the Section widget and specify where you want this menu to appear.

This shortcode was available by default with the CLF Advanced theme.
Now it it part of the More Template Tag Shortcodes plugin. You need to enable the plugin to have the shortcode available again.

Here is the syntax for the shortcode:

[menu menu="Valuing Difference"]

The menu shortcode has many more attributes.

'menu'                => '', 
'container'          => 'div', 
'container_class' => '', 
'container_id'      => '', 
'menu_class'       => 'menu', 
'menu_id'           => '',
'fallback_cb'       => 'wp_page_menu',
'before'              => '',
'after'                 => '',
'link_before'       => '',
'link_after'          => '',
'depth'               => 0,
'walker'              => '',
'theme_location'  => ''

If you are using the new UBC Collab theme. (the responsive theme). The default attribute for the for fallback_cb become 'UBC_Collab_Navigation::pages_nav' and the for the walker attribute become new Bootstrap_Walker_Nav_Menu();

If you are placing the menu shortcode into the header widget are of a site you can use the following html that will help you implement it.

<div id="ubc7-unit-menu" class="navbar expand" role="navigation">
     <div class="navbar-inner expand">
         <div class="container">
          [menu container_class="nav-collapse collapse" container_id="ubc7-unit-navigation" menu_class="nav" ] 
     </div><!-- /navbar-inner -->
</div><!-- /navbar -->

Note: "Valuing Difference" is the name of the sample custom menu.

(click to enlarge)

This example uses the Section widget with the following shortcode:

[menu menu="Valuing Difference"]
(click to enlarge)

Please see below how this looks on the webpage:

(click to enlarge)
[menu walker="default" ] 

Set the walker parameter to default to list the menu in regular list view.


Post Thumbnails allow you to add the post/page featured image directly on the page/post.

Read more on featured images for pages.

How It’s Done

  • size options - thumbnail, medium, large, full, page-header, single-post-slide, single-post-slide-half, single-post-wide-slide
  • timthumb = 1 gives you back the url of the image passed through the timthumb image processor
  • width and height, sizes in pixels - used by both timbthumb and wp_get_attachment_image_src functions
  • [the_post_thumbnail_src size=thumbnail]
  • [the_post_thumbnail_src size=medium]
  • [the_post_thumbnail_src size= large]
  • [the_post_thumbnail_src size=full]
  • [the_post_thumbnail_src size=page-header]
  • [the_post_thumbnail_src size=single-post-slide]
  • [the_post_thumbnail_src size=single-post-slide-half]
  • [the_post_thumbnail_src size=single-post-wide-slide]

With the image tag included (<img src="image-src">):

  • [the_post_thumbnail size=thumbnail]
  • [the_post_thumbnail size=medium]
  • [the_post_thumbnail size= large]
  • [the_post_thumbnail size=full]

Pleae Note: This is a plugin that needs to be activated.

[loop] is a very powerful shortcode that allows you to customize the type of content to display. With this shortcode you can do anything mentioned here. For more information on what kind of parameters are possible in the query parameter please see: WP Query Parameters.

You can place the shortcode anywhere in the site.

Note: You must activate the Loop Shortcode plugin to use the shortcode


  • query - the query that you want to retrieve from the database see some possibilities here.
  • rss - the url of the feed that you want to display,
  • view - choose one (full, archive, list) or create your own.
  • pagination - by default pagination is false, only works with the query and not the rss.
  • num - used in conjunction with the rss to display a limited set of item,
  • error - what to display if there is no results can be found
  • author - filters posts by author name or for the current logged in user, use: author="current_user" #

'# for current user comments, use the [user_comments] shortcode

Examples of Loop Usage

Please find below several examples of [loop] usage.

The following line placed in the main content area of the frontpage will display the latest 5 posts on the frontpage of the site:

[loop query="posts_per_page=5" view="archive"]

The following line placed in the main content area of the frontpage will display the latest 5 posts on the frontpage of the site, with pagination enabled to navigate to older posts:

[loop query="posts_per_page=5" pagination="true" view="archive"]

To combine parameters in the query, use the ampersand character ('&'). The following line displays 5 posts from the category SampleCategory:

[loop query="posts_per_page=5&category_name=SampleCategory" view="archive"]
Loop shortcode take2.png

Here is how the outcome looks on the website:

Loop shortcode take3.jpg

You can use the following attributes for the view parameter:

  • archive
  • list
  • full

Below is another example of [loop] usage:

[loop query="category_name=Conference"]
[the_excerpt] by [the_author] - Date: [last-updated]
You can use the following parameters within the [loop] shortcode:
*[the_date] (post publish date, but one date per page, see
*[the_time] (to display the date with multiple posts with the same date, use [the_time format='F j, Y'])
*[cf field_name] (where 'field_name' is the name of a custom field in the query. The value of the custom field will be displayed)
*Documentation:UBC Content Management System/CLF Theme/List of currently available shortcodes

Note: Some parameters require the "More Template Tag Shortcodes" plugin to be activated. (e.g., the [the_content] tag).

This example pulls all posts in the category "Conference" and displays the title, permalink, author, date and excerpt and thumbnail image if available.


You can also sort by custom field. For example:

[loop query="posts_per_page=5&category_name=newsandevents&meta_key=event_date&orderby=meta_value&order=asc" view="archive"]

You can also use loop shortcode with pages.

For example, if you wish to dynamically pull a list of pages that use custom field 'color', regardless of the value of that custom field, you might do it with the help of a shortcode that looks like this:

[loop query="posts_per_page=5&post_type=page&meta_key=color" view="list"]

To return all the posts in the February 2011, use the time parameters (see

[loop query="year=2011&monthnum=2" view=archive]

To return posts with future publishing dates in similar fashion as upcoming events use this:

[loop query="order=ASC&category_name=upcoming-events&post_status=future,publish"]

The loop query above will show future and published posts in ascending order. If you wanted to only show future posts delete publish from post_status.


These shortcodes below take advantage of some of the styles offered in bootstrap.

Please Note: This is a plugin that needs to be activated.

With Attributes. Style should be a CSS class style.

[container style="alert"]Content[/container]

Find out more about Bootstrap Styles.

Please note: The thumbnail shortcode is use in conjunction with column shortcode.




An introduction to widgets and commonly used widgets.

Read More

Featured Images

Featured Images

Featured images are an easy way to visually enhance your websites posts or pages.

Read More



Shortcodes are used to perform complicated tasks and functions but with simple, easy of use.

Read More

How it’s done

[column size="4"]
[/column][column size="4"]
[/column][column size="4"]


Default | Success | Important | Warning | Info | Inverse

1 | 2 | 3 | 4 | 5 | 6

How it’s done

Without the attribute:


With the name attribute:

[label name="success"]Word[/label]
[badge name="success"]1[/badge]

The “name” attribute can use these values:

  • success
  • important
  • warning
  • info
  • inverse


This text is in an alert box!

How it’s done

Without an attribute:

[alert]This text is in an alert box![/alert]

With an attribute:

[alert name="success"]This text is in an alert box![/alert]

The “name” attribute can use these values:

  • success
  • error or danger
  • info


A Button that is a link:

A Button

How it’s done

[button]A Button![/button]
[button name="primary"]A Button![/button]
[button title="Your Link Title" name="primary"]A Button![/button]

Add a link to your button

[button link="http://yourlink" name="primary"]A Button![/button]

Add a title to your button

If you don’t use the the title attribute then the buttons content will be used as the title.

[button title="Your Link Title" link="http://yourlink" name="primary"]A Button![/button]

A Button container

A Button in a Container

How it’s done

[buttoncon]A Button![/buttoncon]
[buttoncon name="primary"]A Button![/buttoncon]

Add a link to your button container

[buttoncon name="primary"]<a href="http://yourlink" title="link title">A Button!</a>[/buttoncon]

The Icon shortcode uses the attributes from Font Awesome. You can use this site to find the most current attributes.

How it’s done

Say you want to use the icon?

  • Find the icon name from Font Awesome.
  • You find out the ‘s name is “icon-leaf”
  • Use only the name of the icon after the “icon-“
  • Then this would be your shortcode [icon name=”leaf”]

What if I dont use the name attribute?

[icon] =

Allows you to change text colour or a backgrounds element colour


Simple colour option:

[colour option="pomegranate" ]Content[/colour]

Colour text and background:

[colour option="pomegranate alizarin-bg"]Content[/colour]

For information on UBC Brand Colours go to:

Colour Options List



















































How it’s done


How it’s done


Use this sections index page.


A Shortcode is a WordPress-specific code that is used in post/page content or the section widget to execute a piece of dynamic code.

For example, the shortcode [year] will display the current year. The word “year” is the shortcodes identifier/name. How can this be useful? Well if you ever write, “In 2010 things will be different” and want 2010 to automatically correspond to the current year, you can just write “In [year] things will be differrent” and the year will automatically correspond to the current year.

In other words, a shortcode is a WordPress-specific code that lets you do nifty things with very little effort.


Simple Shortcode


Basic Shortcode

In most cases a shortcode will incases content or other shortcodes. If this is the case then the shortcode will need to have an open and a close.

[shortcode] Some Content [/shortcode]

The “/” indicates the closing and is very important to the shortcode process.

More Advanced Shortcode

Often shortcodes will have an attribute with a specific parameter that can give the user more options for the feature.

[shortcode attribute="parameter"] Some Content [/shortcode]

Note: A shortcode attribute is a preset variable with preset parameters. Meaning that the attribute is not a customizable name and should be in the user documentation.

Here is a working example where “column” is the shortcode identifier/name, “size” is the attribute”, and “2” is the parameter. The end result would be a column with the width of 2 columns.

[column size="2"] Some Content [/column]

Accordions Columns Feeds Tabs Menu Featured Images Loop Bootstrap Shortcodes