wp/plugin-table-of-contents
wp/plugin-table-of-contents
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity
No description
1 commit 1 branch 0 tags 50 KiB
  • JavaScript 50.2%
  • CSS 25.2%
  • PHP 24.6%
Find a file
Exact
Lasse Liebler d137906bf9 Initialized repo
2026-05-06 23:48:55 +02:00
assets Initialized repo 2026-05-06 23:48:55 +02:00
src Initialized repo 2026-05-06 23:48:55 +02:00
.gitignore Initialized repo 2026-05-06 23:48:55 +02:00
LICENSE Initialized repo 2026-05-06 23:48:55 +02:00
ll-table-of-contents.php Initialized repo 2026-05-06 23:48:55 +02:00
README.md Initialized repo 2026-05-06 23:48:55 +02:00

README.md

LL Table of Contents

A dynamic, scroll-aware table of contents for WordPress. This plugin automatically generates a TOC from headings in your content and displays it as a sleek, fixed-position dot navigation on desktop and a convenient, accessible toggle menu on mobile.

Features

  • Automatic TOC Generation: Scans your post content for <h2> headings and builds a table of contents.
  • Dual Navigation Modes:
    • Desktop: A minimalist, fixed "dot" navigation with hover-to-reveal titles and a scrollspy active state.
    • Mobile: An accessible, full-screen overlay menu activated by a fixed toggle button.
  • Smooth Scrolling: Clicking a TOC link smoothly scrolls the user to the corresponding section.
  • Scrollspy: The currently viewed section is automatically highlighted in the TOC as the user scrolls.
  • Lightweight & Performant: A single, small JavaScript file and a minimal CSS file handle all functionality. The plugin only loads its assets on singular pages (posts, pages, etc.) to ensure no unnecessary overhead.
  • Clean & Modern UI: The UI is designed to be unobtrusive and integrate well with modern WordPress themes.

How It Works

The plugin's JavaScript listens for the DOMContentLoaded event, then:

  1. Finds the main content area (.entry-content) and all <h2> headings within it.
  2. If headings are found, it dynamically builds two navigation menus: one for desktop and one for mobile.
  3. It injects these menus and the mobile toggle button into the <body> of the page.
  4. Event listeners are attached for smooth scrolling and for opening/closing the mobile menu.
  5. A scroll event listener powers the scrollspy feature, updating the active TOC item in real-time.

The plugin's PHP backend simply enqueues the necessary JavaScript and CSS files on is_singular() pages.

Architecture

  • ll-table-of-contents.php – Main plugin file, handles initialization.
  • src/Config.php – Defines plugin constants (PATH, URL, VERSION).
  • src/Plugin.php – Main class with hooks for enqueueing assets.
  • assets/js/ll-toc.js – All frontend logic for building and controlling the TOC.
  • assets/css/ll-toc.css – All styling for the desktop and mobile TOC.

All code uses LasLie\TableOfContents namespace.

License

GPLv3 | https://www.gnu.org/licenses/gpl-3.0.html

Author

Lasse Liebler | dev.laslie.de

Credits

  • AI-assisted development
  • Repository icon by SVG Repo on svgrepo.com