Description
Long page. Clear direction.
Creotec Floating Table of Contents gives readers a small floating button that opens a structured list of your page headings. Search for a section, explore its subheadings, copy a link or jump straight to the part you need.
Choose inline contents or a desktop sidebar
Insert the Creotec Table of Contents block or use [creotec_toc title=”Article contents”] to place a heading tree inside your article. Inline contents share filters and anchors with floating navigation. Choose an optional left or right docked sidebar on wide screens, with automatic floating-button fallback below your chosen screen width.
Keep navigation clear of other controls
Reveal the floating button after a chosen scroll distance. Specify overlay CSS selectors to hide navigation while those panels are visible, or specify chat and cookie-banner selectors for automatic vertical button avoidance. The button hides temporarily if no safe position is available.
Make it feel at home
Choose any corner, adjust the spacing, select a list, book or compass icon, and match your button and accent colours. Choose light, dark or visitor-preferred modal styling. An interactive desktop/mobile preview lets you try changes before saving, with a text-contrast warning for difficult colour combinations.
Give mobile readers room
Use separate mobile positioning and spacing, an icon-only button and a bottom sheet or centred modal. Move the button away from chat widgets and cookie banners. Or disable it on mobile.
Show exactly what matters
Choose post types, exclude individual pages in the editor or by ID, and set a minimum heading count. Include selected H1–H6 levels from the main content, whole page or a custom selector. Exclude headings by text, selector or the no-toc class.
Help readers keep their place
The current section is highlighted and revealed when navigation opens. Readers can search headings, expand or collapse branches, copy section URLs, and follow their progress using an optional ring around the button icon. New headings are detected when content changes.
Free, private and self-contained
All features are included. No account, licence key, subscription, tracking, cookies or external services. No frontend framework or build step. Assets load only on pages allowed by your display rules. Navigation supports keyboard focus management, Escape dismissal and reduced-motion preferences.
Developed by Creotec. Setup and troubleshooting documentation is included with the plugin. See docs/compatibility.md for the tested configurations and limits; compatibility with every theme or plugin is not implied.
License
This plugin is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 2 of the License, or
(at your option) any later version.
This plugin is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
Credits
Developed and maintained by Michael Gbadebo @ Creotec Limited.
Screenshots
Blocks
This plugin provides 1 block.
- Creotec Table of Contents An inline heading tree sharing anchors with Creotec floating navigation.
Installation
- Upload the ZIP through Plugins > Add New > Upload Plugin, or copy the creotec-floating-table-of-contents directory to wp-content/plugins.
- Activate Creotec Floating Table of Contents.
- Open Settings > Floating Table of Contents.
- Choose display rules and appearance, try the live preview, and save.
- Visit a page containing at least two eligible headings. Clear any page/CDN cache after changing settings.
FAQ
-
Is anything locked behind a paid plan?
-
No. Every feature is free and works without registration.
-
Check the enable switch, post types, per-page exclusions, minimum heading count and mobile setting. By default the plugin uses main content and requires two visible headings. Password-protected pages, feeds, embeds and 404 pages are excluded. The theme must call wp_head() and wp_footer(). JavaScript and a browser supporting HTML dialog are required.
-
How is the heading tree structured?
-
Headings follow document order. Each heading nests under the nearest preceding heading of a lower level. Skipped levels create no empty entries. Hidden, empty and excluded headings are omitted. Main-content detection prefers .entry-content or .wp-block-post-content, then main or [role=”main”], then article, and finally the page body. Navigation, sidebars, footers and comment areas are excluded in automatic mode.
-
How do I exclude one heading?
-
Add no-toc to its Additional CSS class(es) field in the editor. Alternatively enter its exact title under Exclude heading text, or use an exclusion selector. Text matching ignores case.
-
Will section links work when opened directly?
-
Yes. Existing unique heading IDs are preserved. Missing IDs receive deterministic text-based anchors on page load, and direct fragment links are scrolled into view without opening the menu. Changing heading text or the order of identical headings can change generated anchors. For URLs that must remain stable after editing, assign an explicit HTML anchor in the editor. JavaScript is required for generated anchors. Headings in iframes and shadow DOM are not included.
-
What happens if clipboard access is blocked?
-
The modal displays a selected URL that the reader can copy manually. Clipboard copying requires a supported browser and a secure context, normally HTTPS.
-
What does reading progress measure?
-
It estimates scroll progress from the first eligible heading to the bottom of the selected content area. It does not measure reading time or comprehension. Content that fits entirely in the viewport is considered fully visible.
-
Will it work with a cache?
-
It builds the menu in the browser from rendered headings and does not store visitor-specific navigation state in cached HTML. Clear page caches after changing settings. If a performance tool delays JavaScript until interaction, exempt assets/widget.js if you need direct section links to resolve immediately.
-
Where can I get support?
-
Visit Creotec. Include the plugin version, WordPress/PHP versions, theme, relevant plugins, browser and steps to reproduce. Never send passwords or private content. Setup and troubleshooting guidance is linked from the settings page.
-
What happens when I uninstall?
-
Settings and page exclusions are retained by default. Enable Delete settings when uninstalling to remove this plugin’s settings and exclusions on deletion. Posts are never rewritten. On multisite, data handling is per site; see the support guide before network removal.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“Creotec Floating Table of Contents” is open source software. The following people have contributed to this plugin.
Contributors
Translate “Creotec Floating Table of Contents” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.1.0
- Added the Creotec Table of Contents editor block and [creotec_toc] shortcode with shared heading anchors.
- Added an optional docked desktop sidebar with configurable side and responsive width threshold.
- Added scroll-triggered button visibility, overlay selectors and automatic button collision avoidance.
1.0.2
- Revision number change.
1.0.1
- Keep the article in place when opening and dismissing the table of contents, including themes with full-height body layouts and hidden horizontal overflow.
1.0.0
- Initial release of Creotec Floating Table of Contents.