Loading Third Party Scripts In The Epoch iFrame
This document is primarily aimed at developers of plugins related to comments, such as anti-spam plugins, looking to integrate with Epoch. It is also aimed at those looking to create a site-specific integration with Epoch.
Developers of third party plugins related to comments are encouraged to submit a pull request to add compatibility with their plugins inside of the epoch_add_thirdparty_scripts_in_footer
function. That function is located in includes/functions.php.
Background
One of the options in Epoch is to use an iFrame (the good kind) to load comments in. This mode creates allows for the total overriding of the theme's styles for comments and the comment form.
NOTE: When not using the iFrame, everything should work as expected. If it does not, please open an issue.
Using the iFrame requires us to load Epoch's JavaScript, and its dependencies (jQuery, Handlebars and Visibility) inside of the iFrame. We chose not to run wp_header
or wp_footer
insides of the iFrame, as that would defeat the purpose of using the iFrame and cause unnecessary scripts and styles to be loaded.
Instead we run the action epoch_iframe_footer
inside of the iFrame. While you could use that hook to echo a script tag, or any other data, we use and recommend that you use the filterepoch_iframe_scripts
to load your scripts, as detailed in the next section.
Adding Your Scripts Inside The Epoch iFrame
In order to use the epoch_iframe_scripts
filter to load your scripts, you must register your scripts using wp_enqueue_script
or wp_register_script
. You must do so at or beforewp_enqueue_scripts
is fired.
Once you script handles are registered, you must add them to the array of handles exposes by epoch_iframe_scripts
. For example if your script is registered with the handle "fancy-pants" then you would register it with Epoch like so:
add_filter( 'epoch_iframe_scripts', function( $scripts ) { $handles[] = 'fancy-pants'; return $handles; });<br>
You can also add multiple scripts, like this:
add_filter( 'epoch_iframe_scripts', function( $handles ) { $my_script_handles = array( 'georg', 'friedrich', 'handel' ); if ( ! empty( $handles ) && is_array( $handles ) ) { $handles = array_merge( $handles, $my_script_handles ); }else{ $handles = $my_script_handles; } return $handles; });
IMPORTANT This method will not include any handles registered as a dependency. If your scripts have dependencies, you must add their handles at epoch_iframe_scripts
as well. jQuery will always be loaded, as it is used by Epoch.
Localized Data
If you are using wp_localize_script
to inject translation or other data to JavaScript, there is no special handling required. Epoch uses wp_localize_script()
and the object it adds to the DOM is available to the scripts we load inside of the iFrame.