Shortcodes Foundation 3

Return to the main shortcode page
The original code for Foundation can be used within the editor. For convenience, the plugin provides basic shortcodes for easier use. The main shortcode tags work for all versions, however, additional features will work depending on what version you have chosen. All main shortcode tags have the option: class=’add-custom-class’.

Foundation 3 Demo

Grid Visibility Classes Float Classes Tabs Accordion Orbit Carousel Menus Buttons Callout Dropdown Label Progress Bar Reveal Tooltip Interchange Flex Video Query

Documentation – Foundation 6

Foundation 6 Documentation

Documentation – Foundation 6 Flex Grid

Foundation 6 Flex Grid Documentation

Documentation – Foundation 5

Foundation 5 Documentation

Documentation – Foundation 4

Foundation 4 Documentation


Basic Grid

The main grid has two main elements – rows and columns. Every row can contain maximum 12 columns. The grid itself can be nested if the original code is used. If a shortcode is used, however, it won’t work because in WordPress shortcodes with the same tags can’t be nested. In Foundation 3, there is only one class for all screen sizes, unlike later versions that have different size classes for small, medium and large screen sizes. If you want to add an image to the background, add the image link to the row shortcode – [fp-rows image=""][/fp-rows].

[fp-rows] [fp-columns >column=” ] [/fp-columns]





Incomplete Row

Foundation floats the last column to the right. When the columns in a row are less than 12, we can override it by putting the class ‘end’ to the last column.

[fp-rows] [fp-columns column='' end='true' ] [/fp-columns]




General Collapse

The option removes the gutters for all screen sizes.

[fp-rows collapse='true' ] [fp-columns column=''] [/fp-columns]

Centered / Uncentered Rows

For this option to work, there can be only one column in a row.

[fp-rows] [fp-columns column='' centered='true'] [/fp-columns]
6, centered


The offset option moves the position of the columns to the right.

[fp-rows] [fp-columns column='' offset='' ] [/fp-columns]
9, 0ffset 1


6, offset 2


6, offset 3

Source Ordering

The option allows the order of the columns to be changed depending on the screen size.

[fp-rows] [fp-columns column='' push='' pull='' ] [/fp-columns]


3, last


5, last

Block Grids

The option divides the columns evenly in a row. The small_up=” option is for mobile screens.

[fp-rows up='' small_up='' ] [fp-columns column=''] [/fp-columns]
  • 1
  • 2
  • 3
Visibility Classes

To be able to see the different versions of the examples below you need to resize the window of your browser.

Small Visibility Classes

[fp-visible show_small_only='true' ] [/fp-visible]
[fp-visible hide_small_only='true' ] [/fp-visible]
Show only on small screen size
Hide only on small screen size

Medium Visibility Classes

[fp-visible show_medium_down='true' ] [/fp-visible]
[fp-visible show_medium_only='true' ] [/fp-visible]
[fp-visible hide_medium_down='true' ] [/fp-visible]
[fp-visible hide_medium_only='true' ] [/fp-visible]
Show on medium screen size and below
Show only on medium screen size
Hide on medium screen size and below
Hide only on medium screen size

Large Visibility Classes

[fp-visible show_large='true' ] [/fp-visible]
[fp-visible show_large_only='true' ] [/fp-visible]
[fp-visible hide_large='true' ] [/fp-visible]
[fp-visible hide_large_only='true' ] [/fp-visible]
Show on large screen size
Show only on large screen size
Hide on large screen size
Hide only on large screen size

XLarge Visibility Classes

[fp-visible show_xlarge='true' ] [/fp-visible]
[fp-visible hide_xlarge='true' ] [/fp-visible]
Show on xlarge screen size
Hide on xlarge screen size

Direction Visibility Classes

[fp-visible show_portrait='true' ] [/fp-visible]
[fp-visible show_landscape='true' ] [/fp-visible]
Show on portrait screen
Show on landscape screen
Float Classes

Float Left / Right

[fp-float float='left'] [/fp-float]
[fp-float float='right'] [/fp-float]
Left Float Box
Right Float Box




The default shortcode tabs are horizontal, to switch to vertical, add the vertical=’true’ option to the outer tab tag [fp-tabs vertical='true'][/fp-tabs]. Insert the open=’true’ setting to the tab you want to be active.

Horizontal Tabs

