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:
1 2 3 4 | function remove_divi_shortcodes( $content ) { $content = preg_replace('/\[\/?et_pb.*?\]/', '', $content); return $content; } |
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.
Rupesh Kumar
May 29, 2019 at 2:06 amBetter code.
add_filter(‘the_content’, ‘remove_divi_shortcodes’);
function remove_divi_shortcodes( $content ) {
$content = preg_replace(‘/\[\/?et_pb.*?\]/’, ”, $content);
return $content;
}
Robin
May 9, 2019 at 7:42 amHi,
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.
Glen
February 25, 2019 at 8:47 amHi 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
Victor M. Font Jr.
February 25, 2019 at 8:57 amThank you! 🙂
Justin Mihalcin
November 29, 2018 at 4:31 pmVictor,
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
Victor M. Font Jr.
November 29, 2018 at 4:36 pmDivi 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?
Justine
February 13, 2018 at 11:24 pmHey 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?
Victor M. Font Jr.
February 14, 2018 at 12:27 amWithout 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.
Stéphane
February 13, 2018 at 2:53 amAlmost 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.
Victor M. Font Jr.
February 13, 2018 at 8:57 amI’m happy that you found it helpful!
Paul Damon
April 3, 2017 at 11:48 amI’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!!
Stephan Hokanson
November 27, 2017 at 12:26 pmPaul:
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.
Tommaso Gavioli
January 25, 2017 at 12:40 pmHi, 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?
Victor M. Font Jr.
January 26, 2017 at 12:01 pmHave no idea without reviewing your code.
Tommaso Gavioli
February 1, 2017 at 10:46 amSorry, 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).
Victor M. Font Jr.
February 1, 2017 at 12:39 pmTommaso,
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/
Marcus Fant
November 10, 2016 at 10:54 pmThanks 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.
Victor M. Font Jr.
November 11, 2016 at 7:38 amMarcus,
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.
Marcus Fant
November 11, 2016 at 10:53 amThanks 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!
Victor M. Font Jr.
November 11, 2016 at 11:07 amWhen 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.
Marcus Fant
November 11, 2016 at 1:02 pmThanks again.
I’m getting the hang of the export/import features of the plugins, but it does as you say!
Marcus Fant
November 28, 2016 at 11:10 amWhen 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.
Victor M. Font Jr.
November 28, 2016 at 11:31 pmMarcus, 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.
Al
October 19, 2016 at 1:04 pmBig 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.
Victor M. Font Jr.
October 19, 2016 at 1:37 pmI understand your sentiment. It’s same pet peeve I have about people who call themselves WordPress developers and have no development skills.
Hector
February 13, 2017 at 10:16 pmVictor,
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
Victor M. Font Jr.
February 13, 2017 at 10:30 pmA builder is not a tool a full stack develop would use. But if you must use one, a lot of people like Beaver Builder.
Hector
February 14, 2017 at 10:14 pmThanks 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?
Victor M. Font Jr.
February 14, 2017 at 10:22 pmhttps://knowthecode.io/
Andrés
July 29, 2016 at 8:18 amHello:
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;
}
Victor M. Font Jr.
July 29, 2016 at 8:27 amThanks for sharing.
Marcus
July 20, 2016 at 4:01 pmThanks 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’);
Victor M. Font Jr.
July 20, 2016 at 4:07 pmThanks for sharing Marcus!
Kim
July 19, 2016 at 9:16 amHi! Just use Divi plugin when switching to other theme! No!!!!
Victor M. Font Jr.
July 19, 2016 at 10:12 amKim, 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.
Kim
July 20, 2016 at 9:36 amThanks 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.
Victor M. Font Jr.
July 20, 2016 at 10:52 amThe 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.
Kim
July 20, 2016 at 8:25 pmDidn’t know there is a page builder that leaves its content after deactivating it. Understood. Thank you!