About this plugin
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.
Features
- Frontend Reader Mode for posts, pages, and selected public custom post types.
- Clean reading column with comfortable typography, spacing, and width.
- Reader Mode Toggle block for posts, pages, custom post types, and Query Loop templates.
- Shortcode support with [wpdfv].
- Optional automatic toggle placement before content, after content, or as a floating button.
- URL activation with?reader-mode=1.
- Visitor preferences for font size, theme, and content width saved in localStorage only.
- Optional reading progress indicator.
- Optional estimated reading time.
- Block-based Reader Mode templates for full site editing themes.
- Scoped Reader Mode custom CSS for administrators with the WordPress CSS editing capability.
- WordPress-components settings screen.
- Visitor controls to hide media, embeds, or comments while reading, with preferences stored in the visitor browser.
- Optional browser-based read-aloud controls.
- Structured public Reader Mode content for integrations, with opt-in discovery metadata.
- Per-content Reader Mode availability and template overrides.
- Lightweight frontend assets with no external tracking, telemetry, or third-party libraries.
Settings Overview
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.
- Enable Reader Mode for selected public post types.
- Toggle placement: manual only, before content, after content, or floating.
- Reading progress.
- Estimated reading time.
- Reader preference controls.
- Default reader theme: light, dark, or sepia.
- Default content width: narrow, default, or wide.
- Default font size: small, default, or large.
- Custom toggle label.
- Custom exit label.
- Reader Mode custom CSS.
- Reader template.
- Optional read-aloud controls and public discovery metadata.
Each public content editor can inherit the global Reader Mode settings or override availability and template choice for that item.
Automatic toggle insertion is disabled for new installs. Existing installs keep their previous automatic insertion behavior during upgrade unless it was already disabled.
Usage
Use the Reader Mode Toggle block in posts, pages, public custom post types, single templates, and Query Loop templates.
Use the shortcode:
[wpdfv]
Reader Mode can also open from the URL on enabled single content:
reader-mode=1
Setup and troubleshooting guide:
md
Template Customization
The Reader Mode content is rendered through block-based templates. The plugin registers a default Reader Mode layout and a WP Distraction Free View pattern category for block themes.
Themes and site-specific code can add templates with the wpdfv_modal_templates filter.
Template definitions accept a non-empty block-markup content string and optional label, description, category, and preview image and alt text. See the developer API guide for the structured content endpoint, WordPress Abilities API integration, template contract, and extension filters.