We discontinue development of the required+ Foundation theme – here is why.×

As mentioned on the overview page, shortcodes are not for everyone and we don’t tie them to our theme explicitly. Maybe we even find the time to redesign them to be used without having a theme with Foundation JS & CSS already in place like our required+ Foundation. You’ll find the shortcode plugins on the download page. Let’s have a look on how to use the shortcodes in your child theme.

Alert Box Shortcode

The [alert]…[/alert] 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
This is an alert box with a timeout of 10000ms×
[alert close=no]…[/alert] // no close button
[alert timeout=10000]…[/alert] // timeout of 10s

Clearing Shortcode

Clearing is a new jQuery plugin introduced in Foundation 3.2 that gives you the option to create a beautiful popover gallery from the images in your post or page. The [clearing] shortcode has similar options to the built in [gallery] already available in WordPress.

Basic example

Enjoy some pictures from our time in San Francisco in fall 2012.

This is the shortcode used to show the gallery above:

[clearing size=medium] // basic example with specified thumbnail size

Attributes for clearing

The following attributes can be used with the clearing shortcode:

  • id takes a post/page ID, defaults to current post/page
  • size size of the thumbnail images used, defaults to thumbnail
  • columns gallery columns on the page 1-6, defaults to 3
  • include list of attachment IDs to include
  • exclude list of attachment IDs to exclude

The attributes include and exclude can’t be used at the same time.

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]:

Four columns

The default grid in Foundation has 12 columns.

Eight columns

That’s why we have four + eight here to create the columns desired.




Six with offset three


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

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.

Our developer Silvan Hagen on the Golden Gate bridgeOur designer Karin Christen riding the dunes.

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
 * 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.

A simple modal »

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 radius alert"]
[=reveal link="Link text" linkclass="button radius secondary"]

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

You need help? Something is broken?

Go ahead and read through the Support page to get answers, contact information and the preferred way to report bugs. Have a look at what we did so far in the changelog.

Support & more »

Download the Shortcodes

All the shortcodes explained on this page, are created as plugins for you to download and install. You can try and use any other shortcode plugins, for example you could use the Grid Columns.

Get the plugins »