Shortcodes Foundation 5

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 5 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 – Previous Versions

Foundation 4 Documentation
Foundation 3 Documentation

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 5, there are three screen sizes – small, medium and large. 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]

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 small='' medium='' large='' end='true' ] [/fp-columns]
[/fp-rows]
3
2
4
3
4
4

 

3
2
4
3
4
4
//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-rows]
 
//Example - 2
 
[fp-rows] 
[fp-columns small='3' medium='2' large='4'] 
[/fp-columns] 
[fp-columns small='3' medium='4' large='4' end=true] 
[/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]
 

Centered / Uncentered Rows

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

[fp-rows] [fp-columns small='' medium='' large='' small_centered='true' medium_centered='true' large_centered='true' ] [/fp-columns]
[/fp-rows]
[fp-rows] [fp-columns small='' medium='' large='' small_uncentered='true' medium_uncentered='true' large_uncentered='true' ] [/fp-columns]
[/fp-rows]
small centered | medium uncentered | large centered

 

small centered | medium uncentered
//Example - 1
  
[fp-rows] 
[fp-columns small='6'  small_centered='true' medium_uncentered='true' large_centered='true' ][/fp-columns] 
[/fp-rows]
 
//Example - 2
 

[fp-rows] 
[fp-columns small='8'  small_centered='true' medium_uncentered='true' ][/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

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

[fp-rows] [fp-columns small='' medium='' large='' small_push='' small_pull='' ] [/fp-columns]
[/fp-rows]
[fp-rows] [fp-columns small='' medium='' large='' medium_push='' medium_pull='' ] [/fp-columns]
[/fp-rows]
[fp-rows] [fp-columns small='' medium='' large='' large_push='' large_pull='' ] [/fp-columns]
[/fp-rows]
8 small columns
4 small, last

 

9 medium columns
3 medium, last

 

7 large columns
5 large, last
//Example - 1
 
[fp-rows] 
[fp-columns small='8' small_push='4'] [/fp-columns] 
[fp-columns small='4' small_pull='8'] [/fp-columns] 
[/fp-rows]
 
//Example - 2
 
[fp-rows] 
[fp-columns medium='9' medium_push='3'] [/fp-columns] 
[fp-columns medium='3' medium_pull='9'] [/fp-columns] 
[/fp-rows]
 
//Example - 3
 
[fp-rows] 
[fp-columns large='7' large_push='5'] [/fp-columns] 
[fp-columns large='5' large_pull='7'] [/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]
 
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

XLarge Visibility Classes

[fp-visible show_xlarge='true' ] [/fp-visible]
[fp-visible show_xxlarge='true' ] [/fp-visible]
[fp-visible show_xlarge_only='true' ] [/fp-visible]
[fp-visible hide_xlarge='true' ] [/fp-visible]
[fp-visible hide_xxlarge='true' ] [/fp-visible]
[fp-visible hide_xlarge_only='true' ] [/fp-visible]
Show on xlarge screen size
Show on xxlarge screen size
Show only on xlarge screen size
Hide on xlarge screen size
Hide on xxlarge screen size
Hide only 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

 

 

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

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] [/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][/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='http://' ] [/fp-menu-item] [fp-menu-item title='Menu Item 2' link='http://' ] [/fp-menu-item] [/fp-menu]
[fp-menu-nested] [fp-submenu-item title='Submenu Item 1' link='http://' ] [/fp-submenu-item] [fp-submenu-item title='Submenu Item 2' link='http://' ] [/fp-submenu-item] [/fp-menu-nested]
//Example
  
[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]
  

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

[fp-button size='tiny' | 'small' | 'large' | 'expand' ] [/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='expand'] [/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]

Button Shape

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

[fp-button shape='round' | 'radius' ] [/fp-button]
//Example - Basic Button
  
[fp-button] [/fp-button]
  
//Example - Round Button
 
[fp-button shape='round'] [/fp-button]
 
