The State of HTML Email in WordPress

#

One question that I’ve been asked a few times while working on WP Offload SES is how it handles HTML email. By default, WordPress sends out all email as plain text, and even though plain text emails perform better, it’s only natural that people want to customize their site emails for a more professional look.

The answer as far as WP Offload SES is concerned is relatively simple – whatever you jam into the email content, it will send – but when taking a look at the WordPress ecosystem in general, things get a bit trickier. In this week’s article, we’ll be taking an in-depth look at HTML emails in WordPress, and at the best practices for sending HTML emails from your site.

What Makes a Good HTML Email?

A good HTML email is one that works consistently across most, if not all, email clients. It should also be accessible, and provide fallbacks for if the recipient can’t view HTML emails (ideally, that would mean including a plaintext alternative).

HTML in emails is still light years behind HTML that you might be used to using on a website. For example – instead of using divs, tables are still king. This is thanks in large part to Microsoft Outlook using the Microsoft Word rendering engine for displaying emails.

Can you imagine trying to make a good layout that works in multiple different versions of Microsoft Word, as well as countless other email clients? I know I can’t.

Moving things in MS Word sucks

Because emails are all using such antiquated code, and many email clients handle things slightly differently, it’s not surprising that responsive emails are still very hit or miss as well. Responsive emails can be created with a combination of CSS media queries and thoughtful HTML, but unfortunately not all clients support media queries. With that in mind, a good HTML email should try to use media queries when possible, while at the same time looking good at full size in clients that don’t support them.

How WordPress Handles HTML Email

As I mentioned earlier, WordPress sends out all mail with a “text/plain” content type. There is a filter that can be used to change the content type of email to text/html, but using them on their own results in some ugly looking emails:

Bad formatting in WordPress notification email

WordPress doesn’t include its own templates, or any form of HTML markup at all, which means that WordPress emails that are sent with text/html have incomplete (or basically non-existent) formatting.

Even more disappointing, WordPress doesn’t provide official support for multi-part emails (emails that display plaintext as a fallback for when HTML isn’t available). There is an issue on the WordPress Trac to add support for them, but with that having been open for almost ten years, I’m not super optimistic about that getting implemented soon.

How Plugins Handle HTML Email

So with a lack of solid support for HTML emails in WordPress core, it’s only natural that plugin developers set out to solve that problem themselves. Plugins like WooCommerce and Easy Digital Downloads (both of which work splendidly with WP Offload SES) often include their own HTML email templates, and sometimes include methods of extending those templates to make it easier for other developers who want to customize things further.

There are also dedicated email template plugins, which aim to improve the appearance of all emails that are sent out by providing a template that should work well in most situations.

Email Templates

The Email Templates plugin is a popular solution for templating the emails that WordPress sends out. It’s compatible with most email sending plugins (including WP Offload SES!) and makes it easy to customize the content and appearance of the emails that WordPress sends out by default. I especially liked how the templates are editable from the WordPress customizer:

Screenshot of the Email Templates plugin

It provides a nice, relatively neutral email template by default, which would be more than enough for most needs. It also allows you to add custom templates or extend the default template that is provided, so you could easily customize it further if needed.

One potential disadvantage (or advantage, depending on your perspective) that I found with this plugin was that it uses the templates for ALL emails, regardless of the email and its contents. That means that when another plugin sends an email with a template, there’s a potential for both templates to be used.

WP HTML Email

Another highly-rated plugin for sending HTML emails is the WP HTML Email plugin. Like the Email Templates plugin, it’s compatible with WP Offload SES and most other email plugins, and it provides a simple template that will work in most situations.

Screenshot of the WP HTML Email template page

Unlike the Email Templates plugin, it also has paid extensions that integrate with some of the most popular plugins, including WooCommerce, Easy Digital Downloads, and more. It also allows you to turn off email templating for emails sent through some popular plugins, which should help reduce the number of conflicts.

Screenshot of the per-plugin settings for WP HTML Email

It also inlines all CSS styles, which means that the CSS won’t get overridden by different email clients, resulting in a more consistent look across the board.

All in all, the WP HTML Email plugin is pretty slick, is thoughtful about what makes a good HTML email, and is a plugin that I could definitely recommend if the situation called for it.

How should you handle HTML Email?

While WordPress core has a way to go before it has good support of HTML emails, plugin developers have helped to pick up some of the slack. I don’t believe that we’ll see a truly accessible solution until WordPress fixes the bug that interferes with multipart/mixed content emails so that both the plain text and HTML version is sent out.

It’s probably not time-effective to roll your own solution that works on multiple clients (although I might write a bit about that in the future). Instead, I’d probably recommend leaving emails as plain text and letting separate plugins (like WooCommerce, etc.) include their own HTML emails as needed. But if you’re running a larger site that sends out lots of emails, or if you need a consistent design across your emails, then maybe something like the WP HTML Email plugin could fit the bill for you.

Does your site send out HTML emails? If so, what do you use to send them out? Let us know in the comments.

About the Author

Matt Shaw

Matt is a WordPress plugin developer located near Philadelphia, PA. He loves to create awesome new tools with PHP, Javascript, and whatever else he happens to get his hands on.