We’ve built a few shortcodes into the theme. Here’s how they’re used.
[ button type="(radius round)" size="(small medium large)" color="(blue green white red)" 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
[ 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 ]…[ /alert ]
The shortcode gives you and your editors and easy way to display the Foundation Alerts with some additional options.
[ 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
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.
[ alert close=no]…[/alert] // no close button
[ alert timeout=10000]…[/alert] // timeout of 10s
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]
:
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.
“]
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.
“]
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 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 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 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 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 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 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.
“]
// 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]
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.
class="mycolumn"
, for additional CSS classes[column columns=12]
[orbit include=”2386,2376,2379″]
[/column]
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:
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' );
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]
The Reveal shortcode takes the following attributes link
, linkclass
and class
:
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]
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:
noradius
Tooltip examples:
[tooltip position=”top” title=”Facebook”]Facebook page[/tooltip] [tooltip position=”top” title=”Twitter”]Twitter page[/tooltip] [tooltip position=”top” title=”LastFM”]LastFM page[/tooltip]