cr8vstacks

<p><a href="https://cr8vstacks.com/dev-playground/cr8vstacks-table-of-contents/" rel="nofollow ugc">Official Plugin Homepage & Demo</a></p>
<p>Cr8vstacks Table of Contents automatically generates a polished, accessible table of contents for WordPress posts and pages. It builds links from your headings, adds stable anchors where needed, and gives readers a clearer way to move through long-form content.</p>
<p>The plugin includes four frontend layouts: Manuscript, Soft Editorial, Brutalist, and Minimalist. Each layout has its own header treatment, body structure, child-heading styling, reading progress style, and Hide/Show button design.</p>
<p>Cr8vstacks Table of Contents is built for Gutenberg and classic publishing workflows. It works with Block Editor headings, adds a Block Editor sidebar for per-post controls, includes a Classic Editor meta box, supports Quick Edit, and can be placed manually with the <code>[wptw_toc]</code> shortcode.</p>
<p>For SEO and content navigation, the plugin outputs crawlable anchor links and structured on-page navigation. This can help readers and search engines understand long articles, but it does not replace a dedicated SEO plugin for metadata, schema, sitemaps, or content scoring.</p>
<h4>Key Features</h4>
<ul>
<li>Auto-generates a TOC from selected heading levels, H2 through H6.</li>
<li>Preserves existing heading IDs when possible.</li>
<li>Adds generated anchors for headings that need them.</li>
<li>Configurable placement before the first heading, after the first paragraph, or shortcode only.</li>
<li>Four selectable layouts: Manuscript, Soft Editorial, Brutalist, and Minimalist.</li>
<li>Live dashboard preview using the same frontend stylesheet.</li>
<li>Color presets plus individual controls for card, header, links, numbers, progress, toggle, and back-to-top colors.</li>
<li>Typography controls for font stack, link size, child size, label size, reading time size, number size, label spacing, label transform, and border radius.</li>
<li>Reading time estimate with configurable words per minute.</li>
<li>Scroll reading progress indicator that matches the active layout.</li>
<li>Active-section highlighting and read/done states.</li>
<li>Sticky TOC header with configurable top offset.</li>
<li>Optional hierarchical numbering.</li>
<li>Optional back-to-top button.</li>
<li>Per-post controls for disabling the TOC, title, state, placement, numbers, sticky header, and reading time.</li>
<li>No remote font files are loaded; font choices use local or theme-available font stacks.</li>
<li>Frontend behavior does not require jQuery.</li>
</ul>
<h4>Layouts</h4>
<ul>
<li>Manuscript: dark editorial chapter style with timeline markers, amber progress, and depth-aware child links.</li>
<li>Soft Editorial: clean card layout with guided sections, completed-state checkmarks, and nested child rows.</li>
<li>Brutalist: bold dark layout with darker header, offset border extension, squared controls, and high-contrast active rows.</li>
<li>Minimalist: original clean light card layout for a simple classic TOC.</li>
</ul>
<h4>Gutenberg, Elementor And Per-Post Controls</h4>
<p>Cr8vstacks Table of Contents supports headings created in the WordPress Block Editor and Elementor page builder. The Block Editor sidebar and Elementor Page Settings panel let editors override TOC settings per post/page (such as disabling the TOC) without changing global defaults.</p>
<p>Per-post controls are also available in the Classic Editor meta box and Quick Edit. Manual placement is available through the Shortcode block or Elementor shortcode widget with <code>[wptw_toc]</code>.</p>
<h4>Design Controls</h4>
<p>The settings dashboard includes Visibility, Headings, Layouts, Display, Colours, Typography, and Advanced tabs. The live preview updates before saving so site owners can test layouts, color presets, typography, display options, progress indicators, and visibility behavior.</p>
<p>The Default color preset restores each layout’s native palette. Light, Dark, Ocean, Forest, and Rose presets can be customized through the same color controls.</p>
<h4>SEO And Content Navigation</h4>
<p>The plugin can help SEO indirectly by creating crawlable heading anchor links and clearer internal jump navigation for long-form content. Better structure can improve scanability and reader engagement. It does not manage meta titles, descriptions, schema, XML sitemaps, or keyword analysis.</p>
<h3>Shortcode</h3>
<p>Use <code>[wptw_toc]</code> anywhere in your content when Position is set to “shortcode only”. Layout, color, typography, display, and per-post settings still apply.</p>


