The Divi Theme's many modules include a variety of fields in which you can enter URLs and text to be displayed by the modules. In many cases, however, these are limited to the static text you type into the modules' settings. What if you want to use be able to dynamically generate the URLs / text using shortcodes, e.g. a URL collected using the Advanced Custom Fields (ACF) plugin? Here's how to do it.
Enable Shortcodes using Divi Shortcode Enabler
Divi Shortcode Enabler is a plugin which adds support for shortcodes in places where Divi does not normally execute them, for example in various Divi module fields.
It adds support for shortcodes in the following module fields:
- Accordion Module
- Title
- Bar Counter Module
- Percent
- Blurb Module
- Title
- Image
- URL
- Alt
- Button Module
- Button Text
- Button URL
- Call To Action (CTA) Module
- Title
- Button Text
- Button URL
- Circle Counter Module
- Title
- Number
- Contact Form Module Fields
- Title (Placeholder)
- Fullwidth Header Module
- Title
- Subheading Text
- Button #1 Link Text
- Button #2 Link Text
- Button #1 Link URL
- Button #2 Link URL
- Fullwidth Image Module
- Image URL
- Title Text
- Alt
- Image Module
- Image URL
- Link URL
- Title Text
- Alt
- Number Counter Module
- Title
- Number
- Pricing Table Module
- Title
- Subtitle
- Currency
- Sum
- Button Text
- Button URL
- Slider Module Slides
- Title
- Button Text
- Button URL
- Title Text
- Alt
- Tab Module
- Title
- All Modules, Rows and Sections
- Background Image URL
Enable Shortcodes via PHP
The following PHP code (taken from my Divi Shortcode Enabler plugin) will search the page / post content for the various module fields, and process any shortcodes contained within them.
if (!class_exists('DBDSE_EnableShortcodesInModuleFields')) {
class DBDSE_EnableShortcodesInModuleFields {
static public function supportedFields() {
return apply_filters(
'dbdsp_fields_to_process',
array(
'et_pb_accordion_item' => array('title'),
'et_pb_blurb' => array('title', 'url', 'image', 'alt'),
'et_pb_button' => array('button_url', 'button_text'),
'et_pb_circle_counter' => array('title', 'number'),
'et_pb_cta' => array('title', 'button_text', 'button_url'),
'et_pb_image' => array('url', 'src', 'title_text', 'alt'),
'et_pb_number_counter' => array('title', 'number'),
'et_pb_counter' => array('percent'),
'et_pb_pricing_table' => array('title', 'subtitle', 'currency', 'sum', 'button_text', 'button_url'),
'et_pb_tab' => array('title'),
'et_pb_slide' => array('heading', 'button_text', 'button_link', 'image_alt', 'title_text'),
'db_pb_slide' => array('button_text_2', 'button_link_2'), // Divi Booster added second slide buttons
'et_pb_fullwidth_header' => array('title', 'subhead', 'button_one_text', 'button_two_text', 'button_one_url', 'button_two_url'),
'et_pb_fullwidth_image' => array('src', 'title_text', 'alt'),
'et_pb_contact_field' => array('field_title')
)
);
}
public function init() {
add_filter('the_content', array($this, 'processShortcodes')); // Standard content
add_filter('et_builder_render_layout', array($this, 'processShortcodes')); // Theme builder layout content
add_filter('dbdse_et_pb_layout_content', array($this, 'processShortcodes')); // Global module content
}
public function processShortcodes($content) {
$modules = self::supportedFields();
do_action('dbdsp_pre_shortcode_processing');
foreach((array) self::supportedFields() as $module=>$fields) {
foreach($fields as $field) {
$regex = '#['.preg_quote($module).' [^]]*?b'.preg_quote($field).'="([^"]+)"#';
$content = preg_replace_callback($regex, array($this, 'processMatchedAttribute'), $content);
}
}
do_action('dbdsp_post_shortcode_processing');
return $content;
}
protected function processMatchedAttribute($matches) {
// Exit if not properly matched
if (!is_array($matches) || !isset($matches[0])) { return ''; }
if (!isset($matches[1])) { return $matches[0]; }
// Define character replacements
$encoded = array('%'.'22', '%'.'91', '%'.'93');
$decoded = array('"', '[', ']');
// Get the decoded parameter value
$val = $matches[1];
$val = str_replace($encoded, $decoded, $val); // decode encoded characters
$val = do_shortcode($val);
$val = str_replace($decoded, $encoded, $val); // re-encode
// Return the replacement value
$result = str_replace($matches[1], $val, $matches[0]);
return $result;
}
}
(new DBDSE_EnableShortcodesInModuleFields)->init();
}Related Post: Adding PHP to the Divi Theme
With this code in place you should find that shortcodes are now processed within the above mentioned module fields.
Want get more out of Divi?
Hundreds of new features for Divi
in one easy-to-use plugin
The Code in Enable Shortcodes via PHP doesn't seam to work or at least I coudn't make it work.
I've added the PHP above in my child theme's functions file, and tryed to use a XYZ PHP Code Plug-in shortcode in varios modules but only the shortcodes are displayed. Not the executed results.
Hey dredged, it looks like some URL encoded characters in the posted PHP code were getting incorrectly decoded in the final display of the post. I've made a slight modification to the code to bypass this (while I track down / fix the root cause). If you try the code as posted now, it should hopefully work for you. I just tested an XYZ php shortcode in the text of a button module and it now works there. I hope it helps, but let me know if not. Thanks!
This is a great concept.
Here are some additions I made to the code. Now you are able to also access the image title and image alt fields of image, fullwidth-image, blurb and slider.
Also the placeholder in a DIVI contact form is changeable (see last row).
Are you still working on the issue with the global modules?
'et_pb_accordion_item' => array('title'),
'et_pb_blurb' => array('title', 'url', 'image', 'alt'),
'et_pb_button' => array('button_url', 'button_text'),
'et_pb_circle_counter' => array('title', 'number'),
'et_pb_cta' => array('title', 'button_text', 'button_url'),
'et_pb_image' => array('url', 'src', 'title_text', 'alt'),
'et_pb_number_counter' => array('title', 'number'),
'et_pb_pricing_table' => array('title', 'subtitle', 'currency', 'sum', 'button_text', 'button_url'),
'et_pb_tab' => array('title'),
'et_pb_fullwidth_header' => array('title', 'subhead', 'button_one_text', 'button_two_text', 'button_one_url', 'button_two_url'),
'et_pb_fullwidth_image' => array('src', 'title_text', 'alt'),
'et_pb_slide' => array('src', 'title', 'image_alt'),
'et_pb_contact_field' => array('field_title')
Hey PolarRacing, thanks so much for sharing your additions. I've integrated them into the code above and the next version of Divi Shortcode Enabler (1.0.8)*. I've also updated the code in the post to include support for both global modules and theme builder templates. Thanks again!
* All except the slide src / title which I still have to do… 😉
Hi dan, I've just purchased the plugin but is there any way we can use customized shortcode.
I have some shortcode generated by other plugin, I would like to add those shortcodes into the button url but no luck… Can you please advise? Thank you.
Hi Winson, are you able to tell me the name of the other plugin, and give me an example of the shortcode you're trying to use? How to get it to work will depend on what exactly the shortcode is outputting. Thanks!
Oh sorry – Found the link to shortcodes enabler plugin – DOH! Pl delete my ignoramus comment on the divi booster plugin page!
Ha ha, sure thing, Aveesh! I've deleted the comment. Let me know if you have any questions about the plugin, etc. Thanks!
I can't buy this plugin! The checkout process does not work..
Hi danbilabs, sorry about that. It looks like the caching plugin I use was interfering with the checkout process. I've disabled the caching now. If you'd like to try again, you can do so at:
https://divibooster.com/divi-shortcode-enabler/
Give me a shout if you are still unable to get it to work. Thanks!
Not working on my divi installation, any help?
Hi Salvatore, are you able to share a link to the page you're working on and point out where on the page the shortcode is being used? Thanks!
Hey Dan,
If I wanted this to ONLY work in the et_pb_code block, what should my array be?
Hey Kevin, the Divi Code module (et_pb_code) should process shortcodes by default, so there is no need for the code here. Just put your shortcode in the code module and (as long as the shortcode is defined) it should be processed / displayed. But let me know if you're having trouble getting your shortcode to work in the code module. Cheers!
Hi
Thank you for the post. Any suggestion on how to do this for Fullwidth Header and Fullwidth image? I tried 'et_pb_fullwidth_header' => array('title') but it did not work
Hey MAK, that should work… I tried it and it works for me. I've updated the post and added an entry for the Fullwidth Image module's Image URL field ("src"). Perhaps you can try copying the full updated code and see if it helps. If not, I've just updated my (currently free) Shortcode Enabler Plugin to include this change, so you may like to give that a go. Assuming you're still having problems with it, is there any chance you're able to send me a link to the page you're working on so that I can take a look? Thanks!
P.S. If you need support for any other fields in these modules, let me know.
Dan, I've been trying to get in touch with you for the last week by all means available.
This plugin isn't working anymore on my Divi, everything is up to date.
Please contact me asap
Hi Bob, I'm very sorry I haven't been able to respond to you sooner. I've just released an update to Divi Shortcode Enabler (v1.0.4) which I believe should fix the issue you were having. I hope it helps, but please let me know if not. Thanks!
hi !
great & helpful !
possible to add circle_counter and number_counter in your array ???
regards,
Lamine
Hi Lamine, I've just updated the code above and the plugin to add support for shortcodes in the title and number fields of the circle / number counter modules. Hope it helps, and let me know if you need anything else. Thanks!
Hi Dan. I'm trying to apply a shortcode for a product image in layout builder in Divi Library. I'm guessing this isn't possible right now, meaning the workflow through a pre build layout?
Hi Matti, you should be able to use this to enable shortcodes in layouts saved to the Divi Library, as long as they are not global library items. Global items are processed differently and my code can't handle them yet. This is something I hope to be able to handle in the future – but for now it isn't possible, unfortunately.
Another factor is which module you are using to add the product image. If it's the image module the code here should handle it. If it's another module, perhaps you could let me know which module and module field you're using to add the image and I'll see if I can add support for it. Thanks!
Holy Sh..! This is unbelievably helpful and you're just frickin' awesome! It is flawless and works spectacularly for making links with affiliate shortcode in them flow nicely from page to page. I am thankful that you are around.
Ha ha! You're very welcome, Luke!