The Divi Theme slider lets you display slides along with overlaid text. If you are unlucky, you may run across an issue with the slider where the texts of all your slides are displayed at the same time, on top of one another.

Kenny was having just this problem over on the Divi users Facebook group. I took a look and noticed that the HTML produced by the slider didn't look quite right. Specifically there were some <strong> tags floating around which seemed out of place. I tracked down the problem to the text entered as the heading of the first slide. It was surrounded by <strong> tags that Kenny was using to bold the text, and it looked like this:

<strong>Heading Text<strong>

The problem with this is that both <strong> tags are opening tags, not closing tags. So there was two levels of bolding being opened by this text and none being closed. This was breaking out into the rest of the HTML document and ultimately causing the slider to fail.

The simple solution, of course, is to convert the second tag into a closing tag like so:

<strong>Heading Text</strong>

A slightly more elaborate way of dealing with the problem is to attempt to fix the tags programmatically so that the issue can't happen again even if we enter unbalanced HTML tags.

WordPress comes with a handy function "balanceTags()" which will correct the tags in a string, and is exactly what we want to apply to the slide heading text.

The only challenge remaining is to actually get access to the slide heading to change it. I had a look to see if Divi was calling apply_filters() on the header, which would have allowed us to easily make the change. Unfortunately it doesn't, but while I was looking at the code, I noticed that Divi was pulling it from a shortcode in the post content (generated by the Page Builder). This meant it would be possible to apply a filter to the whole content of the post, locate the slide shortcode with a regex, and make the change. Here's the code to do just that:

function myprefix_fix_slide_heading_tags($content) {
    return preg_replace_callback('#\

				
				
				

					

						
						

							
							
						
					
				
				
				
				
			
			*)"#', 'myprefix_fix_tags', $content);
}
add_filter('the_content', 'myprefix_fix_slide_heading_tags');

function myprefix_fix_tags($matches) {
    return '[et_pb_slide heading="'.balanceTags($matches%911%93,true).'"';
}

Adding this code into functions.php (ideally in a child theme) patches the issue and prevents malformed HTML in the slider heading from breaking the slider.