(1) 250.472.8528
andrew.weaver.mla@leg.bc.ca

Shortcodes

We’ve built a few shortcodes into the theme. Here’s how they’re used.

Buttons

[ button type="(radius round)" size="(small medium large)" color="(blue black red white)" nice="true false" text="Button text" url="http://google.com" ]

Primary – Small Info – Small Success – Small Danger – Small

Primary – Medium Info – Medium Success – Medium Danger – Medium

Primary – Large Info – Large Success – Large Danger – Large

 

Panels

 

[ panel text="This is a panel." ]

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.

Alert Box Shortcode

[ alert ]…[ /alert ] 

The shortcode gives you and your editors and easy way to display the Foundation Alerts with some additional options.

Basic usage

This is a basic alert box without additional options×
This is an alert box with the type set to alert×
This is an alert box with the type set to success×
This is an alert box with the type set to secondary×
[ alert]…[/alert] // no options
[ alert type=alert]…[/alert] // type attribute alert
[ alert type=success]…[/alert] // type attribute success
[ alert type=secondary]…[/alert] // type attribute secondary

 

Additional options

Alert boxes come with two additional options: close=no (default is yes) and timeout=2000 (timeout in ms). The timeout option makes the box disappear after the timer is done.

This is an alert without a close link
[ alert close=no]…[/alert] // no close button
[ alert timeout=10000]…[/alert] // timeout of 10s

Column shortcode

One of the best features of Foundation is the powerful grid it offers, used throughout required+ Foundation. We took the grid and turned it into an easy and powerful shortcode plugin, meet [ column]:

[panel text=”

Six columns

In ac libero eget nisl accumsan mollis. Quisque ultricies aliquet ante, eget rhoncus dui commodo vitae. Curabitur suscipit ante quis augue rutrum quis volutpat arcu interdum. Ut dapibus sagittis dapibus. Etiam erat eros, pharetra eget mollis eget, laoreet in tortor. In tincidunt blandit turpis, a ultrices neque porttitor eget.

“]

[panel text=”

Six columns

In ac libero eget nisl accumsan mollis. Quisque ultricies aliquet ante, eget rhoncus dui commodo vitae. Curabitur suscipit ante quis augue rutrum quis volutpat arcu interdum. Ut dapibus sagittis dapibus. Etiam erat eros, pharetra eget mollis eget, laoreet in tortor. In tincidunt blandit turpis, a ultrices neque porttitor eget.

“]

