TOC Builder by RobertIvan

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.

Core Features

• Auto-Detection – Automatically scans content for headings (H1-H6)
• Smooth Scroll – Animated scrolling to sections
• SpyScroll – Highlights the current section in the TOC while scrolling
• Gutenberg Ready – Includes a native block with live preview in the editor
• Configurable – Customize position, colors, heading levels, and more
• Performance – Assets loading and caching optimized
• Responsive – Compatible with desktop, tablet, and mobile devices

Admin Interface

TOC Builder by RobertIvan features an admin settings page for configuration:

Design System

• Gradient color scheme
• Animations and transitions
• Card-based layout
• System typography

WordPress Sidebar Menu Structure

• Dedicated Sidebar Menu – Menu in WordPress sidebar with a custom icon
• General Settings – Core TOC functionality with live preview
• Appearance Settings – Visual customization options (coming soon)
• Advanced Settings – Options for developers (coming soon)
• Premium Features – Planned functionality
• Bookmarkable URLs – Direct URLs for each section

User Experience

• Live Preview – Preview updates based on selected heading levels
• Heading Selection – Click on heading boxes (H1-H6) to toggle selection
• Visual Hierarchy – Preview shows TOC structure based on heading selections
• Interactive Demo – Collapsible TOC preview with hide/show functionality
• Visual Feedback – Checkboxes with gradient backgrounds when selected
• 2-Column Layout – Settings on left, sticky live preview on right (desktop)
• Responsive Design – Stacked layout on smaller screens

Future Architecture

The admin interface is designed to accommodate upcoming features:

• Custom color schemes and typography options
• Advanced CSS customization
• Performance optimization controls
• Analytics and tracking capabilities
• Pre-built design templates
• Multi-language support infrastructure

Suitable For

• Long-form blog posts and articles
• Documentation and knowledge bases
• Educational content and tutorials
• Product guides and manuals
• Any content with multiple headings

Technical Details

File Structure

toc-master/
├── assets/
│ ├── css/
│ │ ├── style.css (Frontend TOC styles)
│ │ └── admin-premium.css (Admin interface styles)
│ └── js/
│ ├── script.js (Frontend functionality)
│ ├── admin-settings.js (Admin interface interactions)
│ └── block.js (Gutenberg block)
├── includes/
│ ├── class-toc-generator.php (Core TOC generation logic)
│ ├── class-toc-settings.php (Settings page with UI)
│ └── class-toc-block.php (Gutenberg block registration)
└── toc-builder.php (Main plugin file)

Admin Interface Architecture

The settings pages use a component-based architecture:

• CSS Design System – CSS custom properties, modular components, responsive breakpoints
• WordPress Sidebar Navigation – Individual pages for each settings section
• Live Preview System – TOC rendering with dynamic heading selection

Color Palette

Primary Colors:
* Primary Gradient: #4F46E5 → #7C3AED
* Accent Cyan: #06B6D4
* Accent Purple: #A855F7

Neutral Colors:
* Gray Scale: #F1F5F9 → #0F172A
* Success: #10B981
* Warning: #F59E0B

Support

For support, feature requests, and bug reports, please visit the plugin’s support forum on WordPress.org.

Credits

Developed with ❤️ for the WordPress community.