Features Pricing
Blog Documentation Changelog API Reference
Sign In
Get Started

CSS Selectors

4 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

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