We have an awesome SendFox for WordPress plugin. SendFox is an email provider that I wanted to integrate to Divi Builder’s Email Opt-in Block. To just add it to the list of other email providers. Here’s the story and the solution at the end. I am proud to share it, because I was not really able to find anything anywhere, besides one raw example on GitHub.
Firstly, I was able to build a custom wrapper for SendFox API following the Divi’s standards and just used one of the other classes there as an example.
1 2 | class ET_Core_API_Email_SendFox extends ET_Core_API_Email_Provider { // ... |
Then I was able to test it by putting it into the folder with other providers at Divi/core/components/api/email/SendFox.php and hardcoding it into the Divi/core/_metadata.php
It worked and I was happy. Because it took me only a few hours to build and test.
Contacting Divi support
I was desperate to add SendFox to Divi’s Email Opt-in as one of the email providers, so I contacted Divi’s support to see if it’s possible to just add my class into the core. I was not able to find any Divi Builder API documentation or samples on this topic.
The support team replied saying it is actually possible to register your custom component for Divi with some code.
Here was the code quote from the core:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | /** * 3rd-party components can be registered by adding the class instance to this array using it's name as the key. * * @since 1.1.0 * * @param array $third_party { * An array mapping third party component names to a class instance reference. * * @type ET_Core_3rdPartyComponent $name The component class instance. * ... * } * @param string $group If not empty, only components classified under this group should be included. */ return $third_party_components = apply_filters( 'et_core_get_third_party_components', array(), $group ); |
They told me:
It should be pretty straight forward but here’s a quick example:
Elegant Themes Support
Following the with the sample code using this filter hook:
1 2 3 4 5 6 7 8 | function your_provider_add_divi_provider() { require_once plugin_dir_path( __FILE__ ) . 'class.yourprovider.php'; $instance = new ET_Core_API_Email_YourProvider(); return array( 'YourProvider' => $instance ); } add_filter( 'et_core_get_third_party_components', 'your_provider_add_divi_provider' ); |
I was satisfied because I thought that I will just copy & paste this sample into my plugin and it will work. And I did not even test yet 😉
All the nightmare started right here.
The provided sample did not work.
It was simply not adding my “SendFox” provider to the list of all email providers.
I knew my custom class and the naming were correct, because it was working if hardcoded into the core directly.
It was something with this sample that was not letting it work.
You know, I spent days debugging Divi Builder’s core and googling to figure this out.
What I found on Google?
Thanks to some guy on GitHub who shared another sample of using this hook for another 3rd party email provider:
1 2 3 4 5 6 7 8 | function bloom_mc4wp_initialize_component( $third_party_components, $group ) { include_once __DIR__ . '/core/components/api/email/MC4WP.php'; $third_party_components['mc4wp'] = new ET_Core_API_Email_MC4WP( 'bloom', 'default' ); return $third_party_components; } add_filter( 'et_core_get_third_party_components', 'bloom_mc4wp_initialize_component', 10, 2 ); |
I got some hints. I noticed the parameters fed into new ET_Core_API_Email_MC4WP(); class
Here’s a list of what I tried:
- copying parameters from above example
- writing my own custom parameters
- empty parameters
- using example provided by Divi support
- different hook priority values
None of this helped.
I had to dig into the Divi Builder core to find out how registration of 3rd party components works.
Here am I saving your time, countless hours of debugging and a heavy head.
The Solution.
You wonder why “et_core_get_third_party_components” is not working?
Because there are 2 certain rules that are not written anywhere, defining how the custom component key should be typed and what parameters should be passed into your custom class.
I still didn’t have enough time to fully grasp the essence of these requirements, but was able to crack the code and make it work.
The working code:
1 2 3 4 5 6 7 8 9 10 11 12 | function gb_sf4wp_add_divi_provider( $third_party_components ) { if( class_exists( 'ET_Core_API_Email_Provider' ) ) { require_once plugin_dir_path( __FILE__ ) . 'includes/divi-email-provider.php'; $third_party_components['sendfox'] = new ET_Core_API_Email_SendFox( 'builder', 'default', '' ); } return $third_party_components; } add_filter( 'et_core_get_third_party_components', 'gb_sf4wp_add_divi_provider', 1 ); |
Pay attention to highlighted things (line 7).
First requirement: the component key is not allowed to have capital letters, should be all lower case. Not sure why though. If you have any capital letter there, it’s just not displayed in the dropdown.
Second requirement: The parameters passed into your custom class should be exactly the same ( ‘builder’, ‘default’, ” );. From my understanding, it tells the core that this components is related to the set of core components and is whitelisted.
What these parameters are in the defined class fyi:
1 | public function __construct( $owner, $account_name, $api_key = '' ) |
You don’t need to pass the API key as the third parameter, because it will not let you add your API key and pick the email list in this case. It will be assuming you have already defined them somewhere else. (???)
And still it will not be working.
Here’s how Divi Builder’s et_core_get_third_party_components() looks like in the core (comments removed):
1 2 3 4 5 6 7 8 9 10 11 | if ( ! function_exists( 'et_core_get_third_party_components' ) ): function et_core_get_third_party_components( $group = '' ) { static $third_party_components = null; if ( null !== $third_party_components ) { return $third_party_components; } return $third_party_components = apply_filters( 'et_core_get_third_party_components', array(), $group ); } endif; |
I am not sure how it is supposed to work if it is ALWAYS NOT NULL in this condition (lines 5-7). This is some weird stuff that only Elegant Themes developers would know.
But thanks God it is a pluggable function.
Third requirement: Replace the et_core_get_third_party_components() function.
Use this code in your plugin to make this filter hook finally work:
1 2 3 4 5 6 | function et_core_get_third_party_components( $group = '' ) { $third_party_components = apply_filters( 'et_core_get_third_party_components', array(), $group ); return $third_party_components; } |
This will remove the dumb “not null” check.
And finally, you component is registered properly and it works now.
Here’s the final code:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 | /** * Integration: Fix Divi Builder's method for adding 3rd-party components * * @since 1.1.0 */ function et_core_get_third_party_components( $group = '' ) { $third_party_components = apply_filters( 'et_core_get_third_party_components', array(), $group ); return $third_party_components; } /** * Integration: Add SendFox email provider to Divi Builder opt-ins * * @since 1.1.0 */ function gb_sf4wp_add_divi_provider( $third_party_components, $group ) { if( class_exists( 'ET_Core_API_Email_Provider' ) ) { if( $group === 'api' || $group === 'api/email' ) { require_once plugin_dir_path( __FILE__ ) . 'includes/divi-email-provider.php'; $third_party_components['sendfox'] = new ET_Core_API_Email_SendFox( 'builder', 'default', '' ); } } return $third_party_components; } add_filter( 'et_core_get_third_party_components', 'gb_sf4wp_add_divi_provider', 1, 2 ); |
All the best!
Leave a Reply