ReadBar – Reading Time & Progress Bar Plugin Documentation

Thank you for Choice ReadBar – Reading Time & Progress Bar. This documentation will guide you through the installation, setup, and usage of the plugin.

1. Introduction

ReadBar is a lightweight and highly customizable WordPress plugin that allows you to easily add an estimated reading time and a dynamic reading progress bar to your posts and pages. Enhance user engagement and improve the reading experience for your audience.

2. Features

• Estimated Reading Time: Automatically calculates and displays reading time for posts/pages.
• Reading Progress Bar: Visually indicates reading progress as users scroll.
• Customizable Design: Control colors, text alignment, font size, margin, and padding for reading time. Customize progress bar color.
• Flexible Positioning: Place reading time above title, above content, or below content. Progress bar can be top or bottom.
• Device Visibility Control: Independently control visibility for mobile, tablet, and desktop devices for both features.
• Post Type Selection: Choose which post types (e.g., Posts, Pages) will automatically display the reading time and progress bar.
• Reading Time Shortcode: Manually insert reading time anywhere on your site with flexible visibility and styling options.
• Lightweight & Optimized: Built with performance in mind, ensuring minimal impact on your site speed.
• SEO-Friendly: Does not interfere with your site’s SEO.
• Translation Ready: Compatible with WordPress internationalization standards.

3. Installation

There are two main ways to install the ReadBar plugin on your WordPress site:

3.1 Via WordPress Dashboard (Recommended)

1. Download: After purchasing, download the plugin .zip file from CodeCanyon to your computer.
2. Login: Log in to your WordPress admin dashboard.
3. Navigate: Go to Plugins > Add New.
4. Upload: Click on the Upload Plugin button at the top of the page.
5. Choose File: Click Choose File and select the read-bar.zip file you downloaded.
6. Install: Click Install Now.
7. Activate: Once installed, click Activate Plugin.

If you encounter the “The package could not be installed. The plugin contains no valid headers.” error, it means you likely uploaded the entire downloaded package. Unzip the package first, and then upload only the read-bar.zip file found inside.

3.2 Via FTP

1. Download: After purchasing, download the plugin .zip file from CodeCanyon to your computer.
2. Unzip: Unzip the read-bar.zip file on your local machine. This will create a folder named read-bar.
3. Connect: Connect to your web server using an FTP client (like FileZilla).
4. Navigate: Go to the wp-content/plugins/ directory in your WordPress installation.
5. Upload: Upload the entire read-bar folder (the one you unzipped) into the wp-content/plugins/ directory.
6. Activate: Log in to your WordPress admin dashboard, go to Plugins > Installed Plugins, and click Activate under “ReadBar – Reading Time & Progress Bar.”

4. Plugin Settings

Once activated, you can access the plugin settings by navigating to ReadBar in your WordPress admin menu.

The settings page is divided into three tabs: “Reading Time Settings”, “Progress Bar Settings”, and “Shortcode Guide”.

4.1 Reading Time Settings

This tab controls the display and appearance of the estimated reading time for your content.

Setting	Description	Default
Enable Reading Time	Check this box to enable the reading time feature.	Off
Reading Time Text Color	Select the color for the reading time text.	#000000
Reading Time Background Color	Select the background color for the reading time display.	#f1f1f1
Position	Choose where the reading time will automatically appear: Above Title: Displays above the post/page title. Above Content: Displays at the very beginning of the post/page content. Below Content: Displays at the very end of the post/page content.	Below Title
Text Alignment	Align the reading time text (Left, Center, Right).	Left
Words per Minute	Set the average reading speed (words per minute). This affects the estimated time. (Range: 50-1000)	200
Reading Time Bar Visibility	Control visibility on different devices: Mobile: Show/Hide on mobile devices. Tablet: Show/Hide on tablet devices. Desktop: Show/Hide on desktop devices. Note: The shortcode can override these device visibility settings.	All On
Display on Post Types	Select which post types (e.g., Posts, Pages) will automatically display the reading time.	All Public Post Types (excluding attachments)
Reading Time Prefix	Text to display before the reading time number (e.g., “Reading Time:”).	Reading Time:
Reading Time Postfix	Text to display after the reading time number (e.g., “min read”).	min read
Font Size	Set the font size for the reading time text. Includes unit selection (px, em, %, rem).	14px
Margin	Control the outer spacing around the reading time block (Top, Right, Bottom, Left). Includes unit selection (px, em, %, rem).	0px 0px 10px 0px
Padding	Control the inner spacing within the reading time block (Top, Right, Bottom, Left). Includes unit selection (px, em, %, rem).	5px 10px 5px 10px

4.2 Progress Bar Settings

This tab manages the settings for the reading progress bar.

