How To Add A Reading Progress Bar To WordPress Posts (No Plugins!)

Показать описание

✅ Boost Reader Engagement By Adding Progress Indicators to Your WordPress Blog Posts - WITHOUT plugins!

*********************************************************************************************

📽📌 Table of Contents 📽📌

0:09 Assumptions before we start
0:38 Lay of the land - What we'll be making
1:34 CSS styling for HTML elements
4:26 New PHP function
5:39 Create HTML elements (JS)
6:44 Add classes and ID name to HTML elements (JS)
7:38 Insert new HTML elements into the DOM (JS)
11:10 Calculate reading progress & style reading bar (JS)
16:45 Trigger reading progress bar update on user scroll (JS)
18:22 Wrap all JS in self-executing function (JS)
18:52 Only run JS when a post page is loaded (PHP)
21:05 Final result / Wrap-up

*********************************************************************************************

👉🏽 Video Description

“How long is this gonna take to read?!”

That’s the subconscious question every online visitor asks themselves before reading anything you, me, or anyone has ever published. We have a wide breadth of choice when it comes to the content we consume, and only so many precious minutes a day to do it.

Defining up front what’s required to consume your content provides potential readers with a finite framework from which to make a necessary time commitment.

And when it comes to boosting engagement on your blog, displaying reading progress indicators is a simple & easy way to encourage online visitors to:
+ Start reading your posts (because they indicate the time required up front)
+ Feel less overwhelmed by your long articles (because it helps people feel oriented within lengthy content).
+ Complete an article once started (because the finish line remains in constant sight).

In this video I show you how you can add a reading progress bar to your WordPress website using a little bit of HTML, CSS, PHP and JavaScript.

When you make things yourself with code, you have FULL CONTROL over the appearance and functionality of everything you make.

Get your hands dirty with some code and have fun being the master of your website!

Hope you enjoy 😀

*********************************************************************************************

👩‍💻 Developer Notes 👨‍💻

Challenge yourself! Write your reading progress bar JS in a separate JS file, upload it to your WordPress theme, and then enqueue the file on your post pages! 😃

*********************************************************************************************

Website & Hosting Packages:

Follow Nautilus Studio:

#wordpressreadingprogress #wordpressreadingprogressplugin #readingprogressbar