Shortcodes Foundation 6 Flex Grid

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 6 Flex Grid 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 – Previous Versions

Foundation 5 Documentation
Foundation 4 Documentation
Foundation 3 Documentation

Flex Grid

Basic Grid

The Flexbox-powered grid was introduced in F6 and provides several additional features for customizing the grid – advanced sizing, responsive adjustment and column alignment. 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 small='' medium='' large='' ] [/fp-columns]
[/fp-rows]
3
2
4
3
4
4
6
6
4

 

2
1
3
2
4
3
4
3
3
4
4
3

 

7
8
6
5
4
6
//Example - 1
 
[fp-rows] 
[fp-columns small='3' medium='2' large='4'] 
[/fp-columns]  
[fp-columns small='3' medium='4' large='4'] 
[/fp-columns]  
[fp-columns small='6' medium='6' large='4'] 
[/fp-columns] 
[/fp-rows] 
 
//Example - 2
 
[fp-rows] 
[fp-columns small='2' medium='1' large='3'] 
[/fp-columns] 
[fp-columns small='2' medium='4' large='3'] 
[/fp-columns] 
[fp-columns small='4' medium='3' large='3'] 
[/fp-columns] 
[fp-columns small='4' medium='4' large='3'] 
[/fp-columns] 
[/fp-rows]
 
//Example - 3
 
[fp-rows] 
[fp-columns small='7' medium='8' large='6'] 
[/fp-columns] 
[fp-columns small='5' medium='4' large='6'] 
[/fp-columns] 
[/fp-rows]

Advanced Sizing

In the Flex Grid, if we don’t add a size class to the columns, they will simply expand to fill space. However, if we add the class ‘shrink’, the column will take up only the size of its content.

[fp-rows] [fp-columns small='' medium='' large='' shrink='true'] [/fp-columns]
[fp-columns small='' medium='' large=''] [/fp-columns]
[/fp-rows]
4 columns
rest of the 12 columns

 

shrink
second column
//Example - Advanced Sizing
  
[fp-rows] 
[fp-columns small='4' medium='' large=''] [/fp-columns] 
[fp-columns small='' medium='' large=''] [/fp-columns] 
[/fp-rows]
  
//Example - Shrink
  
[fp-rows] 
[fp-columns small='' medium='' large='' shrink='true'] [/fp-columns] 
[fp-columns small='' medium='' large=''] [/fp-columns] 
[/fp-rows]
 

Responsive Adjustment

To make the columns stack we need to indicate that the screen size we are targeting needs to take up 12 columns. To use the [size]-expand feature in a shortcode we need to add to the smaller screen size columns manually a class to take up 12 columns so that they stack. To return to the expanded feature we need to add the ‘medium-expand’ or ‘large-expand’ classes. However, if we use the [size]-unstack class, all columns on lower screen sizes will stack automatically.

[fp-rows] [fp-columns small='12' medium='' large='' medium_expand='true 'large_expand='true'] [/fp-columns]
[fp-columns small='12' medium='' large='' medium_expand='true 'large_expand='true'] [/fp-columns]
[/fp-rows]
[fp-rows medium_unstack='true' large_unstack='true'] [fp-columns small='' medium='' large='' ] [/fp-columns]
[fp-columns small='' medium='' large='' ] [/fp-columns]
[/fp-rows]
1
2
3

 

1
2
3
//Example - 1
  
[fp-rows] 
[fp-columns small='12' medium='' large='' large_expand='true'] [/fp-columns] 
[fp-columns small='12' medium='' large='' large_expand='true'] [/fp-columns] 
[fp-columns small='12' medium='' large='' large_expand='true'] [/fp-columns] 
[/fp-rows]
 
//Example - 2
 

[fp-rows large_unstack='true'] 
[fp-columns small='' medium='' large=''] [/fp-columns] 
[fp-columns small='' medium='' large=''] [/fp-columns] 
[fp-columns small='' medium='' large=''] [/fp-columns] 
[/fp-rows]
 

Horizontal Alignment

To use the option for horizontal alignment in the Flex Grid, we need to add the align-[direction] class. The possible directions are: right, center, justify and spaced. To use the shortcode we add to the wrapping grid tag the option: horizontal_align=’right’ | ‘left’ | ‘center’ | ‘justify’ | ‘spaced.’

