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 QueryDocumentation – Foundation 6
Documentation – Foundation 6 Flex Grid
Foundation 6 Flex Grid Documentation
Documentation – Foundation 5
Documentation – Foundation 4
Grid
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]
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]
General Collapse
The option removes the gutters for all screen sizes.
[/fp-rows]
Centered / Uncentered Rows
For this option to work, there can be only one column in a row.
[/fp-rows]
Offsets
The offset option moves the position of the columns to the right.
[/fp-rows]
Source Ordering
The option allows the order of the columns to be changed depending on the screen size.
[/fp-rows]
Block Grids
The option divides the columns evenly in a row. The small_up=” option is for mobile screens.
[/fp-rows]
- 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
Medium Visibility Classes
Large Visibility Classes
XLarge Visibility Classes
Direction Visibility Classes
Float Classes
Float Left / Right
Tabs
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-tab title='Title 2'] Tab Content 2 [/fp-tab]
[/fp-tabs]
Vertical Tabs
[fp-tab title='Title 2'] Tab Content 2 [/fp-tab]
[/fp-tabs]
Accordion
Insert the open=’true’ setting to the accordion tab you want to be active.
[fp-accordion title='Title 2']Tab Content 2[/fp-accordion]
[/fp-accordion-wrap]
Title 1
Tab Content 1Title 2
Tab Content 2Title 3
Tab Content 3
Orbit
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-orbit title='Title 2']Tab Content 2[/fp-orbit]
[/fp-orbits]
OwlCarousel
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-item title='Title 2']Tab Content 2[/fp-carousel-item]
[/fp-carousel]






Menus
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].
Menu
[fp-menu-item title='Menu Item 2' link='#' ] [/fp-menu-item]
[/fp-menu]
[fp-submenu-item title='Submenu Item 2' link='#' ] [/fp-submenu-item]
[/fp-menu-nested]
Buttons
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.
Button Size
The buttons have five size options – basic if left blank, tiny, small, medium and large.
Button Color
The buttons have five available colors – primary if left blank, secondary, success and alert.
Button Shape
A button can have a basic, round or radius shape.
Dropdown Button
To make the button dropdown, we add the option dropdown=’true’
Callout
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’
Callout Color
The callouts have five available colors – no color if left blank, primary, secondary, success and alert.
Dropdown
Label
Label Color
The label has five available colors – primary if left blank, secondary, success and alert.
Label Shape
The label has three available shapes – basic, round and radius.
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.
Progress Size
There are two available sizes size=’small’ | ‘large’
Progress Shape
There are three available shapes – basic by default and shape=’round’ | ‘radius’
Reveal
Reveal Size
The reveal modal has five available sizes – basic if left blank, small, medium, large, xlarge and expand.
Tooltip
Tooltip Position
The tooltip has four positions available – bottom by default, top, left and right.
Interchange
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.


Flex Video
The option wraps the embedded video in a responsive container. The link needs to be for embedding the video.
Widescreen
To change the ratio from 4:3 to 16:9 add widescreen=’true.’.
Vimeo
Vimeo videos need to have the option vimeo=’true’ added.
Query
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:
display_date=’false’
display_cat=’false’
display_tags=’false’
display_author=’false’
display_excerpt=’false’
display_thumb=’false’
display_comments=’false’
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:
To display the last 5 pages:
To display posts between March 2016 and June 2016:
To display posts that are in category ‘poetry’ and have a post format ‘quote’: