The Progress Circle: Know How Far You’ve Gone
Nestled inside the floating reading controls panel, the progress circle is a refined SVG ring that tracks reading progress based on article headings (H2, H3). As readers scroll, the theme-colored arc gradually fills the ring — no bulky progress bar taking up space, just a small, elegant circle that says “you’re 67% through.”
A tooltip displays the exact percentage on hover, while the aria-label updates in real-time for screen readers. This design saves space while maintaining full accessibility.
TOC Dropdown: A Complete Map of the Article in One Click
Click the progress circle and a table of contents dropdown unfurls, listing the entire article structure — every section, every subsection, hierarchically indented. Click any item and smooth-scroll jumps straight to that exact passage via UIkit scroll.
The standout feature: the current section highlights in real-time as you scroll. The dropdown auto-updates — the dot indicator changes color, and the active item scrolls into view if it falls outside the visible area. Readers never get lost in a 5,000-word piece.
100% Client-Side: Fast, Lightweight, Server-Independent
The entire progress circle and TOC dropdown are created and powered entirely by client-side JavaScript, with zero PHP rendering. This means:
- Zero server load — all calculations happen in the reader’s browser
- No TTFB impact — the original HTML contains no extra markup
- Instant response — no AJAX waits, every interaction is native
The dropdown uses UIkit’s uk-dropdown component with flip and boundary, automatically repositioning to stay within the viewport whether readers use small screens or landscape tablets.
Zero Layout Shift on DOM Injection
To prevent Cumulative Layout Shift (CLS) — a critical Core Web Vitals metric — version 1.2.7 uses a data-init-toc="1" placeholder inside the reading controls panel. The JS module swaps this placeholder for the actual circle after DOM ready, ensuring the space is reserved upfront and content doesn’t jump around during load.
Flexible Control in Theme Settings
Admins get two new toggles under Theme Settings → Post Settings:
init_press_enable_toc_progress— Enable or disable the entire progress circle & TOC dropdown feature. Default is on.init_press_enable_inline_toc— Enable or disable the existing inline table of contents that appears at the top of single post content. Previously this was always-on with no way to disable; now admins have full control.
Both options work independently, allowing flexible combinations: circle only, inline TOC only, both together, or everything off if you prefer a minimal aesthetic.
Internationalization & Accessibility
All UI strings — from the dropdown title “Table of Contents” to the empty-state message — are fully internationalized following WordPress i18n standards. A ready-made Vietnamese translation ships with the theme. ARIA attributes like aria-expanded, aria-haspopup, and role="list" are properly set, ensuring a smooth experience for screen reader users.
Wrapping Up
Init Press 1.2.7 transforms every long-form article from an intimidating wall of text into a structured, navigable document. Readers always know where they are, how much remains, and can jump to any section in a single click. Update now to bring this professional reading experience to your audience.
Comments