Foundation Press Shortcodes Help

FoundationPress – Help




 

Foundation Press

Help file.

Foundation Press offers Foundation framework styles with
WordPress
Shortcodes. The aim is to make adding elements
such as Tabs, Grid, Buttons… to your WordPress blog as simple as possible.

Just upload the plugin and activate it. Foundation Press requires WordPress 3.5, but the latest
version is
always
recommended.

You can use the Foundation HTML Code directly or the provided the Shortcodes. The Shortcodes are
provided
for ease
of use especially if you are in the WordPress editor. For more information
about Shortcodes.

We are working on a Premium version which will provide a handful of features.

  • 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

If you are interested in the Twitter Bootstrap
framework
,
you
can check our other plugin BoostrapPress.

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>

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>

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

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

FoundationPress is developed and maintained by Abid Omar.

FoundationPress is licensed under the GPLv3
License
. The
Foundation CSS code is licensed under the MIT Open
Source License
. The MIT License is compatible
with the GPLv3.

We are open to custom development requests for WordPress, PHP and Front-End development
(JavaScript). If you are
interested you can contact us: contact@omarabid.com.