[panel text=”

[panel text=”

Four

In ac libero eget nisl accumsan mollis. Quisque ultricies aliquet ante, eget rhoncus dui commodo vitae. Curabitur suscipit ante quis augue rutrum quis volutpat arcu interdum. Ut dapibus sagittis dapibus. Etiam erat eros, pharetra eget mollis eget, laoreet in tortor.
“]

[panel text=”

Four

In ac libero eget nisl accumsan mollis. Quisque ultricies aliquet ante, eget rhoncus dui commodo vitae. Curabitur suscipit ante quis augue rutrum quis volutpat arcu interdum. Ut dapibus sagittis dapibus. Etiam erat eros, pharetra eget mollis eget, laoreet in tortor.
“]

[panel text=”

Four

In ac libero eget nisl accumsan mollis. Quisque ultricies aliquet ante, eget rhoncus dui commodo vitae. Curabitur suscipit ante quis augue rutrum quis volutpat arcu interdum. Ut dapibus sagittis dapibus. Etiam erat eros, pharetra eget mollis eget, laoreet in tortor.
“]

[panel text=”

Three

In ac libero eget nisl accumsan mollis. Quisque ultricies aliquet ante, eget rhoncus dui commodo vitae. Curabitur suscipit ante quis augue rutrum quis volutpat arcu interdum. Ut dapibus sagittis dapibus. Etiam erat eros, pharetra eget mollis eget, laoreet in tortor.
“]

[panel text=”

Three

In ac libero eget nisl accumsan mollis. Quisque ultricies aliquet ante, eget rhoncus dui commodo vitae. Curabitur suscipit ante quis augue rutrum quis volutpat arcu interdum. Ut dapibus sagittis dapibus. Etiam erat eros, pharetra eget mollis eget, laoreet in tortor.
“]

[panel text=”

Three

In ac libero eget nisl accumsan mollis. Quisque ultricies aliquet ante, eget rhoncus dui commodo vitae. Curabitur suscipit ante quis augue rutrum quis volutpat arcu interdum. Ut dapibus sagittis dapibus. Etiam erat eros, pharetra eget mollis eget, laoreet in tortor.
“]

[panel text=”

Three

In ac libero eget nisl accumsan mollis. Quisque ultricies aliquet ante, eget rhoncus dui commodo vitae. Curabitur suscipit ante quis augue rutrum quis volutpat arcu interdum. Ut dapibus sagittis dapibus. Etiam erat eros, pharetra eget mollis eget, laoreet in tortor.
“]

Here is the code

// The first example
[ column columns=4]…[/column][ column columns=8]…[/column]

// The second example
[ column columns=3]…[/column][ column columns=6]…[/column][ column columns=3]…[/column]

// The third example (note the offset attribute)
[ column columns=6 offset=3]…[/column][ column columns=3]…[/column]

All the options

Important: As mentioned before the grid by default has 12 columns and therefore you have to create 12 columns to draw a row of columns. You can use columns and the offset attributes to do this.

  • columns (int) 1-12, creates the grid columns
  • offset (int) 1-12, pushes the column to the right
  • class (string) class="mycolumn", for additional CSS classes

Orbit Shortcode

[orbit include=”2386,2376,2379″]

Mission control is ready, let’s launch Orbit the responsive slider as a simple shortcode. You’ll notice similar attributes we used in the Clearing shortcode before.

Placing [ orbit] in your editor creates a responsive slider from all the images attached to the post/page, here are the options:

  • id takes a post/page ID, defaults to current post/page
  • size size of the images used, defaults to large
  • include list of attachment IDs to include
  • exclude list of attachment IDs to exclude

Advanced: Overwrite Orbit behavior

The Orbit JavaScript comes with some options you might want to use too. We have two filters required_obrit_script_args and required_obrit_script_args_{$id}. The first one is for all cases of the Orbit shortcode and the second one only for the page/post with the attachments

/**
 * Overwrite the defaults of the Orbit shortcode script
 *
 * Accepts all the parameters from http://foundation.zurb.com/old-docs/f3/orbit.php#optCode
 * to customize the options for the orbit shortcode plugin.
 *
 * @param  array $args default args
 * @return array       your args
 */
function required_orbit_script_args( $defaults ) {
	$args = array(
		'animation' 	=> 'fade',
		'advanceSpeed' 	=> 8000,
	);
	return $args = wp_parse_args( $args, $defaults );
}
add_filter( 'req_orbit_script_args', 'required_orbit_script_args' );

Reveal Shortcode

With Reveal you can create simple modal windows on your site. With the [ reveal] shortcode this is also possible for your editors.

[reveal link=”Link text” linkclass=”button nice radius blue medium”]

In ac libero eget nisl accumsan mollis. Quisque ultricies aliquet ante, eget rhoncus dui commodo vitae. Curabitur suscipit ante quis augue rutrum quis volutpat arcu interdum. Ut dapibus sagittis dapibus. Etiam erat eros, pharetra eget mollis eget, laoreet in tortor.

[=reveal link=”Link text” linkclass=”button nice radius dark medium”]

[=/reveal]
[/reveal]

 

Attributes for Reveal

The Reveal shortcode takes the following attributes link, linkclass and class:

  • link the link text
  • linkclass space separated CSS classes
  • class CSS classes on the modal window

By default WordPress doesn’t allow nested shortcodes, but for Reveal to be useful we came up with a handy helper. So the code to create something like modals above would look like this:

[ reveal link="Link text" linkclass="button nice radius blue medium"]
…
[=reveal link="Link text" linkclass="button nice radius dark medium"]
…
[=/reveal]
[/reveal]

Tooltip Shortcode

This is a fairly simple shortcode that creates simple Tooltips and it takes as much letters to write as the corresponding HTML, so only install the plugin if your clients are having a hard time understanding basic code.

[ tooltip position="top" title="What goes in the tip"]Text that has a tip[/tooltip]

Here is a list of all the attributes:

  • position top|bottom|left|right
  • title Text in the tip
  • class Additional CSS classes, example noradius
  • width Size of the tip

Tooltip examples:
Facebook page Twitter page LastFM page