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.

CWRUCAS

<p>Code is adapted from the plugin ‘Columns’ by Konstantin Kovshenin.</p>
<p>Bootstrap is an HTML, CSS, and JS framework that is used to develop responsive, mobile websites. It employs a grid system that divides the viewport into twelve distinct columns. On desktops, the columns scale proportionally to the width of the viewing area while on mobile devices and tablets the columns stack on top of one another. This plugin takes advantage of that grid system to allow for WordPress content to be split up equally between the twelve columns.</p>
<p>To create a group of columns, use the <strong>[column-group]</strong> shortcode. To add columns to a group, use the <strong>[column]</strong> shortcode. For example:</p>
<pre><code>[column-group]
        [column]This is the first column[/column]
        [column]This is the second column[/column]
[/column-group]
</code></pre>
<p>The first column will occupy the first six columns of the Bootstrap grid while the second column will fill the remaining six.</p>
<h4>Spanning Columns</h4>
<p>The plugin’s columns can also be manually spanned across the Bootstrap grid. By adding the <em>span</em> attribute to the starting column shortcode, the number of Bootstrap columns that the WordPress columns take up can be assigned. For example:</p>
<pre><code>[column-group]
        [column span=“4”]This is the first column.[/column]
        [column span=“6”]This is the second column.[/column]
        [column span=“2”]This is the third column.[/column]
[/column-group]
</code></pre>
<p>The columns will take up four, six, and two of the Bootstrap columns respectively. Note: The span value is actually a ratio so if the total value of the spans in a column group does not equal twelve, then the plugin will assign the column sizes by means of percentage.</p>


Columns for Bootstrap

This WordPress plugin adds a columns shortcode that utilizes Bootstrap for mobile responsiveness.

Columns DIY vs Columns for Bootstrap