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.

Robert

<p>TOC Builder by RobertIvan is a Table of Contents plugin that automatically generates a navigation menu from your content’s headings. It includes an admin interface for configuration and is suitable for long-form content, documentation sites, and blogs.</p>
<h4>Core Features</h4>
<ul>
<li><strong>Auto-Detection</strong> – Automatically scans content for headings (H1-H6)</li>
<li><strong>Smooth Scroll</strong> – Animated scrolling to sections</li>
<li><strong>SpyScroll</strong> – Highlights the current section in the TOC while scrolling</li>
<li><strong>Gutenberg Ready</strong> – Includes a native block with live preview in the editor</li>
<li><strong>Configurable</strong> – Customize position, colors, heading levels, and more</li>
<li><strong>Performance</strong> – Assets loading and caching optimized</li>
<li><strong>Responsive</strong> – Compatible with desktop, tablet, and mobile devices</li>
</ul>
<h4>Admin Interface</h4>
<p>TOC Builder by RobertIvan features an admin settings page for configuration:</p>
<p><strong>Design System</strong></p>
<ul>
<li>Gradient color scheme</li>
<li>Animations and transitions</li>
<li>Card-based layout</li>
<li>System typography</li>
</ul>
<p><strong>WordPress Sidebar Menu Structure</strong></p>
<ul>
<li>Dedicated Sidebar Menu – Menu in WordPress sidebar with a custom icon</li>
<li>General Settings – Core TOC functionality with live preview</li>
<li>Appearance Settings – Visual customization options (coming soon)</li>
<li>Advanced Settings – Options for developers (coming soon)</li>
<li>Premium Features – Planned functionality</li>
<li>Bookmarkable URLs – Direct URLs for each section</li>
</ul>
<p><strong>User Experience</strong></p>
<ul>
<li>Live Preview – Preview updates based on selected heading levels</li>
<li>Heading Selection – Click on heading boxes (H1-H6) to toggle selection</li>
<li>Visual Hierarchy – Preview shows TOC structure based on heading selections</li>
<li>Interactive Demo – Collapsible TOC preview with hide/show functionality</li>
<li>Visual Feedback – Checkboxes with gradient backgrounds when selected</li>
<li>2-Column Layout – Settings on left, sticky live preview on right (desktop)</li>
<li>Responsive Design – Stacked layout on smaller screens</li>
</ul>
<h4>Future Architecture</h4>
<p>The admin interface is designed to accommodate upcoming features:</p>
<ul>
<li>Custom color schemes and typography options</li>
<li>Advanced CSS customization</li>
<li>Performance optimization controls</li>
<li>Analytics and tracking capabilities</li>
<li>Pre-built design templates</li>
<li>Multi-language support infrastructure</li>
</ul>
<h4>Suitable For</h4>
<ul>
<li>Long-form blog posts and articles</li>
<li>Documentation and knowledge bases</li>
<li>Educational content and tutorials</li>
<li>Product guides and manuals</li>
<li>Any content with multiple headings</li>
</ul>
<h3>Technical Details</h3>
<h4>File Structure</h4>
<p>toc-master/<br />
├── assets/<br />
│   ├── css/<br />
│   │   ├── style.css              (Frontend TOC styles)<br />
│   │   └── admin-premium.css      (Admin interface styles)<br />
│   └── js/<br />
│       ├── script.js              (Frontend functionality)<br />
│       ├── admin-settings.js      (Admin interface interactions)<br />
│       └── block.js               (Gutenberg block)<br />
├── includes/<br />
│   ├── class-toc-generator.php    (Core TOC generation logic)<br />
│   ├── class-toc-settings.php     (Settings page with UI)<br />
│   └── class-toc-block.php        (Gutenberg block registration)<br />
└── toc-builder.php                (Main plugin file)</p>
<h4>Admin Interface Architecture</h4>
<p>The settings pages use a component-based architecture:</p>
<ul>
<li>CSS Design System – CSS custom properties, modular components, responsive breakpoints</li>
<li>WordPress Sidebar Navigation – Individual pages for each settings section</li>
<li>Live Preview System – TOC rendering with dynamic heading selection</li>
</ul>
<h4>Color Palette</h4>
<p>Primary Colors:<br />
* Primary Gradient: #4F46E5 <span aria-hidden="true" class="wp-exclude-emoji">→</span> #7C3AED<br />
* Accent Cyan: #06B6D4<br />
* Accent Purple: #A855F7</p>
<p>Neutral Colors:<br />
* Gray Scale: #F1F5F9 <span aria-hidden="true" class="wp-exclude-emoji">→</span> #0F172A<br />
* Success: #10B981<br />
* Warning: #F59E0B</p>
<h3>Support</h3>
<p>For support, feature requests, and bug reports, please visit the plugin’s support forum on WordPress.org.</p>
<h3>Credits</h3>
<p>Developed with ❤️ for the WordPress community.</p>


TOC Builder by RobertIvan

A Table of Contents generator for WordPress with admin interface.

Stimulate Correct Headings vs TOC Builder by RobertIvan