JKL Pricing Tables

I’ve wanted to add SIMPLE Pricing Tables to my website for a while but many of the
plugins I tried out were either Freemium (requiring me to purchase the full version
in order to unlock the full functionality) or more complicated than I actually wanted.

THIS plugin is exceptionally simple.

1. Step 1: Type the shortcode tags [jkl-pricing-table] ... [/jkl-pricing-table]
2. Step 2: Add an
   ordered list for your Pricing Table
   1. Step 3: Tweak until it looks right

   Requires WordPress 3.5 and PHP 5.

   Special Features

   • Styled like Zurb Foundation 5 Pricing Tables
   • Utilizes CSS3 for interesting transition effects (like scaling)

   How the Plugin works

   1. The shortcode expects an ordered list of ordered lists
   2. The primary ordered list is the names of your Pricing Options (Basic, Business, etc)
   3. The secondary ordered lists are the content within your Pricing Options
   4. Using jQuery, the plugin finds each element within the ordered lists and adds
      specific CSS classes to them based on their order (see below)
   5. The SECOND Pricing Option is always set to be “popped out” by default and when
      another table is not hovered over

   Translations

   • English (EN) – default
   • Korean (KO) – upcoming

   If you want to help translate the plugin into your language, please have a look
   at the .pot file which contains all definitions and may be used with a [gettext]
   editor.

   If you have created your own language pack, or have an update of an existing one,
   you can send your [gettext .po or .mo file] to me so that I can bundle it in the
   plugin.

   Contact Me

   If you have questions about, problems with, or suggestions for improving this
   plugin, please let me know at the WordPress.org support forums

   Want updates about my other WordPress plugins, themes, or tutorials? Follow me @jekkilekki

   Acknowledgements

   This plugin uses:

   • jQuery licensed under MIT License or GNU General Public License (GPL) Version 2

   License

   This program is free software; you can redistribute it and/or modify it under the terms
   of the GNU General Public License as published by the Free Software Foundation; either
   version 2 of the License, or (at your option) any later version.

   This program is distributed in the hope that it will be useful, but WITHOUT ANY
   WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
   PARTICULAR PURPOSE. See the GNU General Public License for more details.

   You should have received a copy of the GNU General Public License along with this
   program; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth
   Floor, Boston, MA 02110-1301 USA

   How To

   How To Use the Plugin

   1. Type the shortcode tags
   2. Create an ordered list
      within the tags
      1. Type the heading for your first table in the first
         item and hit return
         1. TAB the
            in to add the remainder of your content for the first table
            1. Un-indent the
               to write the heading of your second table
               1. TAB in for the remainder of the content in your second table
               2. Rinse, repeat for multiple tables (supports up to 5 in a row)

               Example of Usage

               [jkl-pricing-table]
               
                 
               Basic
                   
               
                     
               $150
                     
               Logo only
                     
               Content 1
                     
               Content 2
                     
               Deliverables
                     
               Select Now
                   
                 
                 
               Business
                   
               
                     
               $250
                     
               Logo + Business Cards
                     
               Content 1
                     
               Content 2
                     
               Deliverables
                     
               Select Now
                   
                 
               
               [/jkl-pricing-table]
               

               Special CSS Classes and How to Style the Plugin

               The plugin uses jQuery to dynamically add the following CSS classes to the ordered
               list elements. Use these classes in your Custom CSS if you want to change things.

               1. .pricing-table = Each first level ordered list item (
                  1. )
                  2. .price = The FIRST second level list item (
                     1. 1. )
                        2. .description = The SECOND second level list item
                        3. List items after this have no special styling until the end
                        4. .deliverables = The SECOND-TO-LAST second level list item
                        5. .cta-button (Call To Action button) = The LAST second level list item (it should be an link)
                        6. .button = The link in the .cta-button list item

                        When applying custom CSS to change the design of your plugin, please reference these
                        classes as .pricing-table .class

                        Example of CSS Classes after jQuery assigns them

                        [jkl-pricing-table]
                        
                          
                        Basic
                            
                        
                              
                        $150
                              
                        Logo only
                              
                        Content 1
                              
                        Content 2
                              
                        Deliverables
                              
                        Select Now
                            
                          
                          
                        Business
                            
                        
                              
                        $250
                              
                        Logo + Business Cards
                              
                        Content 1
                              
                        Content 2
                              
                        Deliverables
                              
                        Select Now
                            
                          
                        
                        [/jkl-pricing-table]
                        

Automatic installation

1. Log into your WordPress admin
2. Go to Plugins -> Add New
3. Search for JKL Pricing Tables
4. Click Install Now
5. Activate the Plugin

Manual installation

1. Download the Plugin
2. Extract the contents of the .ZIP file
3. Upload the contents of the jkl-pricing-tables directory to your /wp-content/plugins
   folder of your WordPress installation
4. Activate the Plugin from the Plugins page

Documentation

Full documentation of the Plugin and its uses can (later) be found at its GitHub page

Tips

As a general rule, it is always best to keep your WordPress installation and all
Themes and Plugins fully updated in order to avoid problems with this or any other
Themes or Plugins. I regularly update my site and test my Plugins and Themes with
the latest version of WordPress.

How can I change the style of the plugin to match my website?

Each element contains its own unique CSS identifier under .pricing-tables, allowing
you to hook into those in your own Custom CSS stylesheet.

How can I add more tables?

Simply add another <ol> item.

Why aren’t the table items the same size?

Try to keep the content of each of your <li> elements to approximately the same
length in order to keep the size of the pricing tables consistent. i.e. if one of
your <li> elements is 2 lines long, try to make EVERY table at the same <li>
element also be 2 lines long. (See some examples at my documentation site – upcoming).

1. 

   The default view of the Pricing Tables

2. 

   Hovering over the first Table

3. 
4. 

1.1.1

• Fixes pricing-table list items margin CSS code

1.1

• Makes tables responsive on window resize
• Fixes some CSS code

1.0

• Initial release