---
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 includes the Progress Tracker block, allowing users to add a reading progress bar to a specific section in WordPress.
- Users must add a CSS class or ID to the section for the Progress Tracker block to function properly, such as using 'section-1'.
- The reading progress bar can be made relative to the selector by enabling the Relative to Selector toggle in the settings.

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.

## Frequently Asked Questions

**Q: What should I do if the progress bar isn't showing up?**
A: If the progress bar isn't displaying, check that the length of your container is greater than the browser height. This is essential for the Progress Tracker block from Nexter Blocks to function correctly. If the container is too short, the progress bar won't have enough content to track.

**Q: What is the best practice for adding a CSS class to a section?**
A: When adding a CSS class to a section, use clear and descriptive names that reflect the section's content, such as 'article-section' or 'feature-section'. This helps maintain organization in your code and makes it easier to manage multiple progress bars if needed.

**Q: Does the Progress Tracker block work with other page builders?**
A: The Progress Tracker block is part of Nexter Blocks, which is built for Gutenberg as the primary builder. While it supports Elementor and Bricks, the progress tracking functionality is optimized for use within Gutenberg. For the best experience, use it in a Gutenberg environment.

**Q: What happens if I forget to add the CSS ID in the Class/ID field?**
A: If you forget to add the CSS ID in the Class/ID field, the progress bar will not function as intended. It won't know which section to track, leading to a non-functional progress indicator. Always ensure the ID matches the one you assigned to your section.