Adding Distraction Free Reading to WordPress

Remember when WordPress introduced distraction free writing, way back in 3.2? It’s an amazing feature, one that allows you to forget about everything else and focus on writing. But how about the readers?

If you’re a purist and like consuming your content with no side dishes of ads, latest posts lists, newsletter forms, social media widgets and what nots, you’re probably a fan of either Evernote’s Clearly, Pocket, Reeder or any other similar app. Not saying all side dishes are bad, just that sometimes ignoring them and focusing on nothing but content feels good and makes for a delicious “infomeal”.

So how difficult is it to add distraction free reading to your WordPress website and improve its visitors’ reading experience? Dead. Simple.

Here’s the game plan:

• Find a way to isolate post title and content (using add_filter WordPress function)
• Add distraction free reading toggle link (jQuery)
• When toggle link is clicked, show distraction free reading modal (jQuery)
• Style distraction free reading modal contents (CSS)
• When close link is clicked, it’s back to normal (jQuery)

Isolating Post Title and Content

What we need to do here is make it possible to target post title and content in a jQuery function. Since themes use different elements to display those two, we need to use add_filter function to wrap both title and content in divs we could then easily target:

// Wrap post title in a div
add_filter( 'the_title', 'thsp_dfr_title', 1 );
function thsp_dfr_title( $title ) {
	
	global $post;
	// We only want to do this for the post in main loop in single post view
	if( is_singular() && $title == $post->post_title && in_the_loop() ) {
		return '<h1 id="thsp-dfr-title">' . $title . '</h1>';
	}
	return $title;
	
}

// Wrap post content in a div
add_filter( 'the_content', 'thsp_dfr_content', 1 );
function thsp_dfr_content( $content ) {
	
	global $post;
	// Again, only do this in single post view
	if( is_singular() ) {
		/*
		 * New lines are necessary so WordPress wpautop would
		 * create the first paragraph
		 */
		return '<div id="thsp-dfr-content">' . "\n" . "\n" . $content . '</div>';
	}
	return $content;
	
}

Now we have #thsp-dfr-title and #thsp-dfr-content elements to work with, so let’s enqueue some JS and CSS files:

// Enqueue scripts and styles
add_action('wp_enqueue_scripts', 'thsp_dfr_styles');
function thsp_dfr_styles() {

	global $post;
	if( is_singular() ) {
		wp_enqueue_script(
			'thsp_dfr',
			plugins_url( '/js/distraction-free-reading.js', __FILE__ ),
			array( 'jquery' ),
			'v1.0'
		);
		
		wp_enqueue_style(
			'thsp_dfr',
			plugins_url( '/css/distraction-free-reading.css', __FILE__ ),
			array(), 
			'v1.0'
		);
	}

}

Adding Distraction Free Reading Toggle

Since distraction free reading won’t work with javascript disabled, we’re using jQuery to add toggler. It’s of no use to non-javascript users, no need to throw dead links at them.

// Add distraction free reading toggler
$('body').append('<a id="thsp-dfr-toggle" href="#">Distraction free reading</a>');

Add some basic CSS to the link element and we end up with this:

Distraction Free Reading Toggle

Switching to Distraction Free Reading Mode

Everything we need to make this happen is already there. A link to attach click function to – check, two elements with known IDs we can clone – check. So, let’s do it.

// Clicking toggle link
$('#thsp-dfr-toggle').click(function(){	
	// Add distraction free modal		
	$('body').append('<div id="thsp-dfr-overlay"><div id="thsp-dfr-wrapper"></div></div>');
	
	// Add post title to distraction free modal
	$('#thsp-dfr-title').clone().attr('id', 'thsp-dfr-title-cloned').appendTo('#thsp-dfr-wrapper');
	
	// Add post content to distraction free modal
	$('#thsp-dfr-content').clone().attr('id', 'thsp-dfr-content-cloned').appendTo('#thsp-dfr-wrapper');

	// Add close link to distraction free modal
	$('body').append('<a id="thsp-dfr-close" href="#">Close</a>');
	
	// Hide show modal link
	$(this).hide();

	return false;
});

// Clicking close link
$('#thsp-dfr-close').live('click', function(){	
	// Remove modal
	$('#thsp-dfr-overlay').remove();
	
	// Show distraction free toggle again
	$('#thsp-dfr-toggle').show();

	// Hide close modal link
	$(this).hide();
	
	return false;
});

So, here’s breakdown of what we’re doing here:

1. Adding two divs right before closing body tag
2. Cloning post title and content and adding them to the inner div
3. Removing toggle link
4. Adding another link that we’ll use to exit distraction free reading

Clicking that close link will remove the modal and close link itself and bring back link that activates distraction free reading mode.

Styling Distraction Free Reading Content

We need some CSS to position our modal and toggle link and give them some basic styling, so here it is:

/* 100% width and height element to hide site's regular look */
#thsp-dfr-overlay {
	background: #222;
	background: rgba(0,0,0,0.9);
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 50px 0;
	
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.admin-bar #thsp-dfr-overlay {
	/* Make it look good with admin bar */
	padding: 78px 0 50px;
}
/* Distraction free reading content wrapper */
#thsp-dfr-wrapper {
	background: #f9f9f9;
	width: 45em;
	max-width: 90%;
	margin: 0 auto;
	padding: 2em 3em;
	height: 100%;
	overflow: scroll;
	
	box-shadow: 0 0 2em rgba(0,0,0,0.8);
	-webkit-box-shadow: 0 0 2em rgba(0,0,0,0.8);
	-moz-box-shadow: 0 0 2em rgba(0,0,0,0.8);
	
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
/* Distraction free toggle and close buttons */
#thsp-dfr-toggle,
#thsp-dfr-close {
	position: fixed;
	bottom: 3px;
	right: 3px;
	z-index: 999;
	display: inline-block;
	background: #333;
	color: #fff;
	padding: 0.5em;
	border: 1px solid #fff;
	text-decoration: none;
}

Keep in mind this will only style the overlay and wrapper divs, not the content inside them. In Twenty Twelve theme, that will end up looking something like this:

Distraction free reading – unstyled content

Kind of has “long live Eric Meyer’s CSS reset” written all over it, so naturally, you’ll want to add some kick-ass typography CSS to make it look good. Luckily, creating specific enough CSS selectors that will override theme’s default CSS is easy, since our distraction free reading content is wrapped inside #thsp-dfr-overlay and #thsp-dfr-wrapper divs. After giving it a facelift (check project’s Github page for full CSS file), this is what we have:

Distraction free reading – styled content

Much better, but you know what they say…

Give a front-end developer some CSS and he’ll spend hours tweaking it, let a front-end developer write his own CSS and he’ll still spend hours working on it.

So feel free to make distraction free reading modal contents look as good or bad as you please 🙂

The plan is to develop this concept into a fully featured WordPress plugin, so if you’d like to join in and contribute, here’s project’s Github page.