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
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!