jekkilekki

<p>I’ve wanted to add SIMPLE Pricing Tables to my website for a while but many of the<br />
plugins I tried out were either Freemium (requiring me to purchase the full version<br />
in order to unlock the full functionality) or more complicated than I actually wanted.</p>
<p>THIS plugin is exceptionally simple.</p>
<ol>
<li>Step 1: Type the shortcode tags <code>[jkl-pricing-table] ... [/jkl-pricing-table]</code></li>
<li>Step 2: Add an <code><ol></code> ordered list for your Pricing Table</li>
<li>Step 3: Tweak until it looks right</li>
</ol>
<p>Requires WordPress 3.5 and PHP 5.</p>
<h4>Special Features</h4>
<ul>
<li>Styled like <a href="http://foundation.zurb.com/docs/components/pricing_tables.html" rel="nofollow ugc">Zurb Foundation 5 Pricing Tables</a></li>
<li>Utilizes CSS3 for interesting transition effects (like scaling)</li>
</ul>
<h4>How the Plugin works</h4>
<ol>
<li>The shortcode expects an ordered list of ordered lists</li>
<li>The primary ordered list is the names of your Pricing Options (Basic, Business, etc)</li>
<li>The secondary ordered lists are the content within your Pricing Options</li>
<li>Using jQuery, the plugin finds each element within the ordered lists and adds<br />
specific CSS classes to them based on their order (see below)</li>
<li>The SECOND Pricing Option is always set to be “popped out” by default and when<br />
another table is not hovered over</li>
</ol>
<h4>Translations</h4>
<ul>
<li>English (EN) – default</li>
<li>Korean (KO) – upcoming</li>
</ul>
<p>If you want to help translate the plugin into your language, please have a look<br />
at the <code>.pot</code> file which contains all definitions and may be used with a [gettext]<br />
editor.</p>
<p>If you have created your own language pack, or have an update of an existing one,<br />
you can send your [gettext .po or .mo file] to me so that I can bundle it in the<br />
plugin.</p>
<h4>Contact Me</h4>
<p>If you have questions about, problems with, or suggestions for improving this<br />
plugin, please let me know at the <a href="https://wordpress.org/support/plugin/jkl-pricing-tables" rel="ugc">WordPress.org support forums</a></p>
<p>Want updates about my other WordPress plugins, themes, or tutorials? Follow me <a href="http://twitter.com/jekkilekki" rel="nofollow ugc">@jekkilekki</a></p>
<h4>Acknowledgements</h4>
<p>This plugin uses:</p>
<ul>
<li><a href="http://jquery.com/" rel="nofollow ugc">jQuery</a> licensed under MIT License or GNU General Public License (GPL) Version 2</li>
</ul>
<h4>License</h4>
<p>This program is free software; you can redistribute it and/or modify it under the terms<br />
of the GNU General Public License as published by the Free Software Foundation; either<br />
version 2 of the License, or (at your option) any later version.</p>
<p>This program is distributed in the hope that it will be useful, but WITHOUT ANY<br />
WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A<br />
PARTICULAR PURPOSE. See the GNU General Public License for more details.</p>
<p>You should have received a copy of the GNU General Public License along with this<br />
program; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth<br />
Floor, Boston, MA 02110-1301 USA</p>
<h3>How To</h3>
<h4>How To Use the Plugin</h4>
<ol>
<li>Type the shortcode tags</li>
<li>Create an ordered list <code><ol></code> within the tags</li>
<li>Type the heading for your first table in the first <code><ol></code> item and hit return</li>
<li>TAB the <code><ol></code> in to add the remainder of your content for the first table</li>
<li>Un-indent the <code><ol></code> to write the heading of your second table</li>
<li>TAB in for the remainder of the content in your second table</li>
<li>Rinse, repeat for multiple tables (supports up to 5 in a row)</li>
</ol>
<h4>Example of Usage</h4>
<pre><code>[jkl-pricing-table]
<ol>
  <li>Basic
    <ol>
      <li>$150</li>
      <li>Logo only</li>
      <li>Content 1</li>
      <li>Content 2</li>
      <li>Deliverables</li>
      <li><a href='#'>Select Now</a></li>
    </ol>
  </li>
  <li>Business
    <ol>
      <li>$250</li>
      <li>Logo + Business Cards</li>
      <li>Content 1</li>
      <li>Content 2</li>
      <li>Deliverables</li>
      <li><a href='#'>Select Now</a></li>
    </ol>
  </li>
