Prince

SoftLab

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.
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.
To achieve better readability, accessibility, and easy operations for your readers Reader Mode can be a handy choice.
<h3>VIDEO OVERVIEW</h3>
<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>
👁️ <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>
<h3>READER MODE FEATURES</h3>
<ul>
<li>Reader Mode Layout – 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>Estimated Reading Time – 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>Reading Progress Bar – 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>Specific Posts Types – 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>Multiple Display Positions – 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>Print Optimized – 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>Auto Scroll – 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>Light/Dark Mode Theme – 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>Custom Font Size – 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>Full Screen Mode – 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>Table of Contents – 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>Link List – 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>Custom Button Alignment – 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>Text-to-Speech (PRO) – 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>Translation (PRO) – 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>Multiple Display options – 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>Multiple Buttons & Styles – 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>Custom Button Text & Size – 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>Custom Button Colors – The Reader Mode button, Text-to-Speech button, Translation button, Reading time button, and Reading progressbar can be customized with multiple colors.</li>
<li>Custom Button Icon – 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>Custom CSS – 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>Reader Mode Layout – 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>Text to Speech – 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>Translation – 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>Estimated Reading Time – 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>Reading Progress Bar – 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.

Mehul Gohil

WP Distraction Free View adds a clean frontend Reader Mode to WordPress, helping visitors focus on your content without sidebars, widgets, navigation, and visual clutter.
WordPress core already includes distraction-free writing tools for the admin editor. This plugin is for the frontend visitor reading experience.
Use it to offer focused reading for posts, pages, and selected public custom post types. Visitors can open content in a polished Reader Mode overlay, use the Reader settings control in the modal header to adjust font size, switch between light/dark/sepia themes, choose a comfortable content width, print the reader view, or use browser fullscreen.
<h4>Features</h4>
<ol>
<li>Frontend Reader Mode for posts, pages, and selected public custom post types.</li>
<li>Clean reading column with comfortable typography, spacing, and width.</li>
<li>Reader Mode Toggle block for posts, pages, custom post types, and Query Loop templates.</li>
<li>Shortcode support with <code>[wpdfv]</code>.</li>
<li>Optional automatic toggle placement before content, after content, or as a floating button.</li>
<li>URL activation with <code>?reader-mode=1</code>.</li>
<li>Visitor preferences for font size, theme, and content width saved in localStorage only.</li>
<li>Optional reading progress indicator.</li>
<li>Optional estimated reading time.</li>
<li>Block-based Reader Mode templates for full site editing themes.</li>
<li>WordPress-components settings screen.</li>
<li>Lightweight frontend assets with no external tracking, telemetry, or third-party libraries.</li>
</ol>
<h4>Settings Overview</h4>
Go to Settings > Reader Mode to configure:
The settings screen is organized into About, Configure, and More Plugins tabs. Reader Mode configuration lives under Configure.
<ul>
<li>Enable Reader Mode for selected public post types.</li>
<li>Toggle placement: manual only, before content, after content, or floating.</li>
<li>Reading progress.</li>
<li>Estimated reading time.</li>
<li>Reader preference controls.</li>
<li>Default reader theme: light, dark, or sepia.</li>
<li>Default content width: narrow, default, or wide.</li>
<li>Default font size: small, default, or large.</li>
<li>Custom toggle label.</li>
<li>Custom exit label.</li>
<li>Reader template.</li>
</ul>
Automatic toggle insertion is disabled for new installs. Existing installs keep their previous automatic insertion behavior during upgrade unless it was already disabled.
<h4>Usage</h4>
Use the Reader Mode Toggle block in posts, pages, public custom post types, single templates, and Query Loop templates.
Use the shortcode:
<pre><code>[wpdfv]
</code></pre>
Reader Mode can also open from the URL on enabled single content:
<pre><code>https://example.com/my-post/?reader-mode=1
</code></pre>
<h4>Template Customization</h4>
The Reader Mode content is rendered through block-based templates. The plugin registers a default Reader Mode layout and a <code>WP Distraction Free View</code> pattern category for block themes.
Themes and site-specific code can add templates with the <code>wpdfv_modal_templates</code> filter.

WP Distraction Free View

Adds frontend Reader Mode so visitors can focus on posts, pages, and selected public post types.

Reader Mode – Distraction-Free Content Reader vs WP Distraction Free View