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

Mehul Gohil

<p><strong>WP Distraction Free View</strong> adds a clean frontend Reader Mode to WordPress, helping visitors focus on your content without sidebars, widgets, navigation, and visual clutter.</p>
<p>WordPress core already includes distraction-free writing tools for the admin editor. This plugin is for the frontend visitor reading experience.</p>
<p>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.</p>
<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>
<p>Go to <strong>Settings > Reader Mode</strong> to configure:</p>
<p>The settings screen is organized into <strong>About</strong>, <strong>Configure</strong>, and <strong>More Plugins</strong> tabs. Reader Mode configuration lives under <strong>Configure</strong>.</p>
<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>
<p>Automatic toggle insertion is disabled for new installs. Existing installs keep their previous automatic insertion behavior during upgrade unless it was already disabled.</p>
<h4>Usage</h4>
<p>Use the Reader Mode Toggle block in posts, pages, public custom post types, single templates, and Query Loop templates.</p>
<p>Use the shortcode:</p>
<pre><code>[wpdfv]
</code></pre>
<p>Reader Mode can also open from the URL on enabled single content:</p>
<pre><code>https://example.com/my-post/?reader-mode=1
</code></pre>
<h4>Template Customization</h4>
<p>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.</p>
<p>Themes and site-specific code can add templates with the <code>wpdfv_modal_templates</code> filter.</p>


Alternatives to WP Distraction Free View

Top alternatives