Add a "Reading Mode" to your Blog

You may have seen it around the web. It’s the function that takes all those cluttered pages of articles floating around the web, with their obtrusive ads and headers and footers, and simplifies it, so all you have to sort through is the attractively simple article in its most basic, text and picture form. This can be done with external services such as Readability, a Chrome extension, or, in certain cases, on news applications such as News360. That’s all well and good, but you’re a web developer/blogger. You want to do it yourself, make it part of your site, integrate it for ease of use. Let’s get started.
If you want to take the easy way out, you can download this function as a plugin from Github. (Direct download link) Just upload and activate.

How It’s Done

The method behind the function is actually pretty simple. We’re going to use Jack Moore’s Colorbox plugin to make the post pop out while the rest of the page fades out. All we need to do is set some options and insert our JavaScript-created (so the link doesn’t show up as part of the post’s content) link.

1. Download the Plugin

Download the files from here. The zip folder will look like this:

Each example folder contains a different style for you to use. Loading the index.html file in each folder will show you what they look like.

Now, copy the jquery.colorbox-min.js file from the ‘colorbox‘ folder into the /js/ in your theme. Then, choose an example and copy the colorbox.css into your theme’s directory. Also copy all of the /images/ files from the example folder into your theme’s images directory. You may prefer to just make a ‘colorbox’ folder in your theme’s folder and put all the files there.

2. Queue the Files

Now you need to load all the files into your page. Open up your theme’s functions.php file and paste the following before the closing ?> tag:

/**
 * 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 just tells your site about all of your files; the Colorbox files and the Javascript file we’re going to create next.

3. Wrap Your Post Content in a Div

You need to have your post contained in one element for Colorbox to reference. Some themes might already have this, but the class names vary from theme to theme. For simplicity, we’re just going to use a WordPress filter to add a div around the content.

Paste the following into functions.php:

/**
 * On single posts, it wraps the content in div.
 */
function pbd_rm_content_filter($content) {
	if(is_single() ) {
		$content = '<div>'. $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 the class .rm-content around it.

4. Creating the Link

Now we can set up the “Reading Mode” link. In your theme’s /js/ directory, create a new file named ‘pbd-reading-mode.js’ and paste the following into it:

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 = '

View this post in Reading Mode.

';

	$(selector)
		.prepend(html)
		.find('.reading-mode')
		.colorbox({
			innerHeight: "80%",
			innerWidth: 700,
			inline: true,
			href: selector
		});
});

You can set the selector for the element that wraps the post on line 4. (If you used the filter above, you don’t need to do anything with that.)

Line 10 adds the wrapped HTML to our content wrapping element.

Line 12 initiates Colorbox with options for its size, and specifies its content as the wrapping element.

5. Styling It

Now it should work. The “View in Reading Mode” links should show up at the top of your posts. Now we just need to add some CSS to make the popup as legible as possible. You can use the CSS below or play around with the styling:

/**
 * 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;
}

The #cboxLoadedContent > div is used to match content wrapping element. This should make it a little more flexible than specifying a CSS classname.

Line 11 stops the “Reading Mode” link from appearing in the popup.

If you want to use your theme’s 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.

(Info from: Pro Blog Design)