CSS Selectors

CSS selectors tell TTSWP which parts of a page are read aloud. Use them when the simpler "no-audio class" method is not enough, or when you want site-wide rules without editing every post.

You find them under Text to Speech > Tools > CSS Selectors. Type a selector and press Enter (or a comma) to add it. Paste a list to add several at once, and click × to remove one. Nothing changes until you click Save selectors.

#What should be read?

The first choice on the page decides where the text comes from.

#Post content only

TTSWP reads the post's own content, the text you write in the editor. This is the default and how TTSWP has always worked. It uses your Content selectors.

#Full page (PRO)

TTSWP reads the published page as a visitor sees it, including text that lives outside the post content:

• Theme and page builder templates, such as Elementor Theme Builder, Divi Theme Builder, Bricks and block themes
• ACF fields and other custom fields that your theme or template prints on the page
• Shortcodes and widgets placed in a template

It uses your Page selectors to pick the parts of the page to read. Headers, footers, menus, forms, comments, share buttons, breadcrumbs and related posts are always skipped.

If the page cannot be read, for example because the site blocks requests to itself or no page selector matches, TTSWP uses the post content instead and tells you why after generating.

Full page reads the page as a logged-out visitor. If your site shows a "coming soon" page, a paywall or an age check to logged-out visitors, that is what gets read. Use the preview to check.

#Page selectors

The areas of the page to read in Full page mode. The defaults cover the most common setups:

[data-elementor-type^="single"]
.et-l--body
#brx-content
main
article

For more control, add a class to the sections you want read (in Elementor: Advanced > CSS Classes) and use only that class:

.read-aloud

When the preview finds nothing, it suggests classes and regions it found on the page, such as custom classes you added in Elementor.

#Content selectors

The areas inside the post content to read in Post content only mode. The default is:

.post-content
.wp-block-post-content
.page-content

On pages built with Elementor, Post content only reads the Elementor content area and does not use these selectors.

#Blocked selectors

Anything matching a blocked selector is never read, even inside an area you include. Blocked selectors apply in both modes.

.wp-caption
figcaption
.sidebar
.newsletter-form

Expand Always skipped by the plugin under Blocked selectors to see what TTSWP leaves out on its own in Full page mode.

#Common examples

Image captions:

.wp-caption
figcaption

Sidebars and widgets:

.sidebar
#secondary
.widget-area

Ads:

.ad-container
.advertisement
.ads

Author boxes, related posts and signups:

.author-box
.related-posts
.newsletter-form

#Truncate after

Stop reading at a specific point. Everything from the first match onward is dropped before audio is generated. This is handy for footnotes, reference lists or author boxes that sit inside the content and have no clean wrapper.

• Add one string per chip. The earliest match wins.
• Matching is case-insensitive and runs against the rendered HTML.
• You can use plain text or HTML. <strong>Footnotes</strong> matches only a bold Footnotes, while Footnotes matches any appearance.
• In Full page mode, only the parts matched by your page selectors are searched, so a word in the menu or page title does not cut your audio short.

Examples:

<strong>Footnotes</strong>
<h2>References</h2>

#Blocked selectors or Truncate after?

• Use Blocked selectors when the part to skip has its own class or ID (sidebar, ad, widget).
• Use Truncate after when you want to cut everything below a marker and there is no wrapper to target.

#Supported selector forms

Combined selectors such as div.note, main p or ul > li are not supported. They are marked in amber on the settings page and ignored. Use a single class instead.

#Test before you generate (PRO)

The Test on a post panel shows the exact text that would be sent for any post, using the selectors on the page, saved or not. It shows where each block came from, the character count and the estimated credits. No audio is generated and no credits are used.

1. Search for a post and pick it.
2. Click Preview.
3. Change selectors and click Run again until the text is right.
4. Save, then generate the audio.

If you change selectors after a preview, the panel tells you to run it again.

#How to find the right selector

Open the post on your site and use your browser's inspector (F12, then click the element). Look for:

• A class attribute (class="..."), which becomes .class-name
• An ID attribute (id="..."), which becomes #id-name
• A common tag, which is used as is (figcaption, aside)

Pick one class that wraps everything you want. If it is hard to find one, add your own class to the section in your page builder.

#Limits

• Selectors only change the text sent for audio, never the visible page.
• Full page mode needs a paid plan. Post content only works on every plan.