The Read More Without Refresh WordPress Plugin by George Gkouvousis is a free plugin that hides text passages with a shortcode. This simple plugin is great for hiding lengthy articles into a single, minimalist ‘tap-to-reveal’ button. While the plugin is easy to use, the lack of a settings panel to customise the button may render the plugin useless for many. With some tweaks to the plugin taught in this tutorial, the Read More Without Refresh WordPress Plugin will be a powerful add-on for your content-based site. Let’s take a look!

Digital Marketing and Design Blog - Style the WordPress Plugin Highlight - Read More Without Refresh WordPress Plugin - Leow Hou Teng

Read More Without Refresh WordPress Plugin

Read More Without Refresh WordPress Plugin Features

PROS:

  1. Easy Installation
    • Install the Plugin on WordPress and it will be ready for use without having to fiddle with any settings
  2. Supports shortcodes and easy to use
    • Place this [ read more=”Read more” less=”Read less” ] Your long text [ /read ] (Remove spacing between square brackets.)
  3. Clean design
  4. Customisable Text and with CSS
  5. Ability to hide any portion of the passage, rather than strictly hiding the rest of the article.

CONS:

  1. Shortcode Button is not added to the text editing panel for ease of use
    • Shortcodes have to be physically typed or pasted into the document.
  2. Does not have a settings panel to customise the colour of the button
  3. Easy-to-miss button due to minimal design

Why use a ‘Read More’ Button

For a user who has committed himself/herself to read a particular article, ‘Read More’ buttons might seem redundant and sometimes, annoying. This seems like a case of poor user-experience since a reader will have to click on an additional button to continue reading after indicating clearly his/her intention to read the article initially.

Continue Reading

Yet, ‘Read More’ buttons are becoming popular on major news sites including, Mashable, The New York Times, Huffington Post and Quartz. Does the increasingly common UI practice on these major news portals suggest the usefulness of these buttons?

Using a ‘Read More’ seems like a case of poor user-experience since a reader will have to click on an additional button to continue reading after indicating clearly his/her intention to read the article initially.

The article, Hide and Peek – Uncovering ‘Continue Reading’ Buttons by Cyber-Duck suggests the following point:

  • Robot Defence

      • The ‘Continue Reading’ button creates a barrier against content scrapers from stealing content on a website. While the description here seems pretty unclear, based on inspecting the HTML codes, one can assume that the text that is laid in between these codes, prevents bad bots from reading the article as a whole, hence creating a ‘robot defence’ barrier.
  • Good for Analytics

      • Getting users to click on an additional button confirms their intention to continue reading a page. When tied to data collection, marketers can judge the effectiveness of the opening passage in encouraging readers to continue reading the rest of the article. This will help in the overall improvement of the copy over time.
  • Faster Page Loading

      • As less content is revealed initially, web pages can load quicker, especially for pages with more images hidden at the bottom. With the use of lazy-loading, these images will only be loaded for users who want to continue reading the article.
  • Information Scent

      • A psychological theory that suggests users’ search for information is similar to how animals hunt for food. This has been adopted by content marketers to hint on great content being just a click away.
  • More context to social users

      • As articles are widely shared on social media, especially on Facebook, users who have clicked from social media posts may have only seen a snippet or a title of the article. Having an additional button to block off content allows users to return to their social feed quickly if the opening passage does not appeal to them.
  • Access to Other Content with Less Scrolling

      • Since the article is hidden, the web page runs shorter and thus provides a new opportunity for marketers to recommend other content to the user who may not be interested in the current article. Users may also be able to see the comments about the article at the end of the web page, hence increasing user engagement.
  • Adverts

    • Adding a ‘Continue Reading’ button increases the chance for users to see an advertisement placed within the hidden passage.

The most important reason to use a ‘Read More’ button is to allow web pages to load quicker since less content is revealed initially, while images hidden at the bottom will be loaded only after a person clicks on the button.

How to Use

To use the Read More Without Refresh WordPress Plugin, copy this [ read more=”Continue Reading” less=”Hide Passage” ] Your Text [ /read ]. (Remove spacing between square brackets). The text ‘Continue Reading’ and ‘Hide Passage’ can be changed according to individual preference.

Digital Marketing and Design Blog - Style the WordPress Plugin Highlight - Read More Without Refresh WordPress Plugin in Text Module - Leow Hou Teng

Place Codes in a Text Module

 

READ  4 Ways to Style Divi Block Quotes

Customising the Read More Without Refresh WordPress Plugin

