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

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

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

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.

Post Author: Slobodan Manic

I've been a WordPress developer since 2008 and love seeing how much it has progressed since I coded my first loop. If I'm not obsessing over keeping WordPress easy to use I'm most likely running or watching NBA games.

Disclosure: This page contains external affiliate links that may result in us receiving a comission if you choose to purchase said product. The opinions on this page are our own. We do not receive payment for positive reviews.
Got something to say? Join the discussion.
  1. AJ Clarke | WPExplorer says:
    AJ Clarke | WPExplorer
    Thanks for sharing this awesome tutorial Slobodan! Can't wait to see the fully functional plugin and give it a test ;)
    Admin
    • Slobodan Manic says:
      Always happy to contribute! You'll be among the first to know when plugin is available.
      Author
  2. Simply great!
    Contributor
  3. Good idea, could also use the Javascript full screen API to create something similar. http://www.sitepoint.com/html5-full-screen-api/
    • Slobodan Manic says:
      Definitely something that could make this better, thanks for that link Paul! I'll look into it in detail while working on the plugin.
      Author
  4. Dragan Nikolic says:
    I've used Clearly for some time and now I use both Pocket and Clearly. What about the responsiveness of "Distraction Free Reading"?
    • Slobodan Manic says:
      I guess you could say it's as responsive as David Stern was while responding to Latrell Sprewell's choking incident :)
      Author
  5. Wonderful idea, Slobodan. May I suggest removing 'return false', as that will bubble up through the DOM. More here: http://fuelyourcoding.com/jquery-events-stop-misusing-return-false/ So, something like this: // Clicking toggle link $('#thsp-dfr-toggle').click(function(e){ e.preventDefault(); // Add distraction free modal ....... // return false; }); // Clicking close link $('#thsp-dfr-close').live('click', function(e){ e.preventDefault(); // Remove modal ...... //return false; });
    • Slobodan Manic says:
      I'll be the first to admit I'm no javascript guru, but I'm working on it :) Thanks for the suggestion and helping me learn this. Really glad you liked the idea.
      Author
  6. Tom Ewer says:
    Awesome idea Slobodan!
    • Slobodan Manic says:
      Thanks Tom, I appreciate your comment. Really planning to expand this and turning it into something lots of people would find useful.
      Author
  7. Distraction Free reading helps to focus on content. Thanks for these code snippets.
  8. web maniac says:
    hai..sir, i don't have much grip on coding..but i can understand .The post you have shown for distraction free reading for wordpress is what i am looking for..thanks in advance ..But i am not understanding where to put all these codes or where to manuplate since there are no paths showing which file we have to edit.Can you help me with this ...I will be greatly thankful to you ...
    • AJ Clarke says:
      AJ Clarke
      This is a more advanced tutorial, if you aren't sure how to do it you should hire a freelancer to assist you.
      Admin

Leave a Reply