[fp-rows horizontal_align='right' | 'left' | 'center' | 'justify' | 'spaced'] [fp-columns small=''] [/fp-columns]
[fp-columns small=''] [/fp-columns]
[/fp-rows]
4 right
4 right

 

4 left
4 left

 

4 center
4 center

 

4 justify
4 justify

 

4 spaced
4 spaced
//Example - Right Horizontal Alignment
  
[fp-rows horizontal_align='right'] 
[fp-columns small='4'] [/fp-columns] 
[fp-columns small='4'] [/fp-columns] 
[/fp-rows]
  
//Example - Left Horizontal Alignment
 

[fp-rows horizontal_align='left'] 
[fp-columns small='4'] [/fp-columns] 
[fp-columns small='4'] [/fp-columns] 
[/fp-rows]

  
//Example - Center Horizontal Alignment
 

[fp-rows horizontal_align='center'] 
[fp-columns small='4'] [/fp-columns] 
[fp-columns small='4'] [/fp-columns] 
[/fp-rows]

  
//Example - Justify Horizontal Alignment
 

[fp-rows horizontal_align='justify'] 
[fp-columns small='4'] [/fp-columns] 
[fp-columns small='4'] [/fp-columns] 
[/fp-rows]

  
//Example - Spaced Horizontal Alignment
 

[fp-rows horizontal_align='spaced'] 
[fp-columns small='4'] [/fp-columns] 
[fp-columns small='4'] [/fp-columns] 
[/fp-rows]

 

Vertical Alignment

To use the option for vertical alignment in the Flex Grid, we need to add the align-self-[direction] class. The possible directions are: bottom, middle, top and stretch.

[fp-rows] [fp-columns small='' vertical_align='bottom' | 'middle' | 'top' | 'stretch'] [/fp-columns]
[fp-columns small='' vertical_align='bottom' | 'middle' | 'top' | 'stretch'] [/fp-columns]
[/fp-rows]
Top
Middle
Bottom

Stretch

//Example - Right Horizontal Alignment
  
[fp-rows]  
[fp-columns small='' medium='' large='' vertical_align='top'] [/fp-columns]  
[fp-columns small='' medium='' large='' vertical_align='middle'] [/fp-columns]  
[fp-columns small='' medium='' large='' vertical_align='bottom'] [/fp-columns]  
[fp-columns small='' medium='' large='' vertical_align='stretch'] [/fp-columns]  
[/fp-rows]
 

Collapse / Uncollapse Rows

The option allows the gutters for the columns to be removed or restored depending on the screen size.

[fp-rows small_collapse='true' medium_collapse='true' large_collapse='true' ] [fp-columns small='' medium='' large=''] [/fp-columns]
[/fp-rows]
[fp-rows small_uncollapse='true' medium_uncollapse='true' large_uncollapse='true' ] [fp-columns small='' medium='' large=''] [/fp-columns]
[/fp-rows]
medium collapse | large uncollapse
medium collapse | large uncollapse

 

small colllapse | medium uncollapse | large collapse
small colllapse | medium uncollapse | large collapse
//Example - 1
  
[fp-rows medium_collapse='true' large_uncollapse='true'] 
[fp-columns small='6'][/fp-columns] 
[fp-columns small='6'][/fp-columns] 
[/fp-rows]
 
//Example - 2
 
[fp-rows small_collapse='true' medium_uncollapse='true' large_collapse='true'] 
[fp-columns small='6'][/fp-columns] 
[fp-columns small='6'][/fp-columns] 
[/fp-rows]
 

General Collapse

The option removes the gutters for all screen sizes.

[fp-rows collapse='true' ]  
[fp-columns small='' medium='' large=''] [/fp-columns]
[/fp-rows]
collapse
collapse
//Example - 1
  
[fp-rows collapse='true'] 
[fp-columns small='6'][/fp-columns] 
[fp-columns small='6'][/fp-columns] 
[/fp-rows]
 

Offsets

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

[fp-rows]  
[fp-columns small='' medium='' large='' small_offset='' medium_offset='' large_offset='' ] [/fp-columns]
[/fp-rows]
2
9, offset 1

 

4
6, offset 2

 

6, offset 3
//Example - 1
 
