pavlobondarchuk

<p>Simple Sticky TOC automatically generates a sticky table of contents for single posts or pages by parsing <code><h2></code>, <code><h3></code>, and <code><h4></code> tags. It is lightweight, mobile-friendly, and works without jQuery.</p>
<p><strong>Features:</strong><br />
– Automatically detects and anchors h2–h4 headings<br />
– Sticky TOC with vertical layout on desktop<br />
– Sticky toggleable TOC on mobile<br />
– Built-in RTL support (positioning + layout)<br />
– Option to disable TOC on individual posts<br />
– Option to customize TOC layout from your theme<br />
– Auto-generated anchor IDs for headings<br />
– Clean CSS, pure JavaScript, no jQuery</p>
<h3>Theme Override Support</h3>
<p>To override the default markup or styles:</p>
<ol>
<li>
<p>Copy the default template files from the plugin:</p>
<ul>
<li><code>frontend/partials/toc-template.php</code></li>
<li><code>assets/css/toc.css</code></li>
<li><code>assets/js/toc.js</code></li>
</ul>
</li>
<li>
<p>Paste them into your theme inside the following folder:</p>
<ul>
<li><code>your-theme/simple-sticky-toc/</code></li>
</ul>
</li>
</ol>
<p>Supported override files:</p>
<ul>
<li><code>simple-sticky-toc/toc-template.php</code> – custom TOC markup</li>
<li><code>simple-sticky-toc/toc.css</code> – custom styles</li>
<li><code>simple-sticky-toc/toc.js</code> – custom JS behavior</li>
</ul>


Simple Sticky TOC

Lightweight sticky table of contents for mobile and desktop. Automatically generates anchor links for h2–h4 headings. No jQuery.

bassjobsen

<p>This plugin stimulates WordPress editors to use correct headings for accessibility and seo. The heading tags are on the second row and hidden in the WYSIWYG editor in WordPress by default. The (non visual) text edit screen has no heading tag buttons at all.<br />
Editors will make heading bold instead of using the correct heading while the use of correct (nested) heading is important for accessibility and seo.<br />
This plugin add the format menu with heading tags in the first row of the WYSIWYG editor and add heading tags to the text editor.</p>
<p>Accessibility</p>
<p>[Section 508](<a href=”http://squizlabs.github.io/HTML_CodeSniffer/Standards/Section508/) states that your largest header must be an <code><h1></code> followed by an other <code><h1></code> or a subordinate heading element (h2 to h6). The structure of the headers should reflex the structure of your document. So the heading structure should be logically nested. Screen readers read this semantic heading structure to construct a table of contents. Screen readers don’t use any formatted style. Visual readers use the formatted style in stead of the semantic structure. See also: <a href="http://accessibility.psu.edu/headings" rel="nofollow ugc">http://accessibility.psu.edu/headings</a>.</p>
<p>SEO</p>
<blockquote>
<p>When the importance of a heading is established with HTML tags, you’re actually making it easy for the search engine robots to determine what your web page is all about. The search engine doesn’t have to guess at it. It can see exactly what your main topic is and place you under the appropriate keywords so your potential customers will be able to find you on the WWW.</p>
</blockquote>
<p><a href="http://stackoverflow.com/a/8178353/1596547" rel="nofollow ugc">Nov 18 ’11, Rupesh Pawar</a></p>
<p>Also read: <a href="http://yoast.com/blog-headings-structure/" rel="nofollow ugc">The heading structure for your blog</a></p>
<p>Contribute!</p>
<p>If you have suggestions for a new feature or improvement, feel free to contact us on <a href="http://twitter.com/JamedoWebsites" rel="nofollow ugc">Twitter</a>. Alternatively, you can fork the plugin from <a href="https://github.com/bassjobsen/stimulate_correct_headings" rel="nofollow ugc">Github</a>.</p>
<h3>Requirements</h3>
<ul>
<li><a href="https://wordpress.org/download/" rel="ugc">WordPress</a> tested with >= 3.6</li>
</ul>
<h3>Support</h3>
<p>We are always happy to help you. If you have any question regarding this code. <a href="http://www.jamedowebsites.nl/contact/" rel="nofollow ugc">Send us a message</a> or contact us on twitter <a href="http://twitter.com/JamedoWebsites" rel="nofollow ugc">@JamedoWebsites</a>.</p>


Stimulate Correct Headings

This plugin stimulates WordPress editors to use correct headings for accessibility and seo.

Simple Sticky TOC vs Stimulate Correct Headings