Foundation Press

Help file.

Getting Started Getting started with Foundation Press

Introduction

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.

Installation

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

Usage

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.

Pro Version

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

Pro Version

If you are interested in the Twitter Bootstrap 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

FoundationPress is developed and maintained by Abid Omar.

Licensing

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.

Custom Development

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.