---
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 Progress Tracker block adds steps to a WordPress reading scroll progress bar and lets readers jump to any section directly without scrolling manually.
- Container blocks use unique CSS IDs in the HTML anchor field, such as “section-1”, “section-2”, “section-3”, and “section-4”, to connect each pin item.
- Progress Tracker block sets Type to Horizontal or Vertical, Apply to to Entire Page, and Pin Point toggle on, then uses + Add Pin to match each section ID.

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.