How To – Add Scroll Progress Bar to WordPress

By Zain 1 year ago
Home  /  How-To  /  How To – Add Scroll Progress Bar to WordPress

Scroll Progress Bar

For WordPress Blog Post


Scroll On

The scroll progress bar is an easy way to show users how far into an article they are. We recommend using the Reading Position Indicator plugin that can be found in the WordPress plugin directory.

Once you have installed the plugin, go to Appearance > Progress to configure the style, height & color.

Custom Placement

By default the plugin will show up on all pages. In our case, we only wanted the progress bar to show up on blog posts & portfolio entires. Luckily this is possible with a little bit of custom CSS code (see below).

.page #reading-position-indicator { display: none; }


Using the above code will hide the scroll bar on all page templates but not on posts.

If you need any assistance setting up or configuring a scroll progress bar on your site let us know. We’d be happy to help.




Join the conversation on Twitter

  How-To, Top Posts
this post was shared 0 times

Zain has been developing web & iOS software for over 10 years. He launched Rare Digital in 2011 to bring his technological expertise to small businesses. He has a knack for paying close attention to detail, problem solving, and creative design.