Enabling Shortcodes in Divi Module Fields

This post may contain referral links which may earn a commission for this site

Enabling Shortcodes in Divi Module Fields

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 new plugin I'm working on which aims to provide support for shortcodes in places where Divi does not normally execute them, for example in various Divi module fields.

It's free during early development. There is plenty of scope for improvement, so if it doesn't do what you need, please let me know via the comments below or the contact form and I'll do my best to accommodate it.

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.

add_filter('the_content', 'db_process_url_shortcodes');

function db_process_url_shortcodes($content) {
	
	$modules = apply_filters('db_fields_to_process', 
		array(
			'et_pb_accordion_item' => array('title'),
			'et_pb_blurb' => array('title', 'url', 'image'),
			'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'),
			'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')
		)
	);
	
	do_action('db_pre_shortcode_processing');
	
	// Process the shortcodes
	foreach($modules as $module=>$fields) {
		foreach($fields as $field) {
			$regex = '#\['.preg_quote($module).' [^\]]*?\b'.preg_quote($field).'="([^"]+)"#';
			$content = preg_replace_callback($regex, 'db_process_url_shortcodes_callback', $content);
		}
	}
	
	do_action('db_post_shortcode_processing'); 
	
	return $content;
}

function db_process_url_shortcodes_callback($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
	
	// Process any shortcodes in value
	$val = preg_replace_callback('#'.get_shortcode_regex().'#', 'db_process_url_shortcodes_individual', $val);
	
	// Re-encode the parameter value
	$val = str_replace($decoded, $encoded, $val); // Encode [ and ]
	
	// Return the replacement value
	return str_replace($matches[1], $val, $matches[0]);
}

// Process matched (url encoded) shortcode
function db_process_url_shortcodes_individual($matches) {
	
	// Exit if not properly matched
	if (!is_array($matches) || !isset($matches[0])) { return ''; } 
	
	// Exit if not a defined shortcode
	if (!isset($matches[2]) || !shortcode_exists($matches[2])) { return $matches[0]; } 
	
	// Evaluate the shortcode
	$shortcode = $matches[0];
	$output = do_shortcode($shortcode);
	
	return $output;
}

Related Post: Adding PHP to the Divi Theme

With this code in place you should find that shortcodes are now processed within various module fields, including:

Link

Accordion Module
- Title
Blurb Module
- Title
- Image
- URL
Button Module
- Button Text
- Button URL
Call To Action (CTA) Module
- Title
- Button Text
- Button URL
Circle Counter Module
- Title
- Number
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
Image Module
- Image URL
- Link URL
Number Counter Module
- Title
- Number
Pricing Table Module
- Title
- Subtitle
- Button Text
- Button URL
Tab Module
- Title

Want get more out of Divi?

Hundreds of new features for Divi
in one easy-to-use plugin

Download Divi Booster

46 Comments

← Older Comments

Winson Liu on December 5, 2019 at 4:07 am

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.
Reply
- dan on December 8, 2019 at 6:14 pm
  
  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!
  Reply
Aveesh Kumar on May 7, 2019 at 12:18 pm

Oh sorry – Found the link to shortcodes enabler plugin – DOH! Pl delete my ignoramus comment on the divi booster plugin page!
Reply
- dan on May 7, 2019 at 11:17 pm
  
  Ha ha, sure thing, Aveesh! I've deleted the comment. Let me know if you have any questions about the plugin, etc. Thanks!
  Reply
danbilabs on April 30, 2019 at 6:23 pm

I can't buy this plugin! The checkout process does not work..
Reply
- dan on May 1, 2019 at 11:17 am
  
  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!
  Reply
Salvatore on April 26, 2019 at 10:28 am

Not working on my divi installation, any help?
Reply
- dan on April 26, 2019 at 7:30 pm
  
  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!
  Reply
Kevin on April 23, 2019 at 2:58 pm

Hey Dan,

If I wanted this to ONLY work in the et_pb_code block, what should my array be?
Reply
- dan on April 24, 2019 at 10:49 am
  
  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!
  Reply
MAK on April 22, 2019 at 9:49 am

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
Reply
- dan on April 25, 2019 at 12:01 am
  
  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.
  Reply
  - Bob on December 10, 2019 at 12:44 pm
    
    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
    Reply
    - dan on December 19, 2019 at 11:07 pm
      
      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!
      Reply
lamine on March 28, 2019 at 10:37 pm

hi !
great & helpful !

possible to add circle_counter and number_counter in your array ???

regards,
Lamine
Reply
- dan on March 29, 2019 at 3:58 am
  
  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!
  Reply
Matti on September 15, 2018 at 10:05 am

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?
Reply
- dan on September 17, 2018 at 2:45 am
  
  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!
  Reply
Luke on September 9, 2018 at 10:46 pm

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.
Reply
- dan on September 12, 2018 at 2:44 am
  
  Ha ha! You're very welcome, Luke!
  Reply

← Older Comments

Submit a Comment Cancel reply

More Divi Tips

Hundreds of new features for Divi
in one easy-to-use plugin

Download Divi Booster

46 Comments

← Older Comments

Winson Liu on December 5, 2019 at 4:07 am

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.
Reply
- dan on December 8, 2019 at 6:14 pm
  
  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!
  Reply
Aveesh Kumar on May 7, 2019 at 12:18 pm

Oh sorry – Found the link to shortcodes enabler plugin – DOH! Pl delete my ignoramus comment on the divi booster plugin page!
Reply
- dan on May 7, 2019 at 11:17 pm
  
  Ha ha, sure thing, Aveesh! I've deleted the comment. Let me know if you have any questions about the plugin, etc. Thanks!
  Reply
danbilabs on April 30, 2019 at 6:23 pm

I can't buy this plugin! The checkout process does not work..
Reply
- dan on May 1, 2019 at 11:17 am
  
  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!
  Reply
Salvatore on April 26, 2019 at 10:28 am

Not working on my divi installation, any help?
Reply
- dan on April 26, 2019 at 7:30 pm
  
  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!
  Reply
Kevin on April 23, 2019 at 2:58 pm

Hey Dan,

If I wanted this to ONLY work in the et_pb_code block, what should my array be?
Reply
- dan on April 24, 2019 at 10:49 am
  
  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!
  Reply
MAK on April 22, 2019 at 9:49 am

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
Reply
- dan on April 25, 2019 at 12:01 am
  
  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.
  Reply
  - Bob on December 10, 2019 at 12:44 pm
    
    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
    Reply
    - dan on December 19, 2019 at 11:07 pm
      
      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!
      Reply
lamine on March 28, 2019 at 10:37 pm

hi !
great & helpful !

possible to add circle_counter and number_counter in your array ???

regards,
Lamine
Reply
- dan on March 29, 2019 at 3:58 am
  
  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!
  Reply
Matti on September 15, 2018 at 10:05 am

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?
Reply
- dan on September 17, 2018 at 2:45 am
  
  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!
  Reply
Luke on September 9, 2018 at 10:46 pm

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.
Reply
- dan on September 12, 2018 at 2:44 am
  
  Ha ha! You're very welcome, Luke!
  Reply

← Older Comments