In this post, I will show you a simple way to add a distraction-free “Reading Mode” to your blog. You can see the end result on this Reading Mode demo site (Click the highlighted “Reading Mode” link).
The purpose of adding a feature like this is to enable a visitor to remove all the clutter of your site, and focus solely on the post itself.
In an ideal world; there would never be a need for such a feature. In reality though, sites have numerous other goals to achieve, such as brand building, serving ads, promoting other content etc. In this way, you can compromise between the two. Do what you need when the user first arrives, but get out of the way when they decide what to read.
This script is also available as a free plugin on Github (Direct download link). No configuration needed, just upload and hit activate. Or feel free to fork and improve it.
The Method
The trick is simple. We will use Jack Moore’s awesome Colorbox plugin for jQuery to “pop out” the post and fade out the rest of the page when needed. Click the “Reading Mode” link here to see how this looks.
All we need to do is set some options for the plugin, and insert our link. We will create the link with JavaScript so that it won’t appear to search engines or RSS readers as part of your post’s content.
1 – Get the Files
The first step is to download the latest Colorbox files from here. When you open up the zip folder, you will get a folder structure like this:
The 5 example folders contain different styles that you can use for your Colorbox popup. Load up the index.html file in each folder and click a link to see how it looks.
- Copy the jquery.colorbox-min.js file from the ‘colorbox‘ folder into your theme’s /js/ folder (Create one if it doesn’t exist).
- Choose one of the example styles, and copy the colorbox.css file into your theme’s directory.
- In the same example folder, copy all of the /images/ files into your theme’s images directory.
As a sidenote; you may prefer to create a ‘colorbox’ directory in your theme’s directory instead, and put all of these files there. That’s what I would do personally, but for this tutorial, I’m following how the default TwentyEleven theme organizes itself.
2 – Queue the Files
Now, you have all the files you need for the script. The next step is to load them into your page. To do this, open your theme’s functions.php file (Create a file with that name if none exists) and paste the following before the closing ?> tag:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
/** * Queue Reading Mode scripts and styles. */ function pbd_rm_scripts() { if(is_single() ) : wp_enqueue_script( 'colorbox', get_bloginfo('template_directory') . '/js/jquery.colorbox-min.js', array('jquery'), '1.3.19', true ); wp_enqueue_script( 'pbd-reading-mode', get_bloginfo('template_directory') . '/js/pbd-reading-mode.js', array('jquery', 'colorbox'), '0.1', true ); wp_enqueue_style( 'colorbox', get_bloginfo('template_directory') . '/colorbox.css', array(), '1.3.19' ); endif; } add_action('wp_enqueue_scripts', 'pbd_rm_scripts'); |
This simply tells the theme about each of your files; the two Colorbox files and the reading-mode JavaScript file we’re going to create next. They will all be loaded in the site now, but only on single-post pages.
3 – Wrap Your Post Content in a Div
For Colorbox to know what counts as your post content, we need to have one element that contains that post, and nothing else. Some themes will already have this, but the class names vary from theme to theme. To make things simpler, we’re going to use a WordPress filter to add our own div around the_content.
Carrying on in functions.php, paste the following:
1 2 3 4 5 6 7 8 9 10 11 |
/** * On single posts, it wraps the content in div. */ function pbd_rm_content_filter($ content) { if(is_single() ) { $ content = '<div class="rm-content">'. $ content .'</div>'; } return $ content; } add_filter('the_content', 'pbd_rm_content_filter'); |
This filter runs every time your theme displays a post’s content. If the user is on a single post page, then our code will wrap a div with class .rm-content around it.
4 – Create the Link
With everything in place, you’re ready to set up your “Reading Mode” link. In your theme’s /js/ directory, create a new file named ‘pbd-reading-mode.js’, and paste the following into it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
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">View this post in <a href="#" class="reading-mode" rel="nofollow">Reading Mode</a>.</p>'; $ (selector) .prepend(html) .find('.reading-mode') .colorbox({ innerHeight: "80%", innerWidth: 700, inline: true, href: selector }); }); |
On line 4, you can set the selector for the element that wraps the post (No need if you’ve used the filter from step 3), and on line 7, you can customize the HTML for the “Reading Mode” link.
Line 10 adds that HTML to our content wrapping element (i.e. it creates the link). On line 12, we initiate Colorbox with options for its size, and specify its content as the wrapping element. You can read more about the possible options here on Colorbox’s site.
5 – Style It
At this point, you can save your work and try it out. The “View in Reading Mode” link should appear at the top of your posts, and clicking it should load the post content in a popup.
The last step is to add a little CSS to make that popup as legible as possible. Feel free to experiment with this, but here is what I have used:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
/** * Reading Mode */ #cboxLoadedContent > div { text-align: left; padding: 20px; font: 16px/24px Georgia, serif; width: 90%; } #cboxLoadedContent > div .rm-button { display: none; } #cboxLoadedContent > div p { margin-bottom: 24px; } #cboxLoadedContent > div h2 { font-size: 22px; margin-bottom: 24px; } #cboxLoadedContent > div h3 { font-size: 18px; margin-bottom: 24px; } #cboxLoadedContent > div h4 { font-size: 16px; margin-bottom: 24px; } |
Some notes on the CSS:
- I use #cboxLoadedContent > div to match the content wrapping element. This should make it a little more flexible than specifying a CSS classname.
- Line 11 is used to stop the “Reading Mode” link from appearing inside the popup.
- If you want to use your theme’s existing post styles, you can skip the filter and instead specify an element like .entry-content in the JavaScript. The element itself is moved into the popup, so all of its styles will then apply to the popup as well.
And that’s all there is to it. Not a lot of code, for a useful little feature. Let me know what you think. Is this sort of thing a good idea, or better avoided?
[plinker]
