How To (and Why You Should) Build a Reading Mode in WordPress

Justyn Hornor
Justyn Hornor
Share

A “reading mode” as I define it is an optional minimalist view that website visitors can use to view your post content. What I’ve put together is ultra-minimalist — it’s nothing but the content: no sidebar, and no ads. It’s touch-sensitive and responsive, so mobile users won’t have any problem using it. I also added a font size increase and decrease feature. So, what brought about this inspiration for this reading mode? I recently had a client that spent a small fortune to get all of his advertisements set up in the sidebar and header of the site, only to later request something totally different — a simplified reading mode. I thought this was a strange request considering all the money spent on ad block development, but the contrast and focus on content has had a major positive impact on the site.

Why Would I Want a Reading Mode?

First of all, people are in fact taking advantage of this reading mode on my client’s site, and users are staying on the site a lot longer than those who do not, suggesting that people who take advantage of this feature tend to consume a lot more content compared to average users who don’t use the reading mode. Second, ad revenues didn’t drop off — they increased. Since people were staying on the site longer, they developed more trust and apparently clicked or responded to more ads than before. Further, traffic tracking showed that users of the reading mode ended up coming back much more frequently. The reading mode added significant value to them — they preferred consuming content at this site and returned to get more.

There’s a Plugin for That Now

Sound too good to be true? I’ll sweeten the deal even more — I made a free reading mode plugin that can only be found here on DesignFestival
(for now). Eventually, you’ll see this in the plugin repository over at WordPress.org. Just download this file, upload it using “Plugins” -> “Add New” within WordPress administration, and activate it. You’ll see the “View in Reading Mode” at the top of all your posts, but not on your pages.

Props Where Props Should Go

Before jumping into the nuts and bolts of how to customize this plugin for your WordPress site, this is built around the amazing work of Jack Moore, who developed the ColorBox jQuery lightbox. So, check out his documentation, because my plugin builds on this and gives you access to all his useful tools as well. There is a load of documentation and support for ColorBox, as well as a community of users. This was a natural fit for the reading mode back end, since it would support so many features above and beyond my basic needs.

Customizing the Reading Mode Button

