Adding audio to a WordPress built with Divi, WPBakery or Elementor

Many WordPress sites are no longer built with the standard editor but with a page builder: Divi, WPBakery, Elementor. These tools give you control over layout, but they change one thing that is invisible to the visitor and decisive for an audio plugin: how the article's content is stored behind the scenes. Before installing anything, it helps to understand where a plugin can stumble, and how ours handles it.

The problem: the article is stored in blocks

An audio plugin has to do two things to an article: fetch its text to produce the sound, and place the player on the page. The second causes no particular trouble with a builder, because the player inserts itself through WordPress's own hooks, without touching the theme. It is the first that hides a trap.

Divi and WPBakery do not store the article as plain text. They wrap all the content in nested shortcodes, something like [et_pb_section][et_pb_row][et_pb_column][et_pb_text]The text[/et_pb_text] in Divi, or [vc_row][vc_column][vc_column_text]... in WPBakery. The WordPress function that strips shortcodes removes them together with their content. A naive plugin that relies on it therefore gets an empty text, concludes the article is "too short", and refuses to narrate it, sometimes with no message at all if the article went through in a batch.

What was fixed, and how

We hit exactly this fault during tests on a real WordPress, and it was fixed in version 1.32 of the plugin. The fix is easy to check in principle: instead of letting the standard function wipe everything, the plugin unfolds the layout tags of those two builders and keeps only their content. The tag goes, the text stays. Modules that carry only code, a raw HTML block or a script, are instead removed entirely, because that is not text to be read aloud.

A second, quieter fault was hiding behind the first. Builders often glue the end of one block to the start of the next, with no space: "Our story" followed by "Founded in..." was read as "Our storyFounded", one single word. The fix adds a space after each block end, and only on a builder page. An important point for anyone not using a builder: ordinary content is extracted exactly as before, byte for byte. The fix touches only the pages where the problem exists.

What about Elementor?

Elementor works differently: in the common case, it produces ordinary HTML that the plugin reads as it would read any theme. It therefore did not need the specific handling reserved for Divi and WPBakery. We would rather say this plainly, though: we verified and tested the extraction on Divi and WPBakery, because those were the ones breaking. For Elementor, as for any builder whose layout is stored in an unusual way, the rule is to check the result on one article before launching a batch, and two safe paths exist if the extracted text is not what you expected.

The first is the [wedispatch] shortcode, which places the player at a precise spot and works inside a template or a builder. The second, more radical, is to choose the text the audio should read yourself: from your account, you paste the exact version to narrate, and that is what gets read, whatever way the builder stores the page. This is the honest answer when automatic extraction is not enough: you do not tinker, you hand over the right text directly.

Before you install

If your site runs on Divi, WPBakery or Elementor, the steps come down to three moves. Install the plugin, which downloads from the WordPress page without creating an account. Narrate one representative article, ideally a page properly built with the builder, and listen to the opening: that is where glued words or a truncated text are heard at once. If everything is right, run the rest. If something is off, use the chosen text rather than hunting for the cause on the theme side.

For the detail of what the plugin writes and does not touch in your install, see what the plugin installs exactly. And if you would rather not use an extension at all, audio can also be added through the API or the RSS feed, two paths that ignore the page builder entirely.

Read next

• How text-to-speech actually works, in plain terms
• Switching audio provider without losing your audio: the question you forget at signing
• Natural French text to speech: the five flaws that still give a machine away