Corey McKrill

<p>This plugin is intended for theme developers and others who want to have full control of their column styles while still providing a quick and easy framework for adding/editing column content via WordPress’s visual editor. It eliminates the need to type tedious, unmanageable chunks of HTML into the editor when specific posts or pages require a columnar layout.</p>
<p>That said, this plugin is not plug-and-play. It does not include any styles out-of-the-box, so if you start using the shortcodes without adding appropriate CSS rules, there probably won’t be any visible changes to your content.</p>
<p>See the <a href="https://github.com/jupiterwise/Columns-DIY/wiki/Recipes" rel="nofollow ugc">Recipes</a> page on the GitHub wiki for some styling examples.</p>
<h4>Usage</h4>
<ul>
<li>Designate each column with <code>[column]</code> and <code>[/column]</code></li>
<li>Mark the end of a row with <code>[endrow]</code></li>
</ul>
<h4>Features</h4>
<ul>
<li>Includes enumerated column and row classes, allowing for per-column and -row styling. Also includes parity classes (odd/even) for striping.</li>
<li>If a user forgets to add the last <code>[endrow]</code> shortcode, the plugin will automatically insert a closing <code></div></code> so the site layout doesn’t get broken.</li>
<li>Cleans up errant <code><p></code> and <code><br /></code> tags that result from WordPress’s <code>wpautop()</code> function.</li>
<li>All parameter inputs are escaped for security.</li>
</ul>
<h4>Example</h4>
<p>Putting this into the visual editor:</p>
<blockquote>
<p><code>[column]</code></p>
<p>This is the column of Foo.</p>
<p><code>[/column]</code></p>
<p><code>[column]</code></p>
<p>This is the column of Bar.</p>
<p><code>[/column]</code> <code>[endrow]</code></p>
</blockquote>
<p>Will result in this output:</p>
<p>This is the column of Foo.</p>
<p>    </p>
<p>This is the column of Bar.</p>
<p>    </p>
<p></p>
<h4>Parameters</h4>
<p>The following optional parameters can be added to the <code>[column]</code> shortcode:</p>
<ul>
<li><em>class</em> (String : ”)<br />
Classes for the column <code><div></code> element. Separate multiple classes with spaces.</li>
<li><em>rowclass</em> (String : ”)<br />
Classes for the row <code><div></code> element. Only works when included with the first <code>[column]</code> shortcode in a row.</li>
<li><em>style</em> (String : ”)<br />
Inline styles for the column <code><div></code> element.</li>
<li><em>rowstyle</em> (String : ”)<br />
Inline styles for the row <code><div></code> element. Only works when included with the first <code>[column]</code> shortcode in a row.</li>
<li><em>norow</em> (Boolean : false)<br />
Set to true to omit the row wrapper <code><div></code>.</li>
</ul>
<h4>Filters</h4>
<p>The following filter hooks can be used to alter the output of the shortcodes:</p>
<ul>
<li><code>diy_colclass</code></li>
<li><code>diy_colstyle</code></li>
<li><code>diy_column</code></li>
<li><code>diy_rowclass</code></li>
<li><code>diy_rowstyle</code></li>
<li><code>diy_beginrow</code></li>
<li><code>diy_endrow</code></li>
</ul>

Columns DIY

Simple shortcodes for div-based columns and rows. Wrap desired content in [column][/column]. Mark the end of a row with [endrow]. CSS not included.

keksus

<p>This plugin allows you to add the following shortcodes to page or post:</p>
<ul>
<li>Columns (12 col grid)</li>
<li>Buttons</li>
<li>Buttons with <a href="http://keksus.com/demo/ionicons/" rel="nofollow ugc">Ionicons icons</a> or <a href="http://fontawesome.io/icons/" rel="nofollow ugc">FontAwesome</a> icons</li>
<li>Toggles</li>
<li>Tabs</li>
<li>Icons</li>
<li>Services</li>
<li>Dividers</li>
<li>Clear </li>
</ul>
<h3>Live Demo</h3>
<ul>
<li><a href="http://keksus.com/q-shortcodes-demo.html" rel="nofollow ugc">http://keksus.com/q-shortcodes-demo.html</a></li>
</ul>
<h3>Usage</h3>
<ul>
<li>Use q button in default TinyMCE editor to add shortcode to page or post.</li>
<li>Use Customize page in WordPress dashboard to change settings.</li>
</ul>


Columns DIY vs q-Shortcodes