How to Show a Reading Progress Bar in WordPress

As we all know, WordPress is a popular CMS to create and maintain amazing websites. But what WordPress is best at is blogs. By default, WordPress is outfitted with the options to create and edit posts. 

It also has a built-in comment system so your readers can comment on each post. But the default posting design and style sometimes need some enhancement for the purpose of the blog. Gutenberg block plugins and themes help with that.

If you publish articles, especially long form ones, that needs some extra care. You must keep the readers engaged with your post.

It’s challenging to keep the readers engaged. They may jump out from your site when they find out that the post keeps going and going. Giving a sense of progress can be very helpful here. A reading progress can be super helpful in this case.

What is a reading progress bar and why you may want it

A reading progress bar is a progression bar that fills up as you scroll through a post or a page. It basically indicates how much of the content is left and how much you have scrolled through. This can be a great help to the audience since it gives them a sense of accomplishment. 

So now the question might come why do you need a reading progress bar on your posts. Well, apart from making your website look ultra-modern and stylish, it has some other benefits as well. It increases the ‘Dwell Time’ of your posts.

The term ‘Dwell Time’ is used by Google to determine how long your visitors spent on your website. It is much like the ‘Bounce Rate’ which is basically used to determine if your visitors found your content useful.

As we’ve hinted earlier, adding a reading progress bar gives your readers an idea of how much content they have scrolled through and how much of the content is left. It could also serve the purpose of a pointer or indicator. 

This could help your readers find the point they were reading if they left the page before finishing. However, there is no default way to display a progress bar on WordPress. 

We can achieve this by using a plugin. For a content focused site, PostX is the plugin we’re looking for.

PostX is developed by WPXPO. It is a robust WordPress plugin that offers tons of Gutenberg blocks and addons to make your posts look amazing. It also gives you a handful of pre-built designs that you can use and setup a beautiful blog within minutes. 

WPXPO always keeps PostX updated with the latest design trends to give you and your readers the best experience.

PostX has a reading progression bar feature which we’ll be using in this tutorial.

How to add a reading progress bar in WordPress

So, here we go! Let’s see the step by step process on how to show a progress bar on your WordPress posts and pages.

Step 1: Install and activate PostX Pro

Before continuing we must say that the reading progress bar is only available on the pro version of PostX. If you want to access more powerful features like the reading progress bar, I would recommend purchasing PostX Pro. It gives you tons of different options to style your posts and make them look amazing.

There are way too many features to talk about in the Pro version. You can learn more details from our dedicated PostX review.

Let’s continue with our article and see how you can install and activate PostX. We will also discuss how to enable and customize the PostX progress bar on your posts.

To install PostX pro you need the free version of PostX to be installed and activated on your WordPress website. 

You can install PostX just like any other plugin. You can install it from your WordPress dashboard, or you can download it from wordpress.org. 

Since the reading progress bar is a pro feature, you need to purchase and activate your PostX pro license. If you are having difficulty activating the pro version of your PostX you can refer to the PostX documentation.

Step 2: Enable progress bar in PostX

The PostX progress bar is an addon and you can access it from PostX > Addons. From the addon section, enable the progress bar addon. 

Now, you can use the progression bar on your posts and pages. Let’s see how you can customize your progress bar.

Step 3: Customize the progress bar

When you enable the progress bar, it will have the default settings. You can customize the design of the progress bar. To do that, go to PostX > Settings > Progress bar. From here you can customize the progress bar’s look and feel.

You can change the height, color, and position of the progress bar from here. You can also indicate where your progress bar will be set including standard WordPress pages and custom post types.

Once you are happy with your customization, click on the ‘Save Changes’ button to apply your changes. And that is how you can create a reading progress bar in WordPress.

👉 Get PostX Plugin (Lifetime Deal Available)!
🎉 Use coupon code WPGIZ10 for exclusive discount! 🔥

What more you get with PostX Pro

Previously we’ve referred to a PostX review article, where we discussed various features of the plugin. PostX Pro comes with tons of design features and templates. Let’s explore some of the fantastic features that you get with PostX Pro.

