About this plugin
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/
css (Frontend TOC styles)
css (Admin interface styles)
│ └── js/
js (Frontend functionality)
js (Admin interface interactions)
js (Gutenberg block)
├── includes/
php (Core TOC generation logic)
php (Settings page with UI)
php (Gutenberg block registration)
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
org.
Credits
Developed with ❤️ for the WordPress community.