Weston Ruter

<p><em>This plugin is developed at<br />
<a href="http://www.shepherd-interactive.com/" title="Shepherd Interactive specializes in web design and development in Portland, Oregon" rel="nofollow ugc">Shepherd Interactive</a><br />
for the benefit of the community. No support is available. Please post any questions to the <a href="https://wordpress.org/tags/sectionize?forum_id=10" rel="ugc">support forum</a>.</em></p>
<p>Takes HTML content which contains flat heading elements inline with paragraphs<br />
and automatically nests them withing HTML5 <code><section></code> elements. It also<br />
conditionally prepends an <code><ol></code> Table of Contents (TOC) with links to the<br />
sections in the content, for example:</p>
<pre><code><nav class='toc'><ol>
    <li><a href="#section-first-top">First Top</a></li>
    <li><a href="#section-second-top">Second Top</a>
    <ol>
        <li><a href="#section-first-sub">First Sub</a></li>
        <li><a href="#section-second-sub">Second Sub</a></li>
    </ol>
    </li>
    <li><a href="#section-third-top">Third Top</a></li>
</ol></nav>
</code></pre>
<p>This would reflect original post content such as:</p>
<pre><code><h2>First Top</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<h2>Second Top</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<h3>First Sub</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<h3>Second Sub</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<h2>Third Top</h2>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</code></pre>
<p>Original post content such as this would be sectionized as follows:</p>
<pre><code><section id="section-first-top">
    <h2>First Top</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</section>
<section id="section-second-top">
    <h2>Second Top</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    <section id="section-first-sub">
        <h3>First Sub</h2>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </section>
    <section id="section-second-sub">
        <h3>Second Sub</h2>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </section>
</section>
<section id="section-third-top">
    <h2>Third Top</h2>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</section>
</code></pre>
<p>Adding a table of contents as such not only aids navigation for visitors once<br />
on the page, but Google also now provides direct links to such sections in relevant search result<br />
snippets (see <a href="http://googleblog.blogspot.com/2009/09/jump-to-information-you-want-right-from.html" title="Jump to the information you want right from the search snippets" rel="nofollow ugc">announcement</a>).<br />
So people browsing search results may be able to see your section links<br />
right from the results page and then be able to jump directly to the relevant<br />
section.</p>
<p>The start/end tags for both the sections and the TOC, as well as the prefixes<br />
used when generating the section IDs, may all be configured via the following<br />
WordPress options (with their defaults):</p>
<ul>
<li><code>sectionize_id_prefix</code>: <code>'section-'</code></li>
<li><code>sectionize_start_section</code>: <code>'<section id="%id">'</code></li>
<li><code>sectionize_end_section</code>:  <code></section></code></li>
<li><code>sectionize_include_toc_threshold</code>: <code>2</code></li>
<li><code>sectionize_before_toc</code>: <code>'<nav class="toc">'</code></li>
<li><code>sectionize_after_toc</code>: <code>'</nav>'</code></li>
<li><code>sectionize_disabled</code>: <code>false</code> (no corresponding function argument)</li>
</ul>
<p>These global WordPress options may be overridden by individual posts/pages by<br />
creating custom fields (postmeta) with the same names.</p>
<p>These options are retreived if their corresponding arguments are not supplied<br />
to the <code>sectionize()</code> function (that is, if they are <code>null</code>):</p>
<pre><code>function sectionize($original_content,
                    $id_prefix = null,
                    $start_section = null,
                    $end_section = null,
                    $include_toc_threshold = null,
                    $before_toc = null,
                    $after_toc = null)
</code></pre>
<p>This <code>sectionize()</code> function is added as a filter for <code>the_content</code> (this is<br />
disabled if the option or postmeta <code>sectionize_disabled</code> evaluates to <code>true</code>):</p>
<pre><code>add_filter('the_content', 'sectionize');
</code></pre>
<p>Noted above, the TOC is conditionally included. It is not included if:</p>
<ol>
<li>there are no headings in the content (thus there is nothing to sectionize),</li>
<li>the headings are not nested properly (see below), or</li>
<li>the heading count does not meet the threshold (or the threshold is -1)</li>
</ol>
<p>If the number of headings in the content is less than the<br />
    include_toc_threshold option/argument then the TOC is not displayed;<br />