//Example - Radius Button
 
[fp-button shape='radius'] [/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

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

[fp-callout color='primary' | 'secondary' | 'success' | 'alert' | 'warning' ] [/fp-callout]
Primary Callout×
Secondary Callout×
Success Callout×
Alert Callout×
Warning 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]

Callout Shape

The element can have basic, round or radius shape.

[fp-callout shape='round' | 'radius' ] [/fp-callout]
Basic Callout×
Round Callout×
Radius Callout×
//Example - Basic Callout
 
[fp-callout closable='true'] [/fp-callout]
  
//Example - Round Callout
 
[fp-callout shape='round' closable='true'] [/fp-callout]
 
//Example - Radius Callout
 
[fp-callout shape='radius' 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 - Right Dropdown
 
[fp-dropdown position='right' title=''] [/fp-dropdown]
 
//Example - Left Dropdown
 
[fp-dropdown position='left' hover='true' title=''] [/fp-dropdown]
 
//Example - Bottom Dropdown
 
[fp-dropdown title=''] [/fp-dropdown]
 
//Example - Top Dropdown
 
[fp-dropdown position='top' hover='true' title=''] [/fp-dropdown]
Label

Label Color

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]

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
//Example - Basic Label
  
[fp-label] [/fp-label]
  
//Example - Round Label
 
[fp-label shape='round'] [/fp-label]
 
//Example - Radius Label
 
[fp-label shape='radius'] [/fp-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]
//Example - Basic Progress
  
[fp-progress width='' ] [/fp-progress]
  
//Example - Secondary Progress
 
[fp-progress width='' color='secondary'] [/fp-progress]
 
//Example - Success Progress
 
[fp-progress width='' color='success'] [/fp-progress]
 
//Example - Alert Progress
 
[fp-progress width='' color='alert'] [/fp-progress]

Progress Size

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

[fp-progress width='' size='small' | 'large'] [/fp-progress]
//Example - Small Progress
 
[fp-progress size='small' width=''] [/fp-progress]
 
//Example - Large Progress
 
[fp-progress size='large' width='' ] [/fp-progress]

Progress Shape

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

[fp-progress width='' shape='round' | 'radius'] [/fp-progress]
//Example - Basic Progress
 
[fp-progress width='' ] [/fp-progress]
 
//Example - Round Progress
 
[fp-progress shape='round' width=''] [/fp-progress]
 
//Example - Radius Progress
 
[fp-progress shape='radius' width='' ] [/fp-progress]

Reveal

Reveal Size

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

[fp-reveal size='tiny' | 'small' | 'medium' | 'large' | 'xlarge' | 'full' ] [/fp-reveal]
Place Content Here×
Basic Modal
Place Content Here×
Tiny Modal
Place Content Here×
Small Modal
Place Content Here×
Medium Modal
Place Content Here×
Large Modal
Place Content Here×
XLarge 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 - Medium Reveal
 
[fp-reveal size='medium'] [/fp-reveal]
 
//Example - Large Reveal
 
[fp-reveal size='large'] [/fp-reveal]
 
//Example - XLarge Reveal
 
[fp-reveal size='xlarge'] [/fp-reveal]
 
//Example - Full Reveal
 
[fp-reveal size='full'] [/fp-reveal]
Tooltip

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
//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' title=''] [/fp-tooltip]
  
//Example - Left Tooltip
 
[fp-tooltip position='left' title=''] [/fp-tooltip]

Tooltip Shape

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

[fp-tooltip shape='round' | 'radius' title='Title'] [/fp-tooltip]
Basic Tooltip Round Tooltip Radius Tooltip
//Example - Basic Tooltip
 
[fp-tooltip title=''] [/fp-tooltip]
 
//Example - Round Tooltip
 
[fp-tooltip shape='round' title=''] [/fp-tooltip]
  
//Example - Radius Tooltip
 
[fp-tooltip shape='radius' 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’]