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

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

Example

 

 

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.

Example

 

 

General Collapse

The option removes the gutters for all screen sizes.

Example

Centered / Uncentered Rows

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

Example

Offsets

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

Example

 

 

Source Ordering

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

Example

 

 

Block Grids

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

Example

• 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

Example

Medium Visibility Classes

Example

Large Visibility Classes

Example

XLarge Visibility Classes

Example

Direction Visibility Classes

Example

Float Classes

Float Left / Right

Example

 

 

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

Example

Vertical Tabs

Example

Accordion

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

Example

• Title 1

  Tab Content 1

• Title 2

  Tab Content 2

• Title 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.

Example

• 
• 
• 
• 
• 
• 

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.

Example

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

Example

• Menu Item 1
• Menu Item 2
  • Submenu Item 1
  • Submenu Item 2
• Menu Item 3

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.

Example Basic Button Link Button Submit Button Reset Button

Button Size

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

Example Large Button Basic Button Medium Button Small Button Tiny Button

Button Color

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

Example Primary Button Secondary Button Success Button Alert Button

Button Shape

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

Example Basic Button Round Button Raidus Button

Dropdown Button

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

Example Primary Dropdown Secondary Dropdown Success Dropdown Alert Dropdown

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.

Example

Dropdown

Example

• Dropdown
  Dropdown

 

Label

Label Color

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

Example Primary Label Secondary Label Success Label Alert Label

Label Shape

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

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

Example

Progress Size

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

Example

Progress Shape

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

Example

Reveal

Reveal Size

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

Example

Tooltip

Tooltip Position

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

Example Top Tooltip Bottom Tooltip Right Tooltip Left 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.

Example

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.

Example

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:

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’: