Arunas Liuiza

<p>A tiny and simple to help with navigation in long texts by forming an automatic Wikipedia-like table of contents.</p>
<p>It works by scanning the text for headings (<code><h1>-<h6></code> HTML tags). If more than a certain amount of headings (3 by default) are found – a table of contents with bookmarks is formed and inserted to the post content. Location (above or below) the text can be chosen in settings page.</p>
<p>TOC is formed as HTML5 <code><nav></code> element with nested ordered list inside. No specific styling is provided, so that it fits organicaly into the text. If you need specific styling, include it to your theme’s CSS.</p>
<p>You can also use a shortcode – <code>[toc]</code>, template tags – <code>get_toc()</code>/<code>the_toc()</code> and a widget – <code>tinyTOC Widget</code>.</p>
<p>The plugin is translation ready and has Lithuanian translation.</p>
<p>Also try out my other plugins:</p>
<ul>
<li><a href="http://arunas.co/cc" rel="nofollow ugc">Content Cards</a> – a plugin that makes ordinary web links great by making it possible to embed a beautiful Content Card to link to any web site.</li>
<li><a href="http://arunas.co/gust" rel="nofollow ugc">Gust</a> – a Ghost-like admin panel for WordPress, featuring Markdown based split-view editor.</li>
<li><a href="http://arunas.co/tinycoffee" rel="nofollow ugc">tinyCoffee</a> – a PayPal donations button with a twist. Ask people to treat you to a coffee/beer/etc. </li>
<li><a href="http://arunas.co/tinysocial" rel="nofollow ugc">tinySocial</a> – a plugin to display social sharing links to Facebook/Twitter/etc. via shortcodes</li>
<li><a href="http://arunas.co/tinyrelated" rel="nofollow ugc">tinyRelated</a> – a plugin to manually assign and display related posts.</li>
<li><a href="http://arunas.co/tinyip" rel="nofollow ugc">tinyIP</a> – <em>Premium</em> – stop WordPress users from sharing login information, force users to be logged in only from one device at a time.</li>
</ul>
<p>An enormous amount of coffee was consumed while developing these plugins, so if you like what you get, please consider treating me to a <a href="http://arunas.co#coffee" rel="nofollow ugc">cup</a>. Or two. Or ten.</p>
<p>Cover image credit: <a href="https://www.flickr.com/photos/adactio/1523797880/" rel="nofollow ugc">Jeremy Keith</a></p>


tinyTOC

Automaticly builds a Table of Contents using headings (h1-h6) in post/page/CPT content.

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.

tinyTOC vs TOC Builder by RobertIvan