---
title: "How to Add a Progress Bar to a Section in WordPress?"
url: https://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://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

- Nexter Blocks Progress Tracker block adds a reading progress bar to a specific section in WordPress, not the entire page.
- Container block example uses the HTML anchor field under the Advanced tab to add CSS ID “section-1” before applying the Progress Tracker block.
- Selector mode requires the same CSS ID or class name in the Class/ID field with # or . in front, and the Relative to Selector toggle makes the progress bar relative to that selector only.

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://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://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.