[fp-tabs] [fp-tab open='true' title='Title 1'] Tab Content 1 [/fp-tab]
[fp-tab title='Title 2'] Tab Content 2 [/fp-tab]
  • Tab Content 1
  • Tab Content 2
  • Tab Content 3

Vertical Tabs

[fp-tabs vertical='true'] [fp-tab open='true' title='Title 1'] Tab Content 1 [/fp-tab]
[fp-tab title='Title 2'] Tab Content 2 [/fp-tab]
  • Tab Content 1
  • Tab Content 2
  • Tab Content 3

Insert the open=’true’ setting to the accordion tab you want to be active.

[fp-accordion-wrap] [fp-accordion open='true' title='Title 1']Tab Content 1[/fp-accordion]
[fp-accordion title='Title 2']Tab Content 2[/fp-accordion]
  • Title 1
    Tab Content 1
  • Title 2
    Tab Content 2
  • Title 3
    Tab Content 3

The orbit shortcode contains the slider tags [fp-orbit][/fp-orbit] within a wrapping tag [fp-orbits][/fp-orbits]. You can specify a label for each instance of the slider and a title for each of the slides.

[fp-orbits label=''] [fp-orbit title='Title 1']Tab Content 1[/fp-orbit]
[fp-orbit title='Title 2']Tab Content 2[/fp-orbit]
  • image-one
  • image-two
  • image-three
  • image-four
  • image-five
  • image-six

OwlCarousel is not part of Foundation and is included in the plugin as an alternative to the built-in Orbit slider. It allows for multiple columns in a carousel. The default number of columns for the shortcode is three. If you want to change it you can modify the columns option up to six columns. The shortcode contains the slider tags [fp-carousel-item][/fp-carousel-item] within a wrapping tag [fp-carousel columns='one' | 'two' | 'three' | 'four' | 'five' | 'six'][/fp-carousel]. You can specify a title for each of the slides.

[fp-carousel columns='one' | 'two' | 'three' | 'four' | 'five' | 'six'] [fp-carousel-item title='Title 1']Tab Content 1[/fp-carousel-item]
[fp-carousel-item title='Title 2']Tab Content 2[/fp-carousel-item]

WordPress shortcodes with the same tags can’t be nested, that’s why there are two shortcodes for the menu option. The first-level menu shortcode contains the tags [fp-menu-item title='' link=''][/fp-menu-item] within a wrapping tag [fp-menu][/fp-menu]. The second-level menu shortcode contains the tags [fp-submenu-item title='' link=''][/fp-submenu-item] within a wrapping tag [fp-menu-nested][/fp-menu-nested].


[fp-menu] [fp-menu-item title='Menu Item 1' link='#' ] [/fp-menu-item]
[fp-menu-item title='Menu Item 2' link='#' ] [/fp-menu-item]
[fp-menu-nested] [fp-submenu-item title='Submenu Item 1' link='#' ] [/fp-submenu-item]
[fp-submenu-item title='Submenu Item 2' link='#' ] [/fp-submenu-item]

Button Type

Choose a type for the button – basic if the option is left blank, link, submit or reset. You can add the option tab=”true”, if you have chosen a link type button and this will open it in a new tab.

[fp-button type='link' | 'submit' | 'reset' ] [/fp-button]
Link Button

Button Size

The buttons have five size options – basic if left blank, tiny, small, medium and large.

[fp-button size='tiny' | 'small' | 'medium' | 'large' | ] [/fp-button]

Button Color

The buttons have five available colors – primary if left blank, secondary, success and alert.

[fp-button color='secondary' | 'success' | 'alert' ] [/fp-button]

Button Shape

A button can have a basic, round or radius shape.

[fp-button shape='round' | 'radius' ] [/fp-button]

Dropdown Button

To make the button dropdown, we add the option dropdown=’true’

[fp-button dropdown='true' ] [/fp-button]

In Foundation 3 to 5, the callout shortcode is for the Alert elements. In Foundation 6, Alerts and Panels are combined into the Callout element.

Closable Callout

To make the callout closable, we add the option closable=’true’

[fp-callout closable='true' ] [/fp-callout]

Callout Color

The callouts have five available colors – no color if left blank, primary, secondary, success and alert.

[fp-callout color='primary' | 'secondary' | 'success' | 'alert' ] [/fp-callout]
Primary Callout×
Secondary Callout×
Success Callout×
Alert Callout×
[fp-dropdown title='Title'] [/fp-dropdown]



