---
title: "How to Add Steps in a WordPress Reading Progress Bar?"
url: https://nexterwp.com/docs/add-steps-in-a-wordpress-reading-progress-bar/
date: 2024-12-12
modified: 2026-04-14
author: "Aditya Sharma"
description: "Do you want to add steps in a WordPress reading scroll progress bar? Adding steps to the scroll progress bar can help users navigate through different sections of your content..."
image: https://nexterwp.com/wp-content/uploads/2024/12/How-to-Add-Steps-in-a-WordPress-Reading-Progress-Bar_-1024x519.jpg
word_count: 374
---

# How to Add Steps in a WordPress Reading Progress Bar?

## Key Takeaways

- Nexter Blocks includes the Progress Tracker block, which allows users to add steps to a WordPress reading progress bar.
- Users can create multiple sections with unique CSS IDs in the Container block from Nexter Blocks to enhance navigation.
- The Progress Tracker block enables users to select Horizontal or Vertical styles for the reading progress bar.

Do you want to add steps in a WordPress reading scroll progress bar? Adding steps to the scroll progress bar can help users navigate through different sections of your content easily. This feature shows which section they are currently reading and allows them to jump to any section directly without scrolling manually.

With the Progress Tracker block from the Nexter Blocks, you can easily add steps to the reading progress bar 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)

1. First, you have to add multiple sections with a unique CSS ID for each.

For instance, we are using the Container block from the Nexter Blocks and added 4 such sections. 

2. Then in each Container block, add a unique CSS ID in the **HTML anchor** field under the **Advanced** tab.

![](https://nexterwp.com/wp-content/uploads/2024/12/container-id.png)

For instance, we’ve added “section-1”, “section-2”, “section-3” and “section-4” respectively in each Container block.

3. Then add the Progress Tracker block and select **Horizontal** or **Vertical** from the **Type** section under the **Style** tab.

4. After that, select **Entire Page** from the **Apply to** section.

5. Then enable the **Pin Point** toggle, from the **Extra Option** tab.

Select an appropriate style from the **Pin Style** section.

6. In the **Pin Point** section, you’ll find a repeater item. Open it - 

In the **Title** field, you can add a title for the pin.

In the **Container ID** field, you have to add the container or section CSS ID you want to connect the pin item with. In our case, it will be “section-1”.

7. Click on the **+ Add Pin** button to add more items, and repeat step 6 to add the CSS ID of the other containers or sections.

In our case, we have 4 sections so we’ll add 3 more Pins and add CSS ID “section-2”, “section-3” and “section-4” respectively in each pin. 

Now you’ll see steps in the reading scroll progress bar, it will indicate which section you are on as you scroll and you can click on them to jump from one section to another.

## Frequently Asked Questions

**Q: What should I do if the Progress Tracker block isn't showing up?**
A: If the Progress Tracker block isn't visible, ensure that the Nexter Blocks plugin is installed and activated. This block is part of the Nexter Blocks, which is essential for adding steps to your reading progress bar. Without it, you won't be able to access this feature.

**Q: What is the best way to structure sections for the reading progress bar?**
A: For optimal results, each section should have a unique CSS ID, which you can set in the HTML anchor field under the Advanced tab of the Container block. This ensures that the Progress Tracker accurately links to each section, allowing users to see their current position and jump to different parts of the content.

**Q: What happens if I forget to add a unique CSS ID to a section?**
A: If you forget to add a unique CSS ID to a section, the corresponding pin in the Progress Tracker will not function correctly. Users won't be able to jump to that section, which can lead to confusion and a poor navigation experience. Make sure to double-check your IDs for each section.