Setting	Description	Default
Enable Progress Bar	Check this box to enable the reading progress bar.	Off
Progress Bar Color	Choose the color of the progress bar.	#0073aa
Progress Bar Position (Mobile)	Where the progress bar will stick on mobile devices (Top or Bottom of the viewport).	Top
Progress Bar Position (Tablet)	Where the progress bar will stick on tablet devices (Top or Bottom of the viewport).	Top
Progress Bar Position (Desktop)	Where the progress bar will stick on desktop devices (Top or Bottom of the viewport).	Top
Progress Bar Visibility	Control visibility on different devices: Mobile: Show/Hide on mobile devices. Tablet: Show/Hide on tablet devices. Desktop: Show/Hide on desktop devices.	All On
Display on Post Types	Select which post types (e.g., Posts, Pages) will display the progress bar.	All Public Post Types (excluding attachments)

4.3 Shortcode Guide

This tab provides a quick reference for using the Reading Time shortcode.

5. Screenshots

Below are screenshots illustrating the plugin’s settings and frontend display.

6. Shortcode Usage

The

shortcode allows you to display the reading time for any post or page content, giving you fine-grained control over its visibility and alignment, overriding the global plugin settings.

Basic Usage:

To display the reading time using the default settings configured in your plugin’s admin panel (except for device visibility and alignment, which can be overridden by shortcode parameters), simply use:

Reading Time: 9 min read

Important Note: The shortcode will only display the reading time if the “Enable Reading Time” option is checked in your plugin’s main settings. All other styling (margins, padding, prefix, postfix) will be applied from your plugin’s settings page, unless overridden by shortcode parameters.

Optional Parameters:

You can customize the shortcode’s behavior using the following optional parameters:

Parameter	Description	Values	Example
show_on	Control visibility on specific devices. Completely overrides global visibility settings.	"desktop", "tablet", "mobile" (comma-separated)	Reading Time: 9 min read
align	Set text alignment. Overrides global alignment settings.	"left", "center", "right"	Reading Time: 9 min read
font_size	Override font size.	Number (e.g., "16" for global unit) or full CSS value (e.g., "1.2em", "18px")	Reading Time: 9 min read
text_color	Set text color.	Hex code (e.g., "#FF0000") or standard CSS color name (e.g., "red")	Reading Time: 9 min read
bg_color	Set background color.	Hex code (e.g., "#000000") or standard CSS color name (e.g., "black")	Reading Time: 9 min read
content	Provide custom content for reading time calculation instead of the current post’s content.	Any string of text	Reading Time: 1 min read

Where to use it:

• In Post/Page Content: Paste the shortcode directly into your post or page editor (classic editor or a Shortcode block in the block editor).
• In Widgets: Use a “Text” or “Custom HTML” widget and paste the shortcode. It will display the reading time of the post or page currently being viewed (unless custom content is provided).
• In Theme Files (PHP): If you want to hardcode it into your theme templates (e.g., single.php, content.php), use the following PHP snippet:

  <?php echo do_shortcode('
  Reading Time: 9 min read
  '); ?>

  You can also pass parameters in PHP:

  <?php echo do_shortcode('
  Reading Time: 9 min read
  '); ?>

7. Frequently Asked Questions (FAQ)

Q: My reading time or progress bar is not showing. What should I do?

A: First, ensure that both the “Enable Reading Time” and “Enable Progress Bar” options are checked in their respective settings tabs. Also, check the “Display on Post Types” and “Visibility” settings to ensure they are configured for the content type and device you are viewing on. If you’re using the shortcode, ensure the “Enable Reading Time” option is checked globally.

Q: Can I use the reading time shortcode multiple times on one page?

A: Yes, you can. Each shortcode instance will display based on its own parameters or fall back to global settings for non-overridden parameters. This allows for different styles/visibility of the reading time on the same page.

Q: Is the plugin compatible with [specific theme/page builder]?

A: ReadBar is built using standard WordPress APIs and should be compatible with most themes and page builders. If you encounter any conflicts, please reach out to support.

Q: How accurate is the reading time calculation?

A: The reading time is an estimate based on the words per minute setting. It calculates the word count of the main content and divides it by your configured WPM. Factors like images, videos, and complex diagrams are not accounted for in word count, so it’s always an approximation.

8. Support

We are committed to providing excellent support for ReadBar. If you encounter any issues, have questions, or need assistance, please use the CodeCanyon comments section or open a support ticket via our website: Contact US.

When contacting support, please provide the following information:

• Your WordPress version.
• Your ReadBar plugin version.
• A detailed description of the issue.
• Any error messages you are seeing.
• Steps to reproduce the issue.
• Your website URL (if applicable).

9. Changelog

Version 1.0.0 – June 3, 2025

• Initial Release.
• Estimated Reading Time feature.
• Reading Progress Bar feature.
• Customizable settings for colors, positions, visibility.
• Reading Time shortcode.

Thank you for choosing ReadBar!