The reading mode button design is controlled by CSS. Within the plugin folder, cruise to the CSS sub-folder and open up the colorbox.css file. The class for the button is rm-button, and the colors can be fully customized. Starting on line 90: [sourcecode language=”css” firstline=”90″] /* Reading Mode Button */ .rm-button { border-top: 1px solid #000000; background: #4d4d4d; padding: 5px 10px; -webkit-border-radius: 8px; -moz-border-radius: 8px; border-radius: 8px; color: white; font-size: 22px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; text-align:center; vertical-align: middle; width:220px; max-width:90%; } .rm-button:hover { border-top-color: #bdbdbd; background: #bdbdbd; color: #171717; } .rm-button:active { border-top-color: #000000; background: #000000; } .rm-button a:link, a:visited { text-decoration:none; font-size: 22px; font-family: Helvetica, Arial, Sans-Serif; text-decoration: none; vertical-align: middle; color:#fff; } [/sourcecode] Note that on line 104 and 105 is where you can adjust the size of the button and tweak how it works responsively.

Changing the Width of the Reading Mode

The reading mode window itself is tougher to work with. You’ll need to work with the jquery.colorbox.js JavaScript file. (Note: There is a minified version available of the ColorBox jQuery, but it’s much more difficult to edit.) In the jquery.colorbox.js file, found within the “js” subfolder of the plugin, you can find the size of the default window on line 13: [sourcecode language=”javascript” firstline=”10″ highlight=”4″] defaults = { transition: “elastic”, speed: 300, width: “85%”, initialWidth: “600”, innerWidth: false, maxWidth: false, height: false, initialHeight: “450”, innerHeight: false, maxHeight: false, scalePhotos: true, scrolling: true, inline: false, html: false, iframe: false, fastIframe: true, photo: false, href: false, title: false, rel: false, opacity: 0.9, preloading: true, [/sourcecode] You can use pixels or percentages, just make sure to keep the double quotes.

Customizing the Text Resizer Buttons

In an effort to keep the plugin as simple as possible and the reading mode as functional as possible, I used text-based buttons to control the size of the font. You can add images by editing the image-sizer.js file on line 7: [sourcecode language=”javascript” wraplines=”true”] jQuery(document).ready(function($) { // Set this to the CSS selector of the element that wraps your post content. // e.g. .entry or .entry-content var selector = ‘.rm-content’; // The HTML for your “View This in Reading Mode” link. var html = ‘<p class=”rm-button”><a href=”#” class=”reading-mode” rel=”nofollow”>View in Reading Mode</a></p><p class=”rm-sizes”><a href=”javascript:void(0);” onclick=”resizeText(1)” id=”plustext”>Make text bigger</a> | <a href=”javascript:void(0);” onclick=”resizeText(-1)” id=”minustext”>Make text smaller</a><p>’; $(selector) .prepend(html) .find(‘.reading-mode’) .colorbox({ innerHeight: “80%”, innerWidth: “40%”, inline: true, href: selector }); }); [/sourcecode] Instead of the text, drop whatever image you want to use into the folder (or a sub-folder) with the JS file and link as you would using:
<img src="#" />
Let me know what you think of the reading mode and what other features would make this even more valuable for your readers!

Frequently Asked Questions (FAQs) about Creating a Minimalist Reading Mode in WordPress

How can I enable a minimalist reading mode on my WordPress site?

Enabling a minimalist reading mode on your WordPress site involves a few steps. First, you need to install and activate a suitable plugin. One such plugin is WP Reading Mode, which is easy to use and offers a minimalist reading mode. After activating the plugin, you can customize the settings to suit your preferences. You can choose the background color, font size, and other features to create a distraction-free reading environment for your users.

Can I customize the appearance of the reading mode on my WordPress site?

Yes, you can customize the appearance of the reading mode on your WordPress site. Most plugins offer a range of customization options, including changing the background color, adjusting the font size, and choosing the display position. You can experiment with these settings to create a reading mode that aligns with your site’s design and meets your users’ needs.

Is it possible to disable the reading mode on specific posts or pages?

Yes, it’s possible to disable the reading mode on specific posts or pages. Most plugins provide an option to exclude certain posts or pages from the reading mode. You can usually find this option in the plugin’s settings page. By excluding specific posts or pages, you can ensure that the reading mode only appears where it’s most beneficial.

How does a minimalist reading mode benefit my site’s users?

A minimalist reading mode can significantly enhance your users’ reading experience. It removes unnecessary distractions, allowing users to focus solely on the content. This can be particularly beneficial for long-form articles or posts with complex information. By improving the reading experience, you can increase user engagement and potentially boost your site’s performance.

Can I use a minimalist reading mode on a mobile device?

Yes, a minimalist reading mode can be used on mobile devices. Most plugins are responsive, meaning they automatically adjust to fit the screen size of the device being used. This ensures that users can enjoy a distraction-free reading experience, whether they’re using a desktop computer, a tablet, or a mobile phone.

Does a minimalist reading mode affect my site’s SEO?

A minimalist reading mode should not negatively impact your site’s SEO. The reading mode is a user-facing feature and does not alter the underlying content or structure of your site. However, by improving the user experience, a reading mode could potentially have indirect positive effects on your site’s SEO.

Can I add a minimalist reading mode to my site without a plugin?

Adding a minimalist reading mode to your site without a plugin would require custom coding. This could involve modifying your site’s CSS and JavaScript, which can be complex and time-consuming. Unless you have advanced coding skills, using a plugin is the easiest and most efficient way to add a reading mode to your site.

Are there any potential downsides to using a minimalist reading mode?

While a minimalist reading mode can enhance the user experience, it’s not suitable for all types of content. For example, if your site relies heavily on images, videos, or other visual elements, a reading mode could strip away these elements and diminish the overall impact of your content. It’s important to consider your site’s specific needs and audience before implementing a reading mode.

How can I encourage my users to use the reading mode?

You can encourage your users to use the reading mode by making it easily accessible and promoting its benefits. Consider adding a prominent button or link to enable the reading mode, and explain how it can enhance the reading experience. You could also use pop-ups or notifications to promote the feature to new users.

Can I track how many users are using the reading mode?

Some plugins may offer built-in analytics to track usage of the reading mode. If not, you could potentially use a tool like Google Analytics to track user interactions with the reading mode button or link. This can provide valuable insights into how your users are engaging with your content and help you optimize the reading mode for your audience.