Andy Ken

<p>Adds a customizable spacing tool to your visual editor—create perfect gaps between content elements with a simple shortcode.</p>
<h3>Short Description</h3>
<p>Easily add precise vertical spacing in posts/pages using a visual editor button and shortcode. Clean design control—no CSS needed!</p>
<h3>Full Description</h3>
<p><strong>Cute Editor Text Divider</strong> is a lightweight yet powerful WordPress plugin designed for content creators, bloggers, and developers who want full control over vertical spacing in their posts and pages—<strong>without writing a single line of CSS</strong>.</p>
<p>With just one click, you can insert a <strong>customizable space line</strong> directly into your content using the familiar WYSIWYG editor. Whether you’re looking to separate paragraphs, highlight sections, or fine-tune your page layout, this plugin gives you <strong>pixel-perfect control</strong>.</p>
<h3>🔧 Key Features:</h3>
<ul>
<li>Adds a <strong>space line button</strong> to the WordPress visual (TinyMCE) editor</li>
<li>Supports <strong>custom spacing values</strong> (positive & negative)</li>
<li>Accepts <strong>any CSS unit</strong>: px, em, rem, %, pt</li>
<li><strong>Works with any theme</strong> that supports the standard editor</li>
<li>Compatible with posts, pages, and widget areas that allow shortcodes</li>
<li>Lightweight and fast — no extra scripts or bloat</li>
</ul>
<h3>✨ Real Use Cases:</h3>
<ul>
<li><strong>Add white space</strong> between text blocks for readability: <code>[spaceline height="20px"]</code></li>
<li><strong>Separate sections</strong> or images with a clean break: <code>[spaceline height="50px"]</code></li>
<li><strong>Overlap content</strong> creatively with <strong>negative spacing</strong>: <code>[spaceline height="-15px"]</code></li>
<li><strong>Responsive tweaking</strong> using <code>em</code> or <code>%</code> units</li>
</ul>
<p>By using this plugin, you can <strong>avoid theme limitations</strong>, maintain <strong>layout consistency</strong>, and create a more <strong>professional, visually appealing</strong> presentation without needing to dig into your theme’s stylesheet.</p>
<p>Perfect for:<br />
– Bloggers and writers who care about typography and layout<br />
– Designers who need control without editing theme files<br />
– WordPress beginners who want an intuitive visual tool<br />
– Developers who want clean, reusable spacing logic via shortcode</p>
<p>Let your content breathe and your layout shine—with <strong>Cute Editor Text Divider</strong>, spacing is no longer a problem.</p>


Cute Editor Text Divider

Adds a customizable spacing tool to your visual editor—create perfect gaps between content elements with a simple shortcode.

Kirk Bowers

<p>Most modern websites have pages that break the content into multiple sections, with changing background colors and graphics marking the breaks between sections.  In order for a page to be broken into sections, typically there needs to be additional markup within the HTML (ie. <code>div</code> tags) that can be targeted in the stylesheet for formatting.  However, most content authors don’t want to think about techie stuff like <code>div</code> tags, and prefer to work in the Visual editor which only provides for semantic markup (“Paragraph”, “Heading 1”, etc.).</p>
<p>Content Sectioner takes advantage of WordPress’s content filtering mechanism and makes it easy for a theme developer to insert the necessary sectioning markup auto-magically while allowing content authors to still work as they prefer.  It looks for specified landmarks within the content (such as <code>h3</code> tags) and performs the necessary code insertions or replacements.  It does this using a concise and easy-to-use notation, relieving the theme developer from having to write (often repetitive) regular expressions and string manipulation.</p>
<h4>A concrete example</h4>
<p>Suppose you’re working on a site and you want the About page (with slug <code>about</code>) to have an inset in the middle of it with a blue background setting it apart.  The inset should contain the first occurence of a “Heading 3” and all the paragraphs up until just before the next “Heading 2”.  The stylesheet will apply the changing background to elements with the selector <code>.inset</code>.</p>
<p>Assuming your <code>index.php</code> file contains something like this:</p>
<pre><code><?php

  $current_slug = get_queried_object()->post_name;

  get_template_part('content', $current_slug);

?>
</code></pre>
<p>Then in the file <code>content-about.php</code>, you can set up the Content Sectioner like so:</p>
<pre><code><?php

  $sectioner = new ContentSectioner();

  $sectioner->replace_first(
    array(
      'open_tag' => 'h3',
      'open_insert' => '<div class="inset">',
      'open_policy' => 'before',
      'close_tag' => 'h2',
      'close_insert' => '</div>',
      'close_policy' => 'before'
    )
  );

  // Do the usual Loop thing here...
?>
</code></pre>
<p>The About page (and only the About page) will have this inset section inserted.</p>
<p>You can provide replacement rules that replace/insert at the first occurrence of a match, the next occurrence, all remaining occurrences, or all occurrences in the entire piece of content.  You can place the inserted HTML before or after a match, or replace the match.  Also, you can match a closing tag by simply providing the preceding slash character (eg. ‘/h2’).  Tag matches will match against any variant of a tag (upper or lowercase, with or without attributes, as an opening tag or as a self-closing tag like <code><hr /></code>).  In the rare case that something other than a tag needs to be matched, you can supply a raw regex instead of a tag.</p>
<h4>Providing instructions</h4>
<p>As the theme developer, you likely would want to let the content authors know that this magic insertion of sections will occur, and what landmarks need to be present in their content to trigger the sectioning.</p>
<p>In some file in your theme that gets loaded for every page (most likely <code>functions.php</code>), you can provide such instructions along with the slug for the page to which the instructions apply.  The instructions will appear at the top of the Edit Page page in the admin.</p>
<pre><code>ContentSectioner::provide_instructions('about', "
  A blue background will be placed behind everything starting at the first Heading 3
  through just before the next Heading 2.");
</code></pre>
<h4>Full User Guide</h4>
<p>For full documentation and more sample use cases, visit <a href="http://www.kirkbowers.com/plugins/content-sectioner" rel="nofollow ugc">the Content Sectioner homepage</a>.</p>


Content Sectioner

Content Sectioner is a developer plugin that makes it easy to insert formatting markup (div and img tags) into long pieces of content.

Cute Editor Text Divider vs Content Sectioner