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
- Columns
- Column Link URL
- Contact Form Module
- Redirect URL
- Success Message
- Message Pattern
- Field Titles (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
- Frequency
- Button Text
- Button URL
- Rows
- Row Link URL
- Slider Module Slides
- Title
- Button Text
- Button URL
- Title Text
- Alt
- Social Media Follow Module
- Account Link URL
- Tab Module
- Title
- Toggle Module
- Title
- All Modules, Rows and Sections
- Background Image URL
- Module Link URL
- CSS ID
- CSS Class
- Third-Party Plugins
- Divi Areas Pro - Section Popup ID
- Divi Supreme Pro - Card Carousel Module Image
Enable Shortcodes via PHP
The following PHP code (taken from my Divi Shortcode Enabler plugin) will search the page / post content for 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_toggle' => 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
add_filter('et_pb_module_shortcode_attributes', array($this, 'preventShortcodeEncodingInModuleSettings'), 11, 3);
}
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;
}
public function preventShortcodeEncodingInModuleSettings($props, $attrs, $render_slug) {
if (!is_array($props)) { return $props; }
if (!empty($_GET['et_fb'])) {
if ($render_slug === 'et_pb_image' && !empty($attrs['url']) && strpos($attrs['url'], '[') !== false && strpos($attrs['url'], ']') !== false) {
$props['url'] = $attrs['url'];
$props['url'] = str_replace(array('[', ']', '"'), array('[', ']', '"'), $props['url']);
}
}
return $props;
}
}
(new DBDSE_EnableShortcodesInModuleFields)->init();
}
/* Add global modules filter */
add_filter('the_posts', 'dbdse_filter_global_modules');
function dbdse_filter_global_modules($posts) {
if (!dbdse_is_frontend() || empty($posts) || count($posts)!==1 || empty($posts[0]->post_type) || empty($posts[0]->post_content)) {
return $posts;
}
if ($posts[0]->post_type === 'et_pb_layout') {
$posts[0]->post_content = apply_filters('dbdse_et_pb_layout_content', $posts[0]->post_content);
}
return $posts;
}
function dbdse_is_frontend() {
return (!is_admin() && !isset($_GET['et_fb']));
}Related Post: Adding PHP to the Divi Theme
Dear this is not working with global buttons I suppose because of dbdse_et_pb_layout_content is something that is not part of divi standard theme, how can I fix this?
Hey Vassilis, you're right. Apologies for the oversight. I've updated the post to include the definition of this filter. I think that should be all that is needed to get it working on your global buttons, but please let me know if you need any further help with it. Thanks!
Hi, is there a reason the text module is not listed here?
Hi Wolf N. Paul, the reason it's not listed here is that the text module supports shortcodes (in the content) by default, so there is not need to do anything to add it.
I have an update to Divi Shortcode Enabler (v1.2.5) in the works that will add shortcode support to the "Module Link URL" field of all modules, including the text module.
If you need to be able to run shortcodes in another field within the text module settings, please let me know. Thanks!
Hey Dan!
I was struggling with Divi and its downsides but finding this plugin just saved me so much time. thank you thank you thank you! Now, i did have to slightly modify the plugin to add support to the column links, but that was very simple to do. i inserted `'et_pb_column' => array('link_option_url'),` at line 16 of the module fields php file in the core folder. wanted to share with you, from one developer to another. thanks again for making this plugin!
Hey Aaron! I'm really glad it's helping, and thanks so much for taking the time to share your addition. I'm including it in the next version of the plugin (v1.1.8), so you won't need to redo the code change each time I update. Much appreciated!
I've just released v1.1.8 with support for the shortcodes in the column links. Thanks again for all your help, Aaron!
Hi Dan, does this code works with extra's theme as well?
I'm working in the theme builder trying to get a blurb URL field dynamically populated by a short-code created by php code using code snippets plugin but it doesn't work. I also tried populate the the blurb Title with a test short code but nothing.
A little help would be very appreciated. Thanks in advance.
Hey Cesar, I've just tested in Extra and can see it isn't working for some reason. Notably, my Divi Shortcode Enabler plugin is working in Extra, though. They are both based on the same code (as given in this post), but the plugin has some improvements that I haven't yet fed back into the code in this post and presumably one of these is necessary for Extra. I'll try to do this as soon as possible and update here when I have. Sorry for the hassle, and thanks for pointing the issue out.
P.S. if you are in a hurry to get up and running, one thing you could do is use Divi Shortcode Enabler for now and then I will happily give you a full refund when the updated code is available (or whenever you ask for one).
Dan, I tried the above code to use a shortcode inside the title of an accordion. The accordion however, is displayed inside a tab module, using a shortcode to the Divi library. Unfortunately, it doesn't work.
Do you have any idea why?
Regards from Crete!
Hey Jurrie, my guess would be that whatever you're using to embed the accordion shortcode is calling do_shortcode(…) on the in-built Divi shortcode for the library item. To make the code above work, the result of this may need to have the 'the_content' filters applied, as this is (one of the places) where the code above does its work. So you'd wrap the do_shortcode call like so: apply_filters('the_content', do_shortcode(…))
Hopefully that makes sense, but if not perhaps you can explain where you're getting the shortcode from (i.e. are you using a plugin to generate the shortcode, or doing it via custom code?) so that I can advise you more precisely. Thanks!
I attempted to apply the above code to DIVI version 4.9.4, but I am unable to get it to work. I tried setting the section background image using a shortcode from the scrollsequence plugin. Also tried it to other DIVI fields with simpler short codes but without success. If the above snippet works out, I would absolutely purchase the full plugin. Thank you
Hey Constantinos, unfortunately the scrollsequence shortcode produces a (complex) block of HTML, which won't work with the code above (which expects, e.g., a single URL to be returned when used on a URL field). I've had a play around with the scrollsequence plugin and come up with a way to place the scrollsequence as a background to a Divi Builder row (which had some advantages over using a section):
https://divibooster.com/use-a-scrollsequence-as-a-divi-builder-row-background/
It's a bit involved, and will probably need some tweaking to fit your needs, but I hope it helps point you in the right direction… give me a shout if you have any questions about it, etc. Thanks!
Hi,
I have installed a photo contest plugin (https://codecanyon.net/item/photo-contest-wordpress-plugin/8320636). And contest works with a short code.
Our website has divi booster installed as well. Is divi booster blocking that code to work ?
Because I have used that same photo contest plugin installed on one more website and that website doesn't have divi booster plugin, and the short code is working fine on that website.
Please guide
Hi Mani, I'm not familiar with the plugin, but there's no intentional blocking of the plugin (or any other) by Divi Booster. Some sort of a conflict isn't out of the question, of course. Does the photo contest plugin start working if you temporarily disable Divi Booster? If so, is there any chance I'd be able to take a look at the site? If you're able to send a link (via the contact form, if you like) to a page showing the issue please do so. Thanks!