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.

Vova

<h3>SHORTCODES ULIMATE – THE #1 SHORTCODES PLUGIN</h3>
<p><a href="https://getshortcodes.com/?utm_campaign=wporg&utm_medium=readme&utm_source=description" rel="nofollow ugc">Shortcodes Ultimate</a> is a huge collection of useful elements, that you can use in the post editor, text widgets or even in template files.</p>
<div class="embed-vimeo" style="text-align: center;"><iframe loading="lazy" src="https://player.vimeo.com/video/507942335" width="750" height="422" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
<h4>Features</h4>
<ul>
<li><a href="https://getshortcodes.com/docs-category/shortcodes/?utm_campaign=wporg&utm_medium=readme&utm_source=features" rel="nofollow ugc">Over 50 gorgeous shortcodes</a></li>
<li>Insert shortcodes in 1 click with Live Preview</li>
<li>Supports the Block Editor</li>
<li>Seamlessly integrates with your theme</li>
<li>Looks great on mobile devices</li>
<li>Custom CSS editor is included</li>
<li>Developer-friendly with plenty of hooks and extensive documentation</li>
</ul>
<h4>Included shortcodes</h4>
<ul>
<li><strong>Posts</strong> – allows you to show specific posts anywhere</li>
<li><strong>Accordion</strong> – simple toggle block to show/hide your content</li>
<li><strong>Button</strong> – highly-customizable button with multiple styles</li>
<li><strong>Lightbox</strong> – a lightbox that you can use with virtually any element</li>
<li><strong>Image Carousel</strong> – beautiful super-customizable image carousel</li>
<li><strong>Columns</strong> – must-have tool for creating layouts</li>
<li>And many more…</li>
</ul>
<h4>Get Help</h4>
<ul>
<li><a href="https://getshortcodes.com/docs/?utm_campaign=wporg&utm_medium=readme&utm_source=links-docs" rel="nofollow ugc">Documentation</a></li>
<li><a href="https://wordpress.org/support/plugin/shortcodes-ultimate" rel="ugc">Community Support Forum</a></li>
<li><a href="https://getshortcodes.com/support/open-support-ticket/?utm_campaign=wporg&utm_medium=readme&utm_source=links-support" rel="nofollow ugc">The Pro Support</a></li>
</ul>
<h3>TRY THE PRO VERSION FOR FREE</h3>
<p>Try Shortcodes Ultimate Pro risk-free for 30 days. You are fully protected by our no questions asked refund policy!</p>
<p><a href="https://getshortcodes.com/pricing/?utm_campaign=wporg&utm_medium=readme&utm_source=try-pro" rel="nofollow ugc">Upgrade to Pro</a></p>


Columns DIY vs WP Shortcodes Plugin — Shortcodes Ultimate