Today I will explain how to customize WordPress HTML Email Templates in case you are one of the user of Email Templates plugin. If you are yet not using HTML email in WordPress, what are you waiting for? Plain text emails are primitive!
I got many requests in the forums asking how to make small changes in the template or css without breaking the changes on plugins updates so today I will explain how to use the built in functions of the plugin to create your own templates. We are going to build this as a separate plugin so no matter if you change your theme or update plugins, the changes will always remain.
So the first thing we need to do is define the plugin main file and header
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Custom Email Template | |
| * | |
| * @wordpress-plugin | |
| * Plugin Name: Custom Email Template | |
| * Plugin URI: http://wordpress.org/plugins/email-templates | |
| * Description: Custom template for Email templates plugin | |
| * Version: 1.0.0 | |
| * Author: Damian Logghe | |
| * Author URI: https://timersys.com | |
| * License: GPL-2.0+ | |
| * License URI: http://www.gnu.org/licenses/gpl-2.0.txt | |
| */ | |
| // If this file is called directly, abort. | |
| if ( ! defined( 'WPINC' ) ) { | |
| die; | |
| } | |
| define( 'CUSTOM_MAILTPL_PLUGIN_FILE' , __FILE__); | |
| define( 'CUSTOM_MAILTPL_PLUGIN_DIR' , plugin_dir_path(__FILE__) ); | |
| define( 'CUSTOM_MAILTPL_PLUGIN_URL' , plugin_dir_url(__FILE__) ); |
Now we copy the template from original plugin
Once it’s defined we simple copy the templates folder located in email-templates/admin/templates/ into our custom plugin and do the necessary changes to it. The template is separated in partial files. The header and footer ones are the ones really used when sending email and the others are just to be loaded in the customizer preview mode. I’m not going into details of how editing the html of those templates as is not the main purpose of this tutorial but as a tip let me say that css works better on emails where used as inline properties.
Also it’s important to leave the ids and class names of the html elements so the customizer will work fine with your template.
The resulting structure should look like this:
Adding the magic filter
Ok so we defined our plugin header and included the templates file and modified them to our needs. Now we just need to add the magic filter that will replace the plugin template with our custom one. For that simple add:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| /** | |
| * Custom Email Template | |
| * | |
| * @wordpress-plugin | |
| * Plugin Name: Custom Email Template | |
| * Plugin URI: http://wordpress.org/plugins/email-templates | |
| * Description: Custom template for Email templates plugin | |
| * Version: 1.0.0 | |
| * Author: Damian Logghe | |
| * Author URI: https://timersys.com | |
| * License: GPL-2.0+ | |
| * License URI: http://www.gnu.org/licenses/gpl-2.0.txt | |
| */ | |
| // If this file is called directly, abort. | |
| if ( ! defined( 'WPINC' ) ) { | |
| die; | |
| } | |
| define( 'CUSTOM_MAILTPL_PLUGIN_FILE' , __FILE__); | |
| define( 'CUSTOM_MAILTPL_PLUGIN_DIR' , plugin_dir_path(__FILE__) ); | |
| define( 'CUSTOM_MAILTPL_PLUGIN_URL' , plugin_dir_url(__FILE__) ); | |
| /** | |
| * Replace original template with our custom one | |
| */ | |
| add_filter('mailtpl/customizer_template', 'custom_mailtpl_template'); | |
| function custom_mailtpl_template( $template ) { | |
| return CUSTOM_MAILTPL_PLUGIN_DIR . "/templates/default.php"; | |
| } |
Enjoy your new HTML email template for WordPress
Once you add the filter to tell the plugin where to find the new template we are done. Of course don’t forget to activate the Custom template plugin we just created or it won’t load the new template.
Have you created a nice template? Share it on the comments below!
Hi! Thank you for this. I was first trying editing the core plugin files but once I did a change I couldn’t revert them.
Now I’m going to try this, but I have a question:
What happens if I include the filter before editing the new template? I just want to be able to refresh the preview in the customizer as I’m tweaking the files in order to test the changes.