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.