</ol>
[/jkl-pricing-table]
</code></pre>
<h4>Special CSS Classes and How to Style the Plugin</h4>
<p>The plugin uses jQuery to dynamically add the following CSS classes to the ordered<br />
list elements. Use these classes in your Custom CSS if you want to change things.</p>
<ol>
<li><code>.pricing-table</code> = Each first level ordered list item (<code><ol><li></code>)</li>
<li><code>.price</code> = The FIRST second level list item (<code><ol><li><ol><li></code>)</li>
<li><code>.description</code> = The SECOND second level list item</li>
<li>List items after this have no special styling until the end</li>
<li><code>.deliverables</code> = The SECOND-TO-LAST second level list item</li>
<li><code>.cta-button</code> (Call To Action button) = The LAST second level list item (it should be an <code><a></code> link)</li>
<li><code>.button</code> = The <code><a></code> link in the <code>.cta-button</code> list item</li>
</ol>
<p>When applying custom CSS to change the design of your plugin, please reference these<br />
classes as <code>.pricing-table .class</code></p>
<h4>Example of CSS Classes after jQuery assigns them</h4>
<pre><code>[jkl-pricing-table]
<ol>
  <li class="pricing-table">Basic
    <ol>
      <li class="price">$150</li>
      <li class="description">Logo only</li>
      <li>Content 1</li>
      <li>Content 2</li>
      <li class="deliverables">Deliverables</li>
      <li class="cta-button"><a class="button" href='#'>Select Now</a></li>
    </ol>
  </li>
  <li class="pricing-table">Business
    <ol>
      <li class="price">$250</li>
      <li class="description">Logo + Business Cards</li>
      <li>Content 1</li>
      <li>Content 2</li>
      <li class="deliverables">Deliverables</li>
      <li class="cta-button"><a class="button" href='#'>Select Now</a></li>
    </ol>
  </li>
</ol>
[/jkl-pricing-table]
</code></pre>


JKL Pricing Tables

This is probably the SIMPLEST Pricing Tables plugin you'll ever use. Just type an ordered list of ordered lists within the shortcode tags.

methnen

<p>Manage data sets via a spreadsheet interface, display them as charts via the Chart.js chart library, and embed them via a shortcode or block.</p>
<p>**Note:*** Starting with M Chart version 2.0 the plugin uses a new React based UI as well as updated data parsing class. This means any third party libraries will need to be refactored to support this. Version 1.3 of the <a href="https://github.com/methnen/m-chart-highcharts-library/" rel="nofollow ugc">M Chart Highcharts Library</a> has the necssary changes implemented.</p>
<p><strong>Note:</strong> Starting with version 1.8 the Chart.js library is no longer on the 2.x.x branch which introduces some <a href="https://www.chartjs.org/docs/latest/migration/v3-migration.html" rel="nofollow ugc">breaking changes</a>. This will probably only affect you if you were modifying the default Chart.js behavior in some way.</p>
<p><strong>Accessibility:</strong> M Chart targets WCAG 2.1 Level AA. Charts on the front end include a visually-hidden data table for screen-reader users, and a <code>Color Blind Safe</code> theme is bundled. Screen-reader users entering chart data should use the CSV Import feature — the spreadsheet widget has partial keyboard support but CSV import is fully accessible.</p>
<p>For full documentation please see the <a href="https://docs.mch.art/" rel="nofollow ugc">Documentation</a>.</p>
<p>To contribute, report issues, or make feature requests use <a href="https://github.com/methnen/m-chart" rel="nofollow ugc">Github</a>.</p>


M Chart

This plugin fits my needs for creating beautiful and responsive charts on my WordPress. Thanks for your work!

Great support and nicely done!

Manage data sets via a spreadsheet interface, display them as charts via the Chart.js chart library, and embed them via a shortcode or block.

JKL Pricing Tables vs M Chart