Despite lacking in a settings panel to style Read More Without Refresh WordPress Plugin button, the plugin allows a user to define the attributes of the button with CSS. These attributes can be added to the class selector, read-link. As mentioned earlier, the current button does not capture a reader’s attention and may be skipped while browsing through the content. An option can be to style the button more like a button, rather than a link.

/*---read more without refresh wordpress plugin----*/
.read-link {
    border-bottom: none!important;
    margin: auto;
    margin-top: 15px;
    display: block;
    background-color: #119ad7;
    color: white !important;
    box-shadow: 0 5px 9px rgba(0,0,0,0.6);
    text-align: center;
}
.read-link:hover{
    border-bottom: none!important;
    background-color: #6dc8f1;
  -moz-transition: all 0.5s;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}

 

For Elegant Themes’ Divi user, copy the following code and add it to Divi Theme Options > Custom CSS. Other WordPress users may include it to their theme’s stylesheet.

Digital Marketing and Design Blog - Style the WordPress Plugin Highlight - Divi Custom CSS codes for Read More Without Refresh WordPress Plugin - Leow Hou Teng

Divi Custom CSS codes for Read More Without Refresh WordPress Plugin

 

Adding a Fade Out Effect to the Hidden Text

In order to be clear to users that the button hides text rather than bringing them to a new page, a fade out effect can be applied to the plugin.

Add these CSS codes to the WordPress theme’s stylesheet. This will add a white overlay, creating a ‘fade out’ effect. Change the colour accordingly if the site does not have a white background.

.read_div_overlay {
    top: 0px;
    height: 110px;
    position: absolute;
    width: 100%;
    background: -webkit-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80% );
    background-image: -moz-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80% );
    background-image: -o-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80% );
    background-image: linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80% );
    background-image: -ms-linear-gradient( rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 80% );
}

In WordPress, open the plugin editor and toggle to Read More Without Refresh plugin.

Digital Marketing and Design Blog - Style the WordPress Plugin Highlight - Read More Without Refresh WordPress Plugin Editor Codes - Leow Hou Teng

Plugin Editor Codes for Read More Without Refresh WordPress Plugin

In the Index.php, search for the following lines of code:

$new_string = '<span><a onclick="read_toggle(' . $rnum . ', \'' . addslashes($more) . '\', \'' . addslashes($less) . '\'); return false;" class="read-link" id="readlink' . $rnum . '" style="readlink" href="#">' . addslashes($more) . '</a></span>' . "\n";
  $new_string .= '<div class="read_div" id="read' . $rnum . '" style="display: none;">' . do_shortcode($content) . '</div>';

  return $new_string;
}

function read_javascript() {
  echo '<script>
  function expand(param) {
    param.style.display = (param.style.display == "none") ? "block" : "none";
  }
  function read_toggle(id, more, less) {
    el = document.getElementById("readlink" + id);
    el.innerHTML = (el.innerHTML == more) ? less : more;
    expand(document.getElementById("read" + id));
  }
  </script>';
}

 

Replace the codes with the following and the change will be visible on the website:

$new_string = '<span><a onclick="read_toggle(' . $rnum . ', \'' . addslashes($more) . '\', \'' . addslashes($less) . '\'); return false;" class="read-link" id="readlink' . $rnum . '" style="readlink" href="#">' . addslashes($more) . '</a></span>' . "\n";
  $new_string .= '<div class="read_div" id="read' . $rnum . '" style="height: 90px; overflow: hidden; position: relative;">' . do_shortcode($content) . '<div class="read_div_overlay" id="read_overlay' . $rnum . '" style="display: block;"></div></div>';

  return $new_string;
}

function read_javascript() {
  echo '<script>
  function expand(param) {
    param.style.height = (param.style.height == "90px") ? "100%" : "90px";
  }
  function overlay(param) {
    param.style.display = (param.style.display == "block") ? "none" : "block";
  }
  function read_toggle(id, more, less) {
    el = document.getElementById("readlink" + id);
    el.innerHTML = (el.innerHTML == more) ? less : more;
    expand(document.getElementById("read" + id));
    overlay(document.getElementById("read_overlay" + id));
  }
  </script>';
}

 

Hou Teng

Hou Teng

Art Director, Digital Marketing Strategist at LeowHouTeng.com
Hou Teng is a Singaporean graphic designer, specialising in both print and web. After graduating from Nanyang Technological University, School of Art, Design & Media, he has worked in advertising and launched an education startup as a side project. He has also worked briefly in a renovation start-up in Shen Zhen, China. While his strengths are in branding and layout design, he is also skilled in digital imaging, web design (HTML & CSS), WordPress content management and administration, search engine optimisation, and digital marketing.
Hou Teng