WordPress shortcodes allow you to take advantage of custom-built features designed specifically for sites at BU. Most shortcodes do not display anything in the editor, but will add content or change the layout of the page when viewed.

Shortcodes use a special tag made with two square brackets [ ] and should be added in the WordPress visual editor rather than the HTML editor. You cannot nest shortcodes within one another, so you must complete or close one shortcode before beginning a new one.

Make Page Sections that Expand and Collapse

[collapsible heading="Heading" elem="h3"]
Content
[/collapsible]

This shortcode requires the "heading" and "elem" attributes, with optional "id" and "open" attributes:

  • heading="heading-text"  - Specifies what text should be displayed and used as the clickable text to trigger the expansion or collapse.
  • elem="element" - Sets the style to wrap the clickable text. It is often best to use a heading element (h1,h2,h3,h4,h5).
  • id="myidname" - Adds an id attribute to the clickable text.
  • open="true" - Keeps the collapsible section open by default, but allows it to be closed.
The opening and closing ([/collapsible]) shortcode tags must wrap the content you would like to expand and collapse as in the example above.

This shortcode supports linking to content within the collapsible section. When a user follows a link to content within a collapsed section, that section will automatically expand. To implement this type of link, add an anchor tag to the content within the [collapsible] shortcode and assign it an id attribute, for example, <a id="destination1">. You can link to this anchor from within the same page (<a href="#destination1">) or from an external source (<a href="http://www.bu.edu/yoursite/yourpage/#destination1">). Note that this automatic expansion with internal links is limited to modern browsers, and will not work with IE7 or Firefox 3.5.

Display a Random Image When Your Page Loads

[random-image]
<img src="http://www.bu.edu/my-blog/files/2011/02/image-1.jpg" />
<img src="http://www.bu.edu/my-blog/files/2011/02/image-2.jpg" />
<img src="http://www.bu.edu/my-blog/files/2011/02/image-3.jpg" />
<img src="http://www.bu.edu/my-blog/files/2011/02/image-4.jpg" />
[/random-image]

The [random-image] shortcode displays a random image every time your page loads. The images it uses are determined by you. To use this shortcode:

  1. Place your images next to each other on the page using the visual editor.
  2. Switch to the HTML editor.
  3. Before the HTML code (<img src...) for first image, add [random-image]
  4. Find the end of the code (...jpg" />) for the last image and close the shortcode by adding [/random-image]

Any code (other than what is required for images) that is placed within the shortcode will be ignored. For instance, if you would like your images to link to another page, you must wrap the anchor tag (<a>) around the shortcode. It is not possible to have different images link to different pages.

This shortcode requires the Random Image plugin that can only be activated by the IT Help Center. If you would like to use this shortcode, please contact us.

Automatically Create Lists of Child Pages

[bu_list_child_pages parent="ID" filter_excluded="Yes"]

This shortcode has two possible variables:

  • parent="ID " - Must be filled in with the ID of the parent page for which the children should be listed. The easiest way to find an ID is to click on the Edit link of the parent page and check the post=id-number portion of the URL.
  • filter_excluded="Yes" - Filters out pages that have been excluded from your site's navigation. This attribute is optional, so you may leave it out of the shortcode if you would like your list to display every child page.

postID

Automatically Create a Site Map

[bu_sitemap depth="#"]

The bu_sitemap shortcode automatically generates a list of pages that visitors and automated site crawlers can use to easily find and access all pages on your site. This shortcode has only one variable, depth="#", which is used to define the total number of levels of your site hierarchy that you would like to include in your site map. For instance, the following shortcode would create a site map with only the top three levels of your site hierarchy:

[bu_sitemap depth="3"]

Embed a Custom Map

Using our instructions for creating a custom BU Maps shortcode, you can display a specialized map that shows points of interest for your site's visitors.

Embed a Page or Text File

Using the BU Includes plugin, you can embed the contents of a page, post, text file, or HTML file in the body of a page or post. BU Includes is an excellent way to maintain content in a single location, but display it across your site. For example, you can create a single page that lists office hours and contact information and display it in all of the appropriate locations without having to worry about updating it on multiple pages.

Before using BU Includes, it must be enabled on your site by the IS&T WordPress administrators. Please contact us to submit this request.

BU Includes uses shortcodes to display items within a page, and WordPress pages, posts, or Media Library items may be included using either their ID or by their URL. For instance, a Media Library item may have the URL of http://www.bu.edu/my-awesome-site/files/2010/06/my-awesome-file.txt and the ID 500.

Include with ID

[bu-include id="500"]

Include with URL

[bu-include src="http://www.bu.edu/my-awesome-site/files/2010/06/my-file.txt"]

Both of these options will include the same file using different methods. When using the URL, you may use the entire path or a relative one (e.g., files/2010/06/my-file.txt).

Publish a News Feed on Any Page

Use the special news shortcodes to output a specialized list of your WordPress news posts to any page on your website.

Separate the Page in the Visual Editor

[bu_div class="my-awesome-class"]
Content
[/bu_div]

Use this shortcode to create divisions on the page that are visible in the WordPress visual editor, but not when viewing the page as normal. To use this shortcode, replace the example class above with any class you would like to use. If you do not have your own style defined in your theme or custom.css file, use either class="callout_left" or class="callout_right". The opening and closing ([/bu_div]) shortcode tags must wrap the content you would like to expand and collapse as in the example above.