Amazing addons

PostX currently has 11 addons for you to use. With the free version, you get only 3 addons. To get the rest, you need PostX Pro.

Let’s look at the list of the exclusive addons you get with PostX Pro:

• Category: This addon lets you customize the archive pages for categories or any other taxonomies. You can choose your desired color, image, etc. for your categories, sub-categories, etc. This is very helpful for your readers as they can identify their favorite taxonomy archives by color and style.
• Builder: Not only will you have the opportunity to choose from a large template library, you can also create your own design. This add-on lets you create your own template for any archive, category, date, search page, and much more!
• Progress bar: We have already seen what this addon can do. So let’s move on to the next addon!
• Yoast Meta: This addon requires the Yoast plugin installed and activated on your WordPress website. It lets you show the meta description on your excerpt.
• All in One SEO Meta: This addon requires All in One SEO plugin activated. Just like the Yoast Meta addon, this addon lets you show the meta description on your excerpt.
• RankMath Meta: Just like the above 2 addons, it shows RankMath meta description on your excerpt.
• SEOPress Meta: This addon as the name suggests shows the SEOPress meta description on your excerpt.
• Squirrly Meta: Like all the other meta addons on this list, this addon displays the Squirrly meta description on your excerpt.
• Saved Templates: This addon converts your Gutenberg blocks into shortcodes so that you can use the blocks anywhere.
• Elementor Addons: You can use the Gutenberg blocks inside Elementor using this addon. But you have to save your blocks into shortcodes by using the Saved Templates addon first.
• Table of Contents: This addon lets you create a table of contents inside your blog post or custom post types.

Design Library

PostX has a design library that comes with many pre-designed templates. The library also consists of tons of block designs you can use to build your content site. The import process is also very simple. While in your Gutenberg block editing mode, click on the Block Library button from the top.

Now you will have access to many starter packs as well as ready-made block templates to use on your website. Just click on ‘Import’ if you want to import the design on your current page, or click on ‘Live preview’ to get a better inspection of the template you have chosen.

There are many free templates to choose from, but the PostX pro templates are more professionally designed. With just one click you can use the design on your own site. And the best part of it is, you don’t have to do any coding at all!

Ajax powered post filter

To show the relevant contents in a small space, a category or tag filter is the best choice. The Ajax-powered post filter helps your readers filter the contents they are interested in.

Advanced Ajax pagination system

The pagination system of PostX is powered by Ajax. Using this method, your posts will be loaded without having to reload the entire page. This makes your website load faster and offer better performance.

Wide typography selection

Good typography is very important to the overall look of a website. To get the best view for your contents, you need to know how to change fonts and how to make your posts look better. PostX allows you to use all the free Google fonts from its Typography section. Select the best font for your posts!

Dynamic post slider

Sliders are great if you want to show multiple posts in one single space. PostX allows you to create post sliders by using the PostX slider blocks. The sliders are also dynamic so these can be used with any custom query to display your posts.

👉 Get PostX Plugin (Lifetime Deal Available)!
🎉 Use coupon code WPGIZ10 for exclusive discount! 🔥

Conclusion

From a study, it has been seen that visitors to a website are more likely to stay if it’s well designed. When you are creating your content site, it is imperative that you pay close attention to your design as well as typography. These things are really important in creating a beautiful and engaging site.

We were impressed with the reading progress bar feature in PostX and we loved customizing it as well. You can improve your readers’ experience by adding a reading progress bar to your site. Combined with the right colors, contents, and typography, your site will have more visitors and less bounce rate.

We used the PostX plugin and frankly speaking, the developers have a knack for great UI/UX. Just by looking at some of their starter templates, you can see how neatly designed everything is. The design library has a broad selection of starter and block templates to choose from.

Well, that wraps up our post on how to create a reading progress bar in WordPress. We hope that you found our article helpful. Which feature of PostX do you love using? Let us know in the comment section below.

👉 Video: Create a WordPress News or Magazine Site (Free Tools)