[fp-rows class=demo] 
[fp-columns large='2'] [/fp-columns] 
[fp-columns large='9' large_offset='1'] [/fp-columns] 
[/fp-rows]
 
//Example - 2
 
[fp-rows class=demo] 
[fp-columns large='4'] [/fp-columns] 
[fp-columns large='6' large_offset='2'] [/fp-columns] 
[/fp-rows]
 
//Example - 3
 
[fp-rows] 
[fp-columns medium='6' medium_offset='3'] [/fp-columns] 
[/fp-rows]

Source Ordering

Source ordering changes the order in which the columns appear regardless of the order of the markup. Unlike previous versions, in the Flex Grid, the source ordering adds an actual order number to the column in which to appear. In previous versions we specify how far to push/pull columns in a row depending on the screen size.

[fp-rows] [fp-columns small_order='' medium_order='' large_order=''] [/fp-columns]
[fp-columns small_order='' medium_order='' large_order=''] [/fp-columns]
[/fp-rows]
8 small
4 small, last

 

9 medium
3 medium, last

 

7 large
5 large, last
//Example - 1
 
[fp-rows] 
[fp-columns small='8' small_order='2'] [/fp-columns] 
[fp-columns small='4' small_order='1'] [/fp-columns] 
[/fp-rows]
 
//Example - 2
 
[fp-rows] 
[fp-columns medium='9' medium_order='2'] [/fp-columns] 
[fp-columns medium='3' medium_order='1'] [/fp-columns] 
[/fp-rows]
 
//Example - 3
 
[fp-rows] 
[fp-columns large='7' large_order='2'] [/fp-columns] 
[fp-columns large='5' large_order='1'] [/fp-columns] 
[/fp-rows]

Block Grids

The option divides the columns evenly in a row.

[fp-rows small_up='' medium_up='' large_up='' ]  
[fp-columns small='' medium='' large=''] [/fp-columns]
[/fp-rows]
large 3 | medium 2 | small 1
large 3 | medium 2 | small 1
large 3 | medium 2 | small 1
//Example - 1
  
[fp-rows small_up='1' medium_up='2' large_up='3'] 
[fp-columns] [/fp-columns] 
[fp-columns] [/fp-columns] 
[fp-columns] [/fp-columns] 
[/fp-rows]
 

Equalizer

The option gives columns the same height.

[fp-rows]  
[fp-columns small='' medium='' large='' equalizer='true' ] [/fp-columns]
[/fp-rows]
[fp-rows]  
[fp-columns small='' medium='' large='' row_equalizer='true' ] [/fp-columns]
[/fp-rows]
The content for this column takes up three rows.
small 6 columns

 

4 small columns
4 small columns
The content for this column takes up two rows.
//Example - 1
  
[fp-rows equalizer='true'] 
[fp-columns small='6'] [/fp-columns] 
[fp-columns small='6'] [/fp-columns] 
[/fp-rows]
 
//Example - 2
 
[fp-rows row_equalizer='true'] 
[fp-columns small='4'][/fp-columns] 
[fp-columns small='4'][/fp-columns] 
[fp-columns small='4'][/fp-columns] 
[/fp-rows]
 

Expanded Row

The option removes the max width for the rows.

[fp-rows expanded='true' ]  
[fp-columns small='' medium='' large=''] [/fp-columns]
[/fp-rows]
12 small columns
//Example - 1
  
[fp-rows expanded='true'] 
[fp-columns small='12'] [/fp-columns] 
[/fp-rows]
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='true' ] [/fp-visible]
[fp-visible show_medium_only='true' ] [/fp-visible]
[fp-visible hide_medium='true' ] [/fp-visible]
[fp-visible hide_medium_only='true' ] [/fp-visible]
Show on medium screen size
Show only on medium screen size
Hide on medium screen size
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

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

 

Float Center

This option works only if the item has an absolute width.

[fp-float float='center'] [/fp-float]
Center Float Box
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-tabs]  
[fp-tab open='true' title='Title 1'] Tab Content 1 [/fp-tab]
[fp-tab title='Title 2'] Tab Content 2 [/fp-tab]
[/fp-tabs]
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]
[/fp-tabs]
Tab Content 1
Tab Content 2
Tab Content 3
Accordion

