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.

Web Guy

StripesWP

<p>The simplest and most elegant way of adding full-width, layered content areas to your website, with a simple shortcode: [layer]…[/layer]. Add as many layers and colors and images as you like.</p>


Sectionize vs Layers