FoundationPress – Help
Foundation Press
Help file.
Getting Started
Getting started with Foundation Press
Introduction
WordPress
Shortcodes. The aim is to make adding elements
such as Tabs, Grid, Buttons… to your WordPress blog as simple as possible.
Installation
version is
always
recommended.
Usage
provided
for ease
of use especially if you are in the WordPress editor. For more information
about Shortcodes.
Pro Version
- Visual Shortcodes Editor
- More Advanced Shortcodes (Slider, Google Maps, Syntax Highlighter…)
- Customizable Foundation Theme
- Priority Support
You can sign-up for our announcement newsletter in our FoundationPress
site to get notified when the Premium version
is launched
Pro Version
framework,
you
can check our other plugin BoostrapPress.
ShortCodes
Usage of the different shortcodes
Typography
Headlines
All HTML headings, h1 through h6 are available.
Usage
[fp_h1]h1. Heading 1[/fp_h1] [fp_h2]h2. Heading 2[/fp_h2] [fp_h3]h3. Heading 3[/fp_h3] [fp_h4]h4. Heading 4[/fp_h4] [fp_h5]h5. Heading 5[/fp_h5] [fp_h6]h6. Heading 6[/fp_h6]
Output
<h1 class="foundation_press">h1. Header 1<h1> <h2 class="foundation_press">h2. Header 2<h2> <h3 class="foundation_press">h3. Header 3<h3> <h4 class="foundation_press">h4. Header 4<h4> <h5 class="foundation_press">h5. Header 5<h5> <h6 class="foundation_press">h6. Header 6<h6>
Block quotes
For quoting blocks of content from another source within your document.
Usage
[fp_blockquote] ... Put content here [/fp_blockquote]
Output
<blockquote class="foundation_press"> ... Put content here <blockquote>
Labels
Usage
[fp_label corner="" color=""] Label Text [/fp_label]
Attributes
- corner null, radius, round
- color null, secondary, alert, success
Output
<span class="foundation_press label">Label Text</span>
Keystrokes
Usage
[fp_keystroke]Ctrl[/fp_keystroke]
Output
<kbd class="foundation_press>Ctrl</kbd>
Buttons
Usage
[fp_button link="" size="" color="" corner="" state=""] Button Title [/fp_button]
Attributes
- link User Input
- size null, tiny, small, medium, large
- color null, secondary, alert, success
- corner null, radius, round
- state null, disabled
Output
<a href="" class="foundation_press button">Button Title</a>
Panel
Usage
[fp_panel type="" corner=""] Panel Content [/fp_panel]
Attributes
- type null, callout
- corner null, radius
Output
<div class="foundation_press panel"> Panel Content </div>
Tables
Table Element
Usage
[fp_table] ... Table content here [/fp_table]
Output
<table class="foundation_press table"> ... Table content here </table>
Table Header
Usage
[fp_head] ... Table header content [/fp_head]
Output
<thead class="foundation_press"> ... Table header content </thead>
Table Body
Usage
[fp_head] ... Table body content [/fp_head]
Output
<tbody class="foundation_press"> ... Table body content </tbody>
Table Row
Usage
[fp_row] ... Row content here [/fp_row]
Output
<tr class="foundation_press"> ... Row content here </tr>
Table Cell
Usage
[fp_cell] ... Cell content here [/fp_cell]
Output
<td class="foundation_press"> ... Table content here </td>
Overall
Usage
[fp_table] [fp_head] [fp_row] [fp_cell]First Name[/fp_cell] [fp_cell]Last Name[/fp_cell] [fp_cell]User Name[/fp_cell] [fp_row] [/fp_head] [fp_body] [fp_row] [fp_cell]Mark[/fp_cell] [fp_cell]Otto[/fp_cell] [fp_cell]@mdo[/fp_cell] [/fp_row] [fp_row] [fp_cell]Jacob[/fp_cell] [fp_cell]Thornton[/fp_cell] [fp_cell]@fat[/fp_cell] [/fp_row] [fp_row] [fp_cell]Larry[/fp_cell] [fp_cell]The Bird[/fp_cell] [fp_cell]@twitter[/fp_cell] [/fp_row] [/fp_body] [/fp_table]
Output
<table class="foundation_press table "> <thead><br /> <tr class=""></tr><br /> <td>First Name</td><br /> <td>Last Name</td><br /> <td>User Name</td><br /> <tr class=""></tr><br /> </thead><br /> <tbody><br /> <tr class=""><br /> <td>Mark</td><br /> <td>Otto</td><br /> <td>@mdo</td><br /> </tr><br /> <tr class=""><br /> <td>Jacob</td><br /> <td>Thornton</td><br /> <td>@fat</td><br /> </tr><br /> <tr class=""><br /> <td>Larry</td><br /> <td>The Bird</td><br /> <td>@twitter</td><br /> </tr><br /> </tbody><br /> </table>
Pricing Table
Usage
[fp_pricing_table title="" price="" description="" cta=""] [fp_pricing_item] Table Row [/fp_pricing_item] [/fp_pricing_table]
Output
<ul class="pricing-table"> <li class="title"></li> <li class="price"></li> <li class="description"></li> <li class="bullet-item"> Table Row </li> <li class="cta-button"><a class="button" href="#"></a></li> </ul>
Grid
Grid Container
Usage
[fp_grid] ... Grid content here [/fp_grid]
Output
<div class="foundation_press row"> ... Grid content here </div>
Grid Column
Usage
[fp_column size=""] ... Column content here [/fp_column]
Attributes
- size 1 to 12
Output
<div class="foundation_press columns large-2"> ... Column content here </div> <div class="foundation_press columns large-6"> ... Column content here </div>
Components
Tabs
Add quick, dynamic tab functionality to transition through panes of local content.
Usage
[fp_tabs] [fp_tab title="Home"] My Home content [/fp_tab] [fp_tab title="Profile"] My Profile content [/fp_tab] [fp_tab title="Messages" My Messages content [/fp_tab] [/fp_tabs]
Attributes
- title User Input
Output
<div class="section-container tabs" data-section=""> <section class="section" style=""> <p class="title" style="left: 0px;"><a href="#">Home</a></p> <div class="content"> <p> My Home content </p> </div> </section> <section class="section" style=""> <p class="title" style="left: 58px;"><a href="#">Profile</a></p> <div class="content"> <p> My Profile content </p> </div> </section> <section class="section active" style="padding-top: 42px;"> <p class="title" style="left: 118px;"><a href="#">Messages</a></p> <div class="content"> <p></p> </div> </section> </div>
Accordion
Usage
[fp_accordion] [fp_tab title="Home"] My Home content [/fp_tab] [fp_tab title="Profile"] My Profile content [/fp_tab] [fp_tab title="Messages" My Messages content [/fp_tab] [/fp_fp_accordion]
Attributes
- title User Input
Output
<div class="section-container" data-section=""> <section class="section" style=""> <p class="title" style="left: 0px;"><a href="#">Home</a></p> <div class="content"> <p> My Home content </p> </div> </section> <section class="section" style=""> <p class="title" style="left: 58px;"><a href="#">Profile</a></p> <div class="content"> <p> My Profile content </p> </div> </section> <section class="section active" style="padding-top: 42px;"> <p class="title" style="left: 118px;"><a href="#">Messages</a></p> <div class="content"> <p></p> </div> </section> </div>
Alert
Usage
[fp_alert color="" corner=""]Alert Text[/fp_alert]
Attributes
- color null, success, alert, secondary
- corner null, round
Output
<div data-alert="" class="alert-box "> Alert Text <a href="#" class="close">×</a> </div>
Tooltip
Usage
[fp_tooltip placement="" tooltip="Tooltip Text"]Text to explain[/fp_tooltip]
Attributes
- placement null, top, bottom, left, right
- tooltip User input
Output
<span data-tooltip class="foundation_press has-tip tip-top" title="Tootlip Text">Text to explain</span>
About Us
The people behind Foundation Press
The Developers
Licensing
License. The
Foundation CSS code is licensed under the MIT Open
Source License. The MIT License is compatible
with the GPLv3.
Custom Development
(JavaScript). If you are
interested you can contact us: contact@omarabid.com.