The default accordion shortcode is basic, to switch to multi-expand or all closed, add the multiexpand=’true’ or allclosed=’true’ option to the outer accordion tag [fp-accordion-wrap multiexpand='true'][/fp-accordion-wrap]. Insert the open=’true’ setting to the accordion tab you want to be active.

Basic Accordion

[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]
[/fp-accordion-wrap]

Multi-expand Accordion

[fp-accordion-wrap multiexpand='true']  
[fp-accordion open='true' title='Title 1'] Tab Content 1 [/fp-accordion]
[fp-accordion title=’>Title 2′] Tab Content 2 [/fp-accordion]
[/fp-accordion-wrap]

All Closed Accordion

[fp-accordion-wrap allclosed='true'] 
[fp-accordion open='true' title='Title 1'] Tab Content 1 [/fp-accordion]
[fp-accordion title='Title 2'] Tab Content 2 [/fp-accordion]
[/fp-accordion-wrap]
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-orbits label=''] 
[fp-orbit title='Title 1'] Tab Content 1 [/fp-orbit]
[fp-orbit title='Title 2'] Tab Content 2 [/fp-orbit]
[/fp-orbits]
  • image-one
  • image-two
  • image-three
  • image-four
  • image-five
  • image-six
//Example - 1

[fp-orbits label=''] 
[fp-orbit title='Title 1']Tab Content 1[/fp-orbit] 
[fp-orbit title='Title 2']Tab Content 2[/fp-orbit] 
[fp-orbit title='Title 3']Tab Content 3[/fp-orbit] 
[/fp-orbits]

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]
[/fp-carousel]
//Example - 1

[fp-carousel columns='three'] 
[fp-carousel-item title='Title 1']Tab Content 1[/fp-carousel-item] 
[fp-carousel-item title='Title 2']Tab Content 2[/fp-carousel-item] 
[fp-carousel-item title='Title 3']Tab Content 3[/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 type='vertical' | 'accordion' | 'dropdown' | 'drilldown'][/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 type='vertical' | 'accordion' | 'dropdown' | 'drilldown'] 
[fp-menu-item title='Menu Item 1' link='#' ] [/fp-menu-item]  
[fp-menu-item title='Menu Item 2' link='#' ] [/fp-menu-item]  
[/fp-menu]
[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]  
[/fp-menu-nested]
//Example - Vertical Menu
  
[fp-menu type='vertical'] 
[fp-menu-item title='Menu Item 1' link='#'] 
[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] 
[/fp-menu-nested] 
[/fp-menu-item] 
[fp-menu-item title='Menu Item 2' link='#'] 
[/fp-menu-item] 
[fp-menu-item title='Menu Item 3' link='#'] 
[/fp-menu-item] 
[/fp-menu]
  
 //Example - Accordion Menu
  
[fp-menu type='accordion'] 
[fp-menu-item title='Menu Item 1' link='#'] 
[/fp-menu-item] 
[fp-menu-item title='Menu Item 2' link='#'] 
[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] 
[/fp-menu-nested] 
[/fp-menu-item] 
[fp-menu-item title='Menu Item 3' link='#' ] 
[/fp-menu-item] 
[/fp-menu]
  
 //Example - Dropdown Menu
  
[fp-menu type='dropdown'] 
[fp-menu-item title='Menu Item 1' link='#'] 
[/fp-menu-item] 
[fp-menu-item title='Menu Item 2' link='#'] 
[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] 
[/fp-menu-nested] 
[/fp-menu-item] 
[fp-menu-item title='Menu Item 3' link='#' ] 
[/fp-menu-item] 
[/fp-menu]
  
//Example - Drilldown Menu
  
[fp-menu type='drilldown'] 
[fp-menu-item title='Menu Item 1' link='#'] 
[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] 
[/fp-menu-nested] 
[/fp-menu-item] 
[fp-menu-item title='Menu Item 2' link='#'] 
[/fp-menu-item] 
[fp-menu-item title='Menu Item 3' link='#'] 
[/fp-menu-item] 
[/fp-menu]

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.

[fp-button type='link' | 'submit' | 'reset' ] [/fp-button]
Link Button
//Example - Basic Button
 
[fp-button] [/fp-button] 
 
//Example - Link Button
 
[fp-button type='link' link='' tab='true'] [/fp-button]
 
//Example - Submit Button
 
[fp-button type='submit'] [/fp-button]
 
//Example - Reset Button
 
[fp-button type='reset'] [/fp-button]

Button Size

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

[fp-button size='tiny' | 'small' | 'large' | 'expanded' ] [/fp-button]
//Example - Basic Button
  
[fp-button] [/fp-button]
  
//Example - Tiny Button
 
[fp-button size='tiny'] [/fp-button]
 
//Example - Small Button
 
[fp-button size='small'] [/fp-button]
 
//Example - Large Button
 
[fp-button size='large'] [/fp-button]
 
//Example - Expanded Button
 
[fp-button size='expanded'] [/fp-button]
 

Button Color

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

[fp-button color='secondary' | 'success' | 'alert' | 'warning' | 'disabled' ] [/fp-button]
//Example - Basic Button
  
[fp-button] [/fp-button]
  
//Example - Secondary Button
 
[fp-button color='secondary'] [/fp-button]
 
//Example - Success Button
 
[fp-button color='success'] [/fp-button]
 
//Example - Alert Button
 
[fp-button color='alert'] [/fp-button]
 
//Example - Warning Button
 
[fp-button color='warning'] [/fp-button]
 
//Example - Disabled Button
 
[fp-button color='disabled'] [/fp-button]

Hollow Button

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

[fp-button hollow='true' ] [/fp-button]
//Example - Basic Hollow Button
  
[fp-button hollow='true' ] [/fp-button]
  
//Example - Secondary Hollow Button
 
[fp-button hollow='true' color='secondary'] [/fp-button]
 
//Example - Success Hollow Button
 
[fp-button hollow='true' color='success'] [/fp-button]
 
//Example - Alert Hollow Button
 
[fp-button hollow='true' color='alert'] [/fp-button]
 
//Example - Warning Hollow Button
 
[fp-button hollow='true' color='warning'] [/fp-button]
 
//Example - Disabled Hollow Button
 
[fp-button hollow='true' color='disabled'] [/fp-button]

Dropdown Button

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

[fp-button dropdown='true' ] [/fp-button]
//Example - Basic Dropdown Button
  
[fp-button dropdown='true' ] [/fp-button]
  
//Example - Secondary Dropdown Button
 
[fp-button dropdown='true' color='secondary'] [/fp-button]
 
//Example - Success Dropdown Button
 
[fp-button dropdown='true' color='success'] [/fp-button]
 
//Example - Alert Dropdown Button
 
[fp-button dropdown='true' color='alert'] [/fp-button]
 
//Example - Warning Dropdown Button
 
[fp-button dropdown='true' color='warning'] [/fp-button]
 
//Example - Disabled Dropdown Button
 
[fp-button dropdown='true' color='disabled'] [/fp-button]
Callout

The Callout element combines the Alerts and Panels from the previous versions.

Callout Size

The callout has three size options – basic if left blank, small and large.

[fp-callout size='small' | 'large' ] [/fp-callout]
Large Callout
Basic Callout
Small Callout
//Example - Basic Callout
  
[fp-callout] [/fp-callout]
  
//Example - Small Callout
 
[fp-callout size='small'] [/fp-callout]
 
//Example - Large Callout
 
[fp-callout size='large'] [/fp-callout]
 

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, alert and warning.

[fp-callout color='primary' | 'secondary' | 'success' | 'alert' | 'warning' ] [/fp-callout]
Basic Callout
Primary Callout
Secondary Callout
Success Callout
Alert Callout
Warning Callout
//Example - Basic Callout
  
[fp-callout closable='true'] [/fp-callout]
  
//Example - Primary Callout
 
[fp-callout color='primary' closable='true'] [/fp-callout]
  
//Example - Secondary Callout
 
[fp-callout color='secondary' closable='true'] [/fp-callout]
 
//Example - Success Callout
 
[fp-callout color='success' closable='true'] [/fp-callout]
 
//Example - Alert Callout
 
[fp-callout color='alert' closable='true'] [/fp-callout]
 
//Example - Warning Callout
 
[fp-callout color='warning' closable='true'] [/fp-callout]
Dropdown

The dropdown has three positions available – bottom, top and right. By default it opens when clicked, to open it on hover add hover=’true’

[fp-dropdown hover='true' position='bottom' | 'top' | 'right' title='Title'] [/fp-dropdown]
//Example - Top Dropdown
 
[fp-dropdown position='top' title=''] [/fp-dropdown]
 