Label Color

The label has five available colors – primary if left blank, secondary, success and alert.

[fp-label color='primary' | 'secondary' | 'success' | 'alert' ] [/fp-label]
Primary Label Secondary Label Success Label Alert Label

Label Shape

The label has three available shapes – basic, round and radius.

[fp-label shape='round' | 'radius' | 'warning' ] [/fp-label]
Basic Label Round Label Radius Label
Progress Bar

Progress Color

The progress bar has four available colors – primary if left blank, secondary, success and alert. The width=” option is the percentage number to be color filled.

[fp-progress width='' color='primary' | 'secondary' | 'success' | 'alert'] [/fp-progress]

Progress Size

There are two available sizes size=’small’ | ‘large’

[fp-progress width='' size='small' | 'large'] [/fp-progress]

Progress Shape

There are three available shapes – basic by default and shape=’round’ | ‘radius’

[fp-progress width='' shape='round' | 'radius'] [/fp-progress]

Reveal Size

The reveal modal has five available sizes – basic if left blank, small, medium, large, xlarge and expand.

[fp-reveal size='small' | 'medium' | 'large' | 'xlarge' | 'expand' ] [/fp-reveal]
Place Content Here×
Basic Modal
Place Content Here×
Small Modal
Place Content Here×
Medium Modal
Place Content Here×
Large Modal
Place Content Here×
XLarge Modal
Place Content Here×
Expand Modal

Tooltip Position

The tooltip has four positions available – bottom by default, top, left and right.

[fp-tooltip position='bottom' | 'top' | 'right' | 'left' title='Title'] [/fp-tooltip]
Top Tooltip Bottom Tooltip Right Tooltip Left Tooltip

The interchange uses media queries to show images depending on the screen size. Place the links to the images in the screen sizes you want them to show for.

[fp-interchange column=''] [/fp-interchange]
Flex Video

The option wraps the embedded video in a responsive container. The link needs to be for embedding the video.

[fp-video link=''] [/fp-video]


To change the ratio from 4:3 to 16:9 add widescreen=’true.’.

[fp-video link='' widescreen='true' ] [/fp-video]


Vimeo videos need to have the option vimeo=’true’ added.

[fp-video link='' vimeo='true' ] [/fp-video]

The query shortcode accepts all the parameters of the wp_query class, using the same parameter names.


For example, if we want to ignore the sticky posts in a query, we add ignore_sticky_posts=’true’, if we want to query pages, we add post_type=’page’. The tax_query, date_query and meta_query options follow a similar pattern, except we have to add the sub parameters for the query to its name – tax_query_field, tax_query_terms, date_query_day, meta_query_key etc. The shortcode accepts one relation case for these queries. To assign values to the related parameters use the following pattern – for tax_query_terms the relation array value will be tax_query_relation_terms, for date_query_day it will be date_query_realtion_day etc. The default tax_query_relation, date_query_relation and meta_query_relation value is AND. The compare parameter needs to have the signs ’<, >, <=, =>, !=, = ’ written as html character entities.


By default all elements are shown. We can choose what elements to display by disabling them:


We can also choose whether the posts to be displayed in a grid, or a carousel. The default option is the grid. Similar to the fp_grid shortcode, it accepts medium=” and large=” parameters for the grid. If we want to choose to display the query results in a carousel we add style=’carousel’. We can specify the number of columns for the carousel by adding columns=’one’. The accepted values are – one, two, three, four, five, six, fp-blog-column ( for centered columns). The default value is three. The parameters ‘order’ and ‘orderby’, accept only one parameter, not an array. Below are some examples.

To display the last 5 posts in carousel slider, ignoring the sticky posts:

[fp-posts style='carousel' columns='one' ignore_sticky_posts=’true’]

To display the last 5 pages:

[fp-posts post_type=’page’]

To display posts between March 2016 and June 2016:

[fp-posts date_query_after=’March 1, 2016’ date_query_before=’June 30, 2016’]

To display posts that are in category ‘poetry’ and have a post format ‘quote’:

[fp-posts tax_query_taxonomy=’cateogry’ tax_query_field=’slug’ tax_query_terms=’poetry’ tax_query_relation_taxonomy=’post_format’ tax_query_relation _field=’slug’ tax_query_relation _terms=’ post-format-quote’]