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.

Khokan Sardar

<p>Sectioneer adds a curated, theme-aware page-building experience to the WordPress<br />
block editor — a section library, one-click insert, and optional AI section<br />
generation and editing. It is built entirely on WordPress’s public extension<br />
points (SlotFills, block filters, the command palette, the Abilities API and the<br />
WordPress AI Client), so it installs as an ordinary plugin and keeps working across<br />
core upgrades. It never forks core or replaces the editor.</p>
<p>Open any page or post (or the Site Editor), click the <strong>Sectioneer</strong> icon in the<br />
top-right toolbar, and the <strong>Sections</strong> panel appears.</p>
<h4>Features</h4>
<ul>
<li><strong>Section library</strong> — ready-made sections (hero, features, call to action, and<br />
more) with search and one-click insert.</li>
<li><strong>Theme-aware insert</strong> — inserted sections adopt the active theme: raw colors are<br />
remapped to the nearest theme.json palette token, so sections never look “pasted in”.</li>
<li><strong>AI section generation (optional)</strong> — describe a section in plain language and<br />
Sectioneer generates valid block markup for it, seeded with your theme’s design<br />
tokens. Select a block first to revise it in place instead of inserting a new one.</li>
<li><strong>Safe by construction</strong> — all inserted markup (curated or AI-generated) is parsed<br />
and rebuilt against registered block types; unregistered or unsafe blocks are dropped.</li>
<li><strong>One consistent home</strong> — every feature lives in a single Sectioneer editor sidebar,<br />
in both the post editor and the Site Editor, with a first-run guide so it’s easy to find.</li>
</ul>
<p>The curated section library works on its own. AI generation is an optional<br />
enhancement that degrades gracefully when no AI provider is configured.</p>
<h4>AI section generation and external services</h4>
<p>Sectioneer does <strong>not</strong> bundle any AI provider, contain any API keys, or make any<br />
external requests on its own. It registers a WordPress Ability and calls it through<br />
the <strong>WordPress AI Client</strong>; the underlying provider is resolved on your own site.</p>
<p>To enable AI generation you install and configure a separate WordPress AI provider<br />
plugin (for example <em>AI Provider for Google</em>, <em>AI Provider for OpenAI</em>, or <em>AI<br />
Provider for Anthropic</em>) and supply that provider’s API key. When — and only when —<br />
you click “Generate”/”Update”, your prompt text and the slugs of your active theme’s<br />
design tokens (color and font-size names) are sent to whichever AI provider <strong>you</strong><br />
configured, via the AI Client running on your site, and the generated block markup is<br />
returned. That request is governed by the terms and privacy policy of the AI provider<br />
you chose. If no provider is configured, Sectioneer shows a notice and the AI controls<br />
are disabled — nothing is sent anywhere.</p>


Sectioneer

An extensible page-building layer for the block editor: curated, theme-aware sections with optional AI generation, inside Gutenberg and FSE.

Sectionize vs Sectioneer