Hot File

How To Build a Reading Mode in WordPress

View: 336    Dowload: 0   Comment: 0   Post by: hanhga  
Author: none   Category: WordPress template   Fields: Other

9 point/3 review File has been tested

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.

Introduction

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!

 

 

How To Build a Reading Mode in WordPress

How To Build a Reading Mode in WordPress Posted on 11-04-2016  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. 3/10 336

Comment:

To comment you must be logged in members.

Files with category

  • 11 Powerful Tips and Techniques in wordpress

    View: 413    Download: 0   Comment: 0   Author: none  

    11 Powerful Tips and Techniques in wordpress

    Category: WordPress template
    Fields: Other

    0/1 review
    Debugging is an essential skill for any developer. This tutorial will show you 11 powerful ways to debug WordPress and PHP errors.

  • MH Edition Lite Responsive WordPress Theme 2017 Free

    View: 546    Download: 6   Comment: 0   Author: none  

    MH Edition Lite Responsive WordPress Theme 2017 Free

    Category: WordPress template
    Fields: Other

    0/1 review
    MH Edition lite is a flexible and visually sophisticated WordPress theme for technology and news magazines. This magazine theme can transform your current WordPress website into a powerful and yet lightweight online magazine or dynamic news website...

  • Morning Monday Lite Responsive WordPress Theme Free

    View: 518    Download: 7   Comment: 0   Author: none  

    Morning Monday Lite Responsive WordPress Theme Free

    Category: WordPress template
    Fields: Other

    1.5/3 review
    Morning Monday Lite theme is designed for magazine with flexible layout. The theme is based on KOPATHEME layout manager technique that will let you flexibility choose layout options of every pages within your site.

  • How to Translate a WordPress Plugin Description

    View: 538    Download: 0   Comment: 0   Author: none  

    How to Translate a WordPress Plugin Description

    Category: WordPress template
    Fields: Other

    0.020325203252033/246 review
    If you’ve developed a useful plugin for WordPress, that’s great – but it’s even better if you make your plugin accessible to users speaking other languages.

  • Lovecraft Responsive WordPress Theme Free

    View: 437    Download: 1   Comment: 0   Author: none  

    Lovecraft Responsive WordPress Theme Free

    Category: WordPress template
    Fields: Other

    2/2 review
    Lovecraft is a beautiful two-column theme for bloggers. It features a responsive design, great typography, a full-width header image

  • Ascent Theme is a fully responsive WordPress theme

    View: 5019    Download: 0   Comment: 0   Author: none  

    Ascent Theme is a fully responsive WordPress theme

    Category: WordPress template
    Fields: Other

    4.5/1 review
    Ascent Theme is a fully responsive WordPress theme that looks elegant on any devices. It is simple, clean and lightweight WordPress theme based on the most modern technologies like HTML5 and CSS3.

  • Photolab Responsive WordPress Theme Free

    View: 523    Download: 0   Comment: 0   Author: none  

    Photolab Responsive WordPress Theme Free

    Category: WordPress template
    Fields: Other

    4/1 review
    Photolab theme echoes a flat design approach and a modern clean look perfect for creating an engaging blog. Its layout inspired by the latest trends underlines visual excellence of the theme without distracting from the content.

  • ZeroGravity is a simple and light WordPress theme

    View: 465    Download: 0   Comment: 0   Author: none  

    ZeroGravity is a simple and light WordPress theme

    Category: WordPress template
    Fields: Other

    4.5/1 review
    ZeroGravity is a simple and light WordPress theme with a clear and neat design. Some its features are: left sidebar or right, custom theme color (blue, green, orange, red, pink, yellow or purple), custom favicon, six different Google Fonts,...

 
Newsletter Email

File suggestion for you

File top downloads

logo codetitle
Codetitle.com - library source code to share, download the file to the community
Copyright © 2015. All rights reserved. codetitle.com Develope by Vinagon .Ltd