Why I Eschew the Divi Theme
There are a lot of things that web designers like about the Divi theme, especially if they don't have a web development background and understand the technical nuances required to program in PHP, jQuery, and CSS. In fact, most web designers that I've spoken with don't care about the underlying code. They just want to be able to impress clients with a quick and easy build that meets the immediate visual requirements. That's why the Divi theme is so popular among designers and newbies.
Personally, I eschew the Divi theme and do everything I can to avoid any project that has anything to do with it. Why? Because I am not only a web designer, I am full-stack web developer. Whenever I've had to work on sites that use the Divi theme, I've become a first hand witness to the wake of shortcodes it leaves embedded in a site's content. Oh the humanity!
You've all seen shortcodes I'm sure. They're little pieces of text wrapped in square brackets "[this-is-a-shortcode]". When a browser accesses a page containing them, those little pieces of text are translated into some kind of computer code to display the content in various ways.
The Divi pagebuilder may insert dozens of shortcodes into every page on your site as you use its drag and drop interface to format the appearance of your content. That's not a problem as long as you commit to using the Divi page builder for the rest of your natural born life. But as soon as you decide to move away to another theme that provides upgraded professional features such as accessibility or schema.org markup, Divi refuses to let you go.
Just when you think it's safe to get into the water (Jaws theme playing…), all of those dozens, hundreds, or even thousands of shortcodes are suddenly visible in your content. So instead of displaying text that reads, "Welcome to my world!", your readers will see, "Welcome to my [et_pb_Divi_is_back_to_haunt_you] world!". Not very nice is it?
There's never been an easy way to remove these shortcodes either. In most cases, the only way to remove these shortcodes has been to edit each page on the site and remove them manually. If you have just a few pages this is fine, however, if you have a lot of content built up over years, removing the Divi shortcodes is a long, laborious process that can drive the best of us a little nuttier than usual.
Now Comes the Good Part
For the past few years, I've been using WP All Import by Softlyy to migrate eCommerce data into WooCommerce. It works great and since they added Orders and Customers to the mix, the plugin is fantastic. But it's not a plugin for the faint of heart. You have know what you're doing to use it properly.
Earlier this year, the Softlyy team released a companion product, WP All Export. I am very impressed with its capabilities and decided to try it for the Original Strength project. In my first attempt, I exported the pages from the production site to see if I could import them into the development site. The Divi shortcodes kept crashing WP All Import.
The reason why is that the export file is created as a CSV with double quotes as the string delimiter and the Divi shortcodes wrap their parameters in double quotes instead of single quotes. With all those double quotes in the wrong place, things just kept getting confused.
Undaunted, it was time to press on with a hopeful feature. Both of these plugins have a built in function editor that allows you to create your own php functions to manipulate your data. I decided to write a function that would strip page content of the Divi shortcodes to see how it all could work.
First, I attempted to use the WordPress strip_shortcode function. It was an abysmal failure. Those Divi shortcodes wouldn't cooperate and laughed at my meager attempt to quash them. Next, I tried regular expression matching and came up with this little snippet:
This gem of a snippet works like a charm. It removes all content that begins with [et_pb and ends with the closing square bracket. All of the Divi shortcodes were removed from the 102 pages of content and they imported into the development site without error. Kudos to Softlyy for these great tools.
Do you think there is a way to modify the regular expression in order to preserve the “et_pb_image” tag?
I would just need it to remain as is so I can identify the image file name and then I can manually insert it on Gutemberg.
Do you think this is possible?
I’m not an expert with regular expressions, but I don’t believe so.
I need this done to my website. Are you a developer who can help with this or can you recommend one?
Hi Sondra,
Thanks for asking, but I’ve only provided this type of service for my care plan subscribers. You should Google for help with this.
Regards,
Victor
This guy wrote a plugin that strips Divi codes and allows a test run. Works well, used it on a site that had 300 pages filled with codes. I did back up the database first and also made a copy on a development site in case I needed to see how some of the old pages were formatted.
https://www.sean-barton.co.uk/2017/12/bye-bye-divi/
Thanks for info Grady!
Thanks for your help, I made a php script that does same thing from your idea (you can get servername,user, pw,dbname for wp_config). I’m sure someone can make it better but it works. replace wordpressXXX with your dbname too. BACKUP DB FIRST!
connect_error) {
die(“Connection failed: ” . $conn->connect_error);
}
$sql = “SELECT ID, post_content FROM wordpressXXX.wp_posts”;
$result = $conn->query($sql);
if ($result->num_rows > 0) {
// output data of each row
while($row = $result->fetch_assoc()) {
if(strpos($row[‘post_content’], ‘et_pb’) !== false)
{
//check for preg match:
$content = $row[‘post_content’];
$content = preg_replace(‘/\[\/?et_pb.*?\]/’, ”, $content);
echo “ID:”. $row[‘ID’] .”Before:” . $row[‘post_content’]. ” – After:” . $content . “”;
//Update the SQL
// Create connection
$conn2 = new mysqli($servername, $username, $password, $dbname);
// Check connection
if ($conn2->connect_error) {
die(“Connection failed: ” . $conn2->connect_error);
}
$html = mysqli_real_escape_string($conn2,$content);
$sql2 = “UPDATE wordpressXXX.wp_posts SET post_content='”.$html.”‘ WHERE id=”.$row[‘ID’];
if ($conn2->query($sql2) === TRUE) {
echo “Record updated successfully”;
} else {
echo “Error updating record: ” . $conn2->error;
}
$conn2->close();
}
}
} else {
echo “0 results”;
}
$conn->close();
?>
Thanks Mark! Appreciate it.
First of all, I would like to congratulate you on the great work done in this post, but the question is, what would be the best wordpress theme, and which would you recommend?
I know a wee bit about WP. Just the basics. A non profit (local dog club) has a site created in DIVI. The woman who built it has left the group and they want a simple WP theme so they can easily update events, etc. Their divi site is very slow with the multiple plugins (10 of them). They also don’t have the money to pay for DIVI and want something free.
I thought I would take a stab at switching away from divi to a different theme, but have found it is way over my head.
Any uncomplicated advice for a newbie? I need all the help I can get. Thank you.
Better code.
add_filter(‘the_content’, ‘remove_divi_shortcodes’);
function remove_divi_shortcodes( $content ) {
$content = preg_replace(‘/\[\/?et_pb.*?\]/’, ”, $content);
return $content;
}
I think the term “better” is subjective. Using add_filter does not permanently remove the shortcodes from the content. It removes the shortcodes only when accessing the content for display. This means the filter has to execute everytime the content is accessed. I prefer the permanent one-time fix that completely removes the shortcodes from the content.
Hi,
Great snippet, but I have small issue that i still want to have those image show up in the content
I tried adding custom shortcode and re-create button and et_pb_image as my own shortcode it works partially, is there a way to properly make it work.
Hi Victor
Thanks for your snippet. As a new user of this theme it set me up for the fall when I changed to a new theme. I think it is so useful that you need a plugin to replace divi shortcodes and we need to call it VMF REPLACE
Thanks again
Thank you! 🙂
Victor,
Thanks for the article. Our site was created using the Divi builder and we have seen a dramatic slow down in our speed recently. We are thinking it is from the Divi short code so we are exploring ways to help with this. Any help is much appreciated!
Justin
Divi could be the problem, but there can be many reasons for a site to slow down. Have you run your site through PageSpeed for ideas?
Hey Victor thanks for the great code – it seems to help lots of people, I’ve bought the WP can’t get it to strip out the Divi tags…. I’ve done everything mentioned above… to no avail
Using latest version of divi, latest wordpress… Any tips?
Without examining the source to see what the shortcodes look like, I’m afraid I can’t help. Stéphane, in the comment before yours, had complete success using what’s described in the article.
Almost two years since your article was published and yet, your little piece of code and your explanation helped me terribly. I used your method with the plugins and after a few tests and manipulations, I was able to achieve it and everything worked perfectly. I wanted to thank you because it saved me hours of work.
I’m happy that you found it helpful!
I’m unclear as to where in WP All Export you put this. What do you select for filter element, rule, and value? Or do you put this snippet somewhere else? Thanks so much!!
Paul:
I’m still testing this out, but you create an export field based on a PHP function.
1. Click the “Add Field” button.
2. choose “Content” from the dropdown menu.
3. Give your field a name. (I use “Content” and don’t export the original content field.)
4. Check the box for “Export the value returned by a PHP function.”
5. Name your function. I use “remove_divi_shortcodes.”
6. In the function editor, paste in the code snippet from Victor.
7. Click “Done.”
8. Click the “Preview” button in the lower right, to see whether the snippet is stripping your divi code.
Hi, i’m using :
I get always this message: Parse error: syntax error, unexpected ‘$content’ (T_VARIABLE) in your code on line 4
But i cannot find the way to make it work. Any ideas?
Have no idea without reviewing your code.
Sorry, i don’t know why didn’t paste the code:
add_filter(‘the_content’, ‘remove_divi_shortcodes’, 20, 1);
function remove_divi_shortcodes( $content ) {
$content = preg_replace(‘/\[\/?et_pb.*?\]/’, ”, $content);
return $content;
}
Opening and closing
Everytime i try to confirm the function, it gives me the message: Parse error: syntax error, unexpected ‘$content’ (T_VARIABLE) in your code on line 4
how can i do?
I’m really desperate: i’m trying to get rid of Divi garbage and to export a wp divi theme based site on the one i’m building and the database is huge (1200 posts in 4 languages).
Tommaso,
The code works when added to the WPAllImport or WPAllExport plugin as instructed in the article. I can’t help you beyond that. I don’t know what you mean by confirming the function. $content is a WordPress parameter defined in the WordPress the_content filter. If you haven’t pasted the code in the right place or not using the WordPress hook correctly, it will give you and error. https://developer.wordpress.org/reference/hooks/the_content/
Thanks for posting this. I actually enjoy using Divi, but wanted to run this code on a test site to see exactly how it works and I wasn’t successful.
I added it exactly as it is here to my functions.php and it didn’t remove a thing. Andrés put some code in the comments and I ran it as well: now I have syntax errors. Are these codes supposed to be put within the Divi theme when active? Not sure what could go wrong when I copy/pasted.
Marcus,
Thanks for your inquiry, but there’s no place in this article where I mentioned adding the code to functions.php. This article is about using the code as a filter in conjunction with the WP All Import or WP All Export plugins. You have to export all of a site’s data, filter it to remove the Divi shortcodes, then re-import the clean data to remove the damage Divi does to content.
Thanks for the reply.
I understand. I did end up putting the code into the functions.php file and got it to work however (syntax error from directly copy/paste). You stated that it stripped the shortcodes from the pages. Does that mean that it removed them from the back-end WP editor as well, or just the front facing portion of the site? Just needed clarity on that last sentence as that’s what it’s sounding like. Thanks for your help with this!
When used as a filter with the plugins I recommended, the snippet completely removes the Divi shortcodes and cleans the content. You cannot use this snippet with the Divi theme. The Divi theme relies on its shortcodes to function properly. This code is meant to be used to clean the damage Divi does to content when switching to a new theme.
Thanks again.
I’m getting the hang of the export/import features of the plugins, but it does as you say!
When you removed the shortcodes, did it retain just the text content, or others such as photos? When I removed the shortcodes, it ended up leaving text, but the photos disappeared as well due to the information being within the shortcode, not wrapped-in like text.
I just used Beaver Builder and it was nice to see that it left the framework essentially.
Marcus, when you remove the shortcode, it removes the entire shortcode (all content within the delimiters). This is one of the big problems with Divi. It does not adhere to WordPress standards.
Big thanks from me! I appreciate the knowledge you have imparted. I own Divi, but don’t use it on any site that I make revenue from. The more time I spend on it (and the facebook groups), the more I realize it is really only built for one purpose and that is for websites with a nice or aesthetic front end. If you want to do anything beyond that and there is a conflict you could be left with a huge problem. I use 52+ Gravity forms on one site, lets suppose there is a Divi/GF conflict then Divi’s going to loose out! However that means i’d then have to change 50+ pages to get rid of Divi. It’s not just Divi either. This is a good article: https://pippinsplugins.com/wordpress-page-builder-plugins-critical-review/
I recently brought this issue up after the new “Divi keyboard shortcuts” were announced on their blog. As usual everyone who said wow! or fantastic or some other word to stroke the ego of the owner was replied to. My concerns about rather seeing the development team fixing the Divi lock-in content issue were of course not answered. I had to stop visiting one of the Divi facebook pages after I realized that most people on there have absolutely no idea, including the guy who had built 200 sites with Divi and all with the wp-admin backend login (a known vulnerability). People who don’t backup sites and then come on there crying they’ve lost all their work, people who get hacked because they can’t implement the simplest of security measures, and yet peddle their wares to an unsuspecting public. People who openly mock their clients because they have no professional ethics, and my favorite of all are the people who ask a question with “HELP”! It’s almost as if most the Divi people live in their own Divi bubble and can’t see beyond it because it’s the only thing most of them are capable of using, and won’t spend the time or effort on anything else.
I understand your sentiment. It’s same pet peeve I have about people who call themselves WordPress developers and have no development skills.
Victor,
I have started to become a full-stack developer. I took a short 4 month course and am continuing to learn but need to use wordpress for business. Since I’m not very familiar with php, is there a builder that simplifies building a site that can be incorporated with Genesis framework?
Thanks for your response
A builder is not a tool a full stack develop would use. But if you must use one, a lot of people like Beaver Builder.
Thanks for the reply,
Do you have any recommendations on what online training may be best for full stack? Lynda, team treehouse, front end masters, etc?
https://knowthecode.io/
Hello:
It work for me when I added this first line:
add_filter(‘the_content’, ‘remove_divi_shortcodes’, 20, 1);
function remove_divi_shortcodes( $content ) {
$content = preg_replace(‘/\[\/?et_pb.*?\]/’, ”, $content);
return $content;
}
Thanks for sharing.
Thanks for posting this very helpful snippet. It’s something that should be included in Divi (and all shortcode generating themes/plugins) as an option.
For those just wanting to remove shortcodes using the functions file, I wanted to pass along the following. I pasted your snippet, followed by the code below to my functions file after activating a new theme & it worked great:
add_filter(‘the_content’, ‘remove_divi_shortcodes’);
Thanks for sharing Marcus!
Hi! Just use Divi plugin when switching to other theme! No!!!!
Kim, I appreciate the comment, but the fact remains that a professional developer wouldn’t do what you suggest. I’ve received hundreds of comments from professional developers that are thanking me for this insight. The Divi theme and the new plugin are designed to keep people locked into using Elegant Themes products.
Thanks for your replay. Sorry I may not understand this but is there any other page builder that its content is still working/showing after removing it?
Isn’t that how plugins work? for example if I removed Contact Form 7 will the forms still working??!!
Thank you.
The entire issue revolves around plugins that actually alter your content. Beaver Builder has a great page builder that leaves your content intact without inserting shortcodes. There are other page builders that work similarly to Beaver Builder. As for your question about CF7, no the forms won’t work without the plugin. But now you’re comparing apples to oranges.
Didn’t know there is a page builder that leaves its content after deactivating it. Understood. Thank you!