//Example - Bottom Dropdown
 
[fp-dropdown position='bottom' title=''] [/fp-dropdown]
  
//Example - Right Dropdown
 
[fp-dropdown position='right' hover='true' title=''] [/fp-dropdown]
Label

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

[fp-label color='primary' | 'secondary' | 'success' | 'alert' | 'warning' ] [/fp-label]
Primary Label Secondary Label Success Label Alert Label Warning Label
//Example - Primary Label
  
[fp-label] [/fp-label]
  
//Example - Secondary Label
 
[fp-label color='secondary'] [/fp-label]
 
//Example - Success Label
 
[fp-label color='success'] [/fp-label]
 
//Example - Alert Label
 
[fp-label color='alert'] [/fp-label]
 
//Example - Warning Label
 
[fp-label color='warning'] [/fp-label]
Progress Bar>

The progress bar has five available colors – primary if left blank, secondary, success, alert and warning. The width=” option is the percentage number to be color filled.The text=” option adds a text value for the filled part of the progress bar. The min=”, max=”, current=” options are aria values.

[fp-progress current='' min='' max='' width='' text='' color='primary' | 'secondary' | 'success' | 'alert' | 'warning' ] [/fp-progress]

10

25

50

57

100

//Example - Basic Progress
  
[fp-progress current='' min='' max='' width='' text='' ] [/fp-progress]
  
//Example - Secondary Progress
 
[fp-progress current='' min='' max='' width='' text=''  color='secondary'] [/fp-progress]
 
//Example - Success Progress
 
[fp-progress current='' min='' max='' width='' text=''  color='success'] [/fp-progress]
 
//Example - Alert Progress
 
[fp-progress current='' min='' max='' width='' text=''  color='alert'] [/fp-progress]
 
//Example - Warning Progress
 
[fp-progress current='' min='' max='' width='' text=''  color='warning'] [/fp-progress]
Reveal

Reveal Size

The reveal modal has five available sizes – basic if left blank, tiny, small, large and full.

[fp-reveal size='tiny' | 'small' | 'large' | 'full' ] [/fp-reveal]
Place Content Here
Basic Modal
Place Content Here
Tiny Modal
Place Content Here
Small Modal
Place Content Here
Large Modal
Place Content Here
Full Modal
//Example - Basic Reveal
  
[fp-reveal] [/fp-reveal]
  
//Example - Tiny Reveal
 
[fp-reveal size='tiny'] [/fp-reveal]
 
//Example - Small Reveal
 
[fp-reveal size='small'] [/fp-reveal]
 
//Example - Large Reveal
 
[fp-reveal size='large'] [/fp-reveal]
 
//Example - Full Reveal
 
[fp-reveal size='full'] [/fp-reveal]

No Overlay Reveal

To remove the overlay, add overlay=’false’.

[fp-reveal title='' overlay='false' ] [/fp-reveal]
Place Content Here
No Overlay Reveal
//Example - No Overlay Reveal
  
[fp-reveal overlay='false' title=''] [/fp-reveal]
Tooltip

The tooltip has four positions available – bottom by default, top, left and right. By default it opens when clicked, to open it on hover add hover=’true’

[fp-tooltip hover='true' position='bottom' | 'top' | 'right' | 'left' title='Title'] [/fp-tooltip]
Top Tooltip Bottom Tooltip Right Hover Tooltip Left Hover Tooltip
//Example - Top Tooltip
 
[fp-tooltip position='top' title=''] [/fp-tooltip]
 
//Example - Bottom Tooltip
 
[fp-tooltip position='bottom' title=''] [/fp-tooltip]
  
//Example - Right Tooltip
 
[fp-tooltip position='right' hover='true' title=''] [/fp-tooltip]
  
//Example - Left Tooltip
 
[fp-tooltip position='left' hover='true' title=''] [/fp-tooltip]
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.

[fp-interchange small='' medium='' large=''] [/fp-interchange]
//Example - Interchange
 
[fp-interchange small='' medium='' large=''] [/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]

Widescreen

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

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

Vimeo

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

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

//Example - Flex Video
 
[fp-video link=''] [/fp-video]

Query

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

[fp-posts]

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.

<&lt;
>&gt;
=&#61;
!&#33;

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

display_title=’false’
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:

[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’]