likewise, if <code>include_toc_threshold</code> is <code>-1</code> then the TOC is not displayed.</p>
<p><em>Important!</em> Regarding headings being “nested properly”, you must ensure that<br />
you properly arrange your headings in a hierarchical manner in which no heading<br />
is immediately preceeded by another heading that is more than one level greater<br />
(e.g. an <code>h3</code> must be preceeded by an <code>h2</code> or another <code>h3</code>). For example, this<br />
works:</p>
<pre><code>h2
    h3
    h3
        h4
    h3
h2
</code></pre>
<p>But this does not:</p>
<pre><code>h2
    h4 -- fail
        h6 -- fail
h2
</code></pre>
<p>If you make such a mistake, this plugin will abort and have no effect. An error<br />
notice will be included in the HTML output in the form of an HTML comment.</p>
<p>Please see source code for additional documentation: numerous filters are provided<br />
to further customize the behavior. <em>Be one with the code!</em><br />
To help serve HTML5 content, see the <a href="https://wordpress.org/extend/plugins/xhtml5-support/" rel="ugc">XHTML5 Support</a<> plugin.</a></p>


Sectionize

Parses HTML for sections demarcated by heading elements, wraps them in HTML5 section elements, and generates table of contents with links to each.

onecraftne

<p>GENE Section Builder adds a single, focused block of the same name to WordPress.</p>
<p>Choose your industry and a color, then hit Generate. A fully designed section appears, built from native WordPress blocks and ready for you to edit — change any text, image, color or layout with the normal editor. Preview the result before you generate.</p>
<p>Each industry comes with its own complete design — not a blank template. Choosing an industry sets a matching look and suggests a color, which you can change anytime.</p>
<p><strong>What you get for free</strong></p>
<ul>
<li><strong>3 industry designs</strong> — <em>Solo & Professional</em> (dark, high-contrast, product-style), <em>Portfolio & Creator</em> (cinematic, full-bleed, minimal) and <em>Small Company</em> (bright, structured B2B). Each has its own distinct, finished design and copy tuned to that kind of site.</li>
<li><strong>12 sections</strong> — Hero, Services, Call to Action, Pricing, Testimonials, Team, Q&A, Footer, Logos, Features, Compare and Stats.</li>
<li><strong>7 color palettes</strong> — Blue, Emerald, Violet, Rose, Amber, Teal, Charcoal. The same section renders in any color, so you can match your brand instantly.</li>
<li><strong>Visual preview</strong> — see exactly how a section will look, in your chosen color, before you generate it.</li>
</ul>
<p><strong>Why core blocks?</strong></p>
<p>Every section is built from standard WordPress core blocks (group, columns, heading, paragraph, image, cover, buttons, details). That means:</p>
<ul>
<li>Fully editable — change any text, image, color or layout from the editor</li>
<li>No vendor lock-in — deactivate the plugin and your content stays intact (you only lose the design CSS polish)</li>
<li>Works in any block-aware theme</li>
<li>Lightweight — CSS-driven palettes, no heavy frameworks</li>
</ul>
<p><strong>Looking for more?</strong></p>
<p>GENE Section Builder generates individual sections. A separate companion product, <strong>GENE Blocks Studio</strong>, adds one-click <strong>Full Page</strong> generation, whole-site <strong>Starter Site</strong> generation (Home, Services, About, Contact at once), built-in <strong>SEO</strong>, a <strong>contact form</strong> block, <strong>client-delivery locking</strong> (lock the structure so clients can only edit text and images), scroll <strong>effects</strong> and block <strong>export / import</strong>. Studio is a standalone product available at https://gene-wp.com/ — it is not an upgrade that unlocks this plugin; everything in GENE Section Builder stays free.</p>
<h3>Resources</h3>
<p>GENE Section Builder WordPress Plugin, (C) 2026 One Craft<br />
GENE Section Builder is distributed under the terms of the GNU GPL v2 or later.</p>
<p>Bundled font: Inter (SIL Open Font License 1.1) — see assets/fonts/Inter-OFL.txt.</p>


GENE Section Builder

Pick an industry and a color — generate a fully designed, editable page section in seconds. Built on native WordPress blocks.

Sectionize vs GENE Section Builder