## Reading bar

Product: Verba - Modern Blog & Magazine WordPress Theme
URL: https://hub.jkdevstudio.com/docs/verba/the-single-post/reading-bar
Updated: 2026-09-09
Summary: A slim bar at the bottom of an article carrying reading progress, text size, read aloud, and the header media controls once the media scrolls off screen.
Availability: Pro only.

Everything useful on a post page sits at the top or the bottom. A reader halfway through a long article has none of it within reach.

The reading bar keeps those tools on screen for the whole article, so they can be used from any point in the text without scrolling back.

It is at [[Verba > Theme Options > Single Post > General]], group **Reading Bar**, and it is off by default.

## The bar itself

:::options

- **Enable reading bar** (default: off): Shows a slim bar along the bottom of the screen while somebody reads the post.

- **Show on** (default: all sizes): Which screen widths it appears on.

- **Distance from the bottom**: How far above the bottom edge it sits.

- **Bar style** (default: inverted): Which surface it is painted on. Default, secondary, accent, inverted, or custom.

- **Custom background** and **custom color**: Used only by the custom style.

:::

## Reading progress

:::options

- **Show reading progress** (default: on): How far through the article the reader is.

- **Progress style** (default: ring and percentage): A ring, a percentage, or both.

- **Count from** (default: the post header): Where the progress starts counting.

:::

Counting from the article text is more honest on posts with a large header, because it does not credit the reader for scrolling past an image. Counting from the header matches what the eye sees on the page. Pick by how big your headers are.

## Reading tools

:::options

- **Text size button** (default: on): Lets readers make the article text larger.

- **Largest text size** (default: 130%): How far it can grow.

- **Listen button** (default: on): Has the article read aloud.

- **Playback speed control** (default: on): A speed button next to listen.

:::

<div data-callout="note">

Reading aloud is done by the reader browser, not by an external service. The voice depends on their operating system, so it will sound different on a Mac and on an Android phone, and some systems have better voices for some languages than others.

</div>

The share row and the summarize row appear in the bar too, when you have placed them there. See Sharing and Summarize with AI.

## Media controls

The most useful part, and the reason to turn the bar on for a media-heavy site.

:::options

- **Enable post format controls** (default: off): Puts the post media controls in the bar once the media scrolls away.

- **Video controls** (default: on): Play, pause, and mute the header video from the bar.

- **Video full-screen button** (default: on): Opens the header video in the shared full-screen overlay.

- **Audio player** (default: on): Keeps an audio player in the bar on audio and podcast posts.

:::

The scenario that explains it: a podcast episode with a transcript. The reader scrolls into the text, the player follows them down the page instead of disappearing, and they listen while they read.

Galleries behave the same way, with the position, the arrows, and full screen moving into the bar.

<details><summary>Does the bar cover content on a phone?</summary>

It sits above the bottom edge with a configurable gap and stays slim. Check it on a real phone with your own article, especially if you also run a cookie banner or a floating card at the bottom.

</details>

<details><summary>Can I have the bar without the progress ring?</summary>

Yes. Turn off show reading progress and the bar keeps only the tools.

</details>

<details><summary>The media controls do not appear</summary>

Post format controls is off by default, so turn it on. The controls also only take over once the header media has scrolled off screen; while it is visible you use the media itself.

</details>