Cr8vstacks Table of Contents

Customizable table of contents with layouts, live preview, active tracking, reading time, sticky headers, and per-post controls.

Prince

SoftLab

<p>Reader Mode Plugin adds a distraction-free reading experience for users by stripping away clutter and unnecessary elements from the article or post content. To achieve better readability, accessibility, and easy operations for your readers Reader Mode can be a handy choice.</p>
<p>Reader Mode adds a comfortable reading experience for the users by adding some useful features, such as Reader Mode layout, Estimated Reading Time, Translation, Text to Speech, Reading Progress Bar, and more.</p>
<p>To achieve better readability, accessibility, and easy operations for your readers Reader Mode can be a handy choice.</p>
<h3>VIDEO OVERVIEW</h3>
<p><iframe loading="lazy" title="Reader Mode - Distraction-Free Content Reader for WordPress Website!" width="750" height="422" src="https://www.youtube.com/embed/Z--ZC0ZPiGs?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe></p>
<p>👁️ <a href="https://demo.softlabbd.com/reader-mode" rel="nofollow ugc">View Demo</a> | 🚀 <a href="https://softlabbd.com/reader-mode/" rel="nofollow ugc">Get PRO</a></p>
<h3>READER MODE FEATURES</h3>
<ul>
<li><strong>Reader Mode Layout</strong> – Reader Mode adds a simple and clean content layout that is user-friendly, comfortable, more readable, more accessible, and easy to use for readers. Your website articles & posts can be turned into simple & interactive by using the Reader Mode layout. Reader Mode’s simple layout represents easy customizations of buttons style and text, translating over 100+ languages, multiple accents, and genders Text-to-Speech capability, reading time estimator, reading progress bar, and many other powerful features that improve your websites readability and accessibility better among users.</li>
<li><strong>Estimated Reading Time</strong> – Reader Mode adds a reading time estimation for the users to know how much time they need to read the post/ article. Reading time specified in minutes motivates users to read the post. It works great to give visitors a quick idea about the time needed to read a post and encourages them to go on till the end.</li>
<li><strong>Reading Progress Bar</strong> – Reader Mode adds a handy reading progress bar that works as an identifier for the users to know how much they read the post/ article. This lets readers know how far have they reached and how much more they have to go on.</li>
<li><strong>Specific Posts Types</strong> – The Reader Mode Layout, Text-to-Speech, Translation, Reading Time, and Reading Progress Bar can be enabled for only specific post types of your website.</li>
<li><strong>Multiple Display Positions</strong> – The Reader mode button, reading time, translation button, text to speech button, reading progressbar can be displayed in multiple positions. such as: Above the post title, Below the post title and Above the post content.</li>
<li><strong>Print Optimized</strong> – Reader Mode is print optimized for the users to print the whole post/ article. This operation can be operated with only one simple click. This allows your users to print the post content in a print-optimized layout without any unnecessary elements.</li>
<li><strong>Auto Scroll</strong> – Auto scroll feature is available in the reader mode for the users to scroll the post/ article automatically while they are reading the post/ article.</li>
<li><strong>Light/Dark Mode Theme</strong> – Reader Mode has a light/ dark mode theme for the users to choose the best one for their reading preference. Reader mode theme also can be changed based on the user\’s device light/dark theme.</li>
<li><strong>Custom Font Size</strong> – Reader Mode allows the users to customize the content font sizes depending on their needs and tests. Users can customize font sizes in small, medium, and large sizes to improve excessive readability.</li>
<li><strong>Full Screen Mode</strong> – Fullscreen reading mode is available in the reader mode for the users to read the post/ article in fullscreen. As the full-screen mode is readers friendly with fewer distractions, that is the reason Fullscreen mode is such useful.</li>
<li><strong>Table of Contents</strong> – Table of contents feature is available in the reader mode for the users to navigate to the specific section of the post/ article.</li>
<li><strong>Link List</strong> – All the links in the post/ article will be listed in the reader mode for the users to navigate to the specific link in the post/ article.</li>
<li><strong>Custom Button Alignment</strong> – The Reader Mode button, Text-to-Speech button, Translation button, Reading time button, and Reading progressbar can be customized with multiple alignments such as: Left, Center, and Right.</li>
<li><strong>Text-to-Speech (PRO)</strong> – Reader Mode adds a Text-to-Speech button both in the general mode and reader mode for the users to listen to the post/ article. With multiple accents & voice diversity, this feature takes users into a new era while they will play with the Text-to-Speech feature of the Reader Mode plugin. The Text-to-Speech function has the ability to listen to the post content in over 100+ accents & voices.</li>
<li><strong>Translation (PRO)</strong> – Reader Mode adds a translation button both in the general mode and reader mode layout. This function translates the whole post/ article into user preferred language. The translation function has the ability to translate the post content into over 100+ languages.</li>
<li><strong>Multiple Display options</strong> – The Reader mode button, Reading time, Translation button, Text to speech button, Reading progressbar can be displayed both in the General mode and Reader mode layout.</li>
<li><strong>Multiple Buttons & Styles</strong> – Highly customizable multiple buttons and styles are available to enable the Reader Mode, Translation, Text to speech, and Reading time features. As an admin, you have multiple eye catchy buttons to use depending on your website theme, color, and style.</li>
<li><strong>Custom Button Text & Size</strong> – You can customize the button text and size to match your website theme and screen size. This feature can be controlled in Reader Mode Layout, Text-to-Speech, Translation, Reading Time, and Reading Progress Bar. For a  better user experience, more readability, and more accessibility this function plays an important role.</li>
<li><strong>Custom Button Colors</strong> – The Reader Mode button, Text-to-Speech button, Translation button, Reading time button, and Reading progressbar can be customized with multiple colors.</li>
<li><strong>Custom Button Icon</strong> – The Reader Mode button, Text-to-Speech button, Translation button, Reading time button, and Reading progressbar can be customized with multiple image icons. You can also upload your own image as an icon with the button.</li>
<li><strong>Custom CSS</strong> – Reader mode layout can be customized by using custom CSS. If you (as admin) want to customize some elements implementing your expertise, you are allowed to do that by using custom CSS.</li>
</ul>
<h3>BASIC USAGE</h3>
<ul>
<li><strong>Reader Mode Layout</strong> – To display the distraction-free reader mode layout for the users you need to enable the Reader Mode button in the Reader Mode > Settings > General Settings page. After enabling the Reader Mode button, the Reader Mode button will be displayed in the post/ article based on the display options you have set in the settings.</li>
<li><strong>Text to Speech</strong> – To display the Text to Speech player for the users you need to enable the Text to Speech button in the <code>Reader Mode > Settings > General Settings</code> page. After enabling the Text to Speech button, the Text to Speech button will be displayed above the content based on the display options you have set in the settings.</li>
<li><strong>Translation</strong> – To display Translation button for the users you need to enable the Translation button in the Reader Mode > Settings > General Settings page. Users can translate the post content into their preferred language by clicking the Translation button into over 100+ languages.</li>
<li><strong>Estimated Reading Time</strong> – To display the Estimated post/ article Reading Time, you need to enable the Estimated Reading Time button in the Reader Mode > Settings > General Settings page. After enabling the Reading Time setting, It will be displayed above the content based on the display options you have set in the Settings page.</li>
<li><strong>Reading Progress Bar</strong> – To display the Reading Progress Bar you need to enable the Reading Progress Bar button in the Reader Mode > Settings > General Settings page. After enabling the Reading Progress Bar, the Reading Progress Bar will be displayed at the top or bottom of the page based on the display settings.</li>
</ul>


Reader Mode – Distraction-Free Content Reader

Distraction-free content reader with Reader Mode Layout, Text-to-Speech, Translation, Reading Time, and Reading Progress Bar.

Cr8vstacks Table of Contents vs Reader Mode – Distraction-Free Content Reader