---
title: "How to Add a Progress Bar to a Section in WordPress?"
url: https://qa.nexterwp.com/docs/add-a-progress-bar-to-a-section-in-wordpress/
date: 2024-12-12
modified: 2026-04-14
author: "Aditya Sharma"
description: "Are you looking to add a reading progress bar to a section in WordPress? There can be a situation where you may want to add a reading scroll progress bar..."
image: https://qa.nexterwp.com/wp-content/uploads/2024/12/How-to-Add-a-Progress-Bar-to-a-Section-in-WordPress_-1024x519.jpg
word_count: 277
---

# How to Add a Progress Bar to a Section in WordPress?

## Key Takeaways

- Utilizes the Progress Tracker block from Nexter Blocks to add a reading progress bar to specific sections in WordPress.
- Requires installation and activation of Nexter Blocks to access the Progress Tracker block features.
- Incorporates a CSS ID, such as 'section-1', to link the progress bar to a designated section for functionality.

Are you looking to add a reading progress bar to a section in WordPress? There can be a situation where you may want to add a reading scroll progress bar to a specific section instead of the entire page.

With the Progress Tracker block from the Nexter Blocks, you can easily add a reading progress bar to a specific section in WordPress.

*To check the complete feature overview documentation of the Nexter Blocks Progress Tracker block,* *[click here](https://qa.nexterwp.com/docs/add-a-reading-progress-bar-in-wordpress/).*

***Requirement  - This block is a part of the Nexter Blocks, make sure it's installed & activated to enjoy all its powers.***

[LIVE BLOCK LINK](https://qa.nexterwp.com/nexter-blocks/blocks/wordpress-reading-scroll-progress-bar)

To do this, add the Progress Tracker block from the Nexter Blocks to the page and follow the steps. 

1. First, you have to add a CSS class or ID to the section to which you want to add the reading progress bar.

For instance, we are using the Container block from the Nexter Blocks and added a CSS ID “section-1” in the **HTML anchor** field under the **Advanced** tab.

> *Note: For the progress bar to work, make sure the length of your container is bigger than the browser height.*

2. Then select the Progress Tracker block and select the appropriate type.

3. After that, select **Selector** from the **Apply to** section.

4. Then in the **Class/ID** field, add the same CSS ID or class name with **#** or **.** (dot) in front. In our case, it will be “#section-1”.

You can make the reading progress bar relative to the selector by enabling the **Relative to Selector** toggle.

Now you’ll see a reading scroll progress bar showing progress related to that specific section only.