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.

WP Darko

<p>A responsive and easy-to-use tool for dividing your content in your posts/pages. This ultra-lightweight plugin allows you to put your content in columns of various widths. What you see is what you get, and it’s totally free.</p>
<h4>Usage example</h4>
<h4>1. Create rows using [GDC_row]</h4>
<pre><code>[GDC_row][/GDC_row]
</code></pre>
<h4>2. Add columns using [GDC_column]</h4>
<pre><code>[GDC_row]

[GDC_column size="third"]
Your content here
[/GDC_column]

[GDC_column size="third"]
Your content here
[/GDC_column]

[GDC_column size="third"]
Your content here
[/GDC_column]

[/GDC_row]
</code></pre>
<p>Available sizes</p>
<ul>
<li>half</li>
<li>third</li>
<li>two-thirds</li>
<li>quarter</li>
<li>three-quarters</li>
</ul>
<p>See more code examples on the <a href="https://wpdarko.com/support/docs/get-started-with-the-grid-shortcodes-plugin/" rel="nofollow ugc">documentation page</a>.</p>
<h4>Support</h4>
<p>Find help in <a href="https://wpdarko.com/support" rel="nofollow ugc">our forums</a> for this plugin (we’ll answer you fast, promise).</p>


Grid Shortcodes

A responsive and easy-to-use tool for dividing your content in your posts/pages. This ultra-lightweight plugin allows you to put your content in colum …

Columns DIY vs Grid Shortcodes