Features Use Cases Pricing
Blog Documentation Changelog
Sign In
Get Started

CSS Selectors

5 min read

CSS selectors tell TTSWP which parts of your post should or should not be narrated. Use them when the simpler "no-audio class" method is not enough, or when you want site-wide exclusions without editing every post.

Two types of selectors

Include selectors

By default TTSWP narrates the entire post content area. If your theme wraps the main article in a specific container (like .article-body or #main-content), you can restrict narration to just that container.

Example:

.article-body

Only text inside elements matching .article-body will be narrated. Everything outside that container is ignored.

Leave the field empty to keep the default (entire post content).

Exclude selectors

Any element matching an exclude selector is removed from the text before generation. Everything inside those elements is also removed.

Multiple selectors, one per line:

.wp-caption
figcaption
.sidebar
.widget-area
.ad-container

Common exclusion examples

Copy-paste these into your exclude list if they apply to your theme.

Image captions

.wp-caption
figcaption
.caption

.sidebar
#secondary
.widget-area
.elementor-sidebar

Ads

.ad-container
.advertisement
.ads
[data-ad]
.google-auto-placed

Comments

.comments-area
#comments
.comment-list

.related-posts
.yarpp-related
.mailchimp-signup
.newsletter-form

.breadcrumbs
.post-meta
.entry-meta
.author-box

Truncate After

Use Truncate After when you want to stop narration at a specific point in the post. Everything from the first match onward is dropped before audio is generated. This is handy for cutting off footnotes, reference lists, or author boxes that sit inside the main content area and are hard to wrap in a single CSS class.

How to set it up

  1. Go to Text to Speech → CSS Selectors.
  2. Scroll to the Truncate After card.
  3. Enter one string per line. Save.
  4. Regenerate the audio on any post.

Match rules

  • Case-insensitive substring match against the rendered post HTML.
  • You can enter plain text or HTML markup. For example, <strong>Footnotes</strong> matches only when Footnotes is bold, while Footnotes matches any appearance on the page.
  • Enter several strings if you want multiple possible cut-off points. The earliest match in the post wins.

Examples

Cut at a bold Footnotes heading:

<strong>Footnotes</strong>

Cut at the first of several possible markers:

<h2>References</h2>
<strong>About the author</strong>

Exclude Selectors vs. Truncate After

  • Use Exclude Selectors when the skip target is wrapped in a clean class or ID (sidebar, ad, widget).
  • Use Truncate After when you want to cut everything below a marker and there is no clean wrapper to target.

Both run before synthesis, so they only change the audio, not the visible page.

How to find the right selector

Open your post on the front-end and use your browser's inspector (F12, then click the element).

Look for:

  • A class attribute (starts with class="...") - becomes .class-name
  • An ID attribute (starts with id="...") - becomes #id-name
  • A common tag - becomes just the tag name (figcaption, aside)

Pick the most specific selector that still catches everything you want to exclude. If you have multiple similar elements, use a class or tag.

Testing your selectors

After saving selectors:

  1. Open any post with audio.
  2. Go to Posts → All Posts.
  3. Click the Regenerate icon.
  4. Play the new audio.

If unwanted content still appears, your selector did not match. Open your browser inspector, confirm the class or tag, and try again.

Limits

  • CSS selectors run before synthesis on the raw post content
  • They do not affect the visual page - only the text sent to ElevenLabs
  • Complex selectors work (.widget-area aside > .title), but keep them simple for easier maintenance