The State of HTML Email in WordPress in 2022

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 emails as plain text, and even though plain text emails perform better, it’s only natural that people will want a custom email design for a more professional look.

The answer, as far as WP Offload SES is concerned, is relatively straightforward. Whatever you jam into the email content, it will send. However, when looking at how WordPress handles HTML content in emails, things get a bit trickier. In this article, we’ll be taking an in-depth look at WordPress HTML email, and at the best practices for sending HTML emails from your site.

What Makes a Good WordPress 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 if the recipient can’t view HTML emails (ideally, that would mean including a plain text alternative).

HTML in emails is still light years behind the HTML that you use on a WordPress website. For example, instead of using HTML div elements for layouts, tables are still king in 2021. This is thanks in large part to Microsoft Outlook using the Microsoft Word rendering engine for displaying emails, which it has done for years.

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.

Because emails use such antiquated code, and every email client handles that code slightly differently, it’s not surprising that responsive emails are still very hit or miss. Responsive emails can be created with a combination of CSS media queries and thoughtfully crafted HTML. Although not all clients support media queries, the landscape has improved over the last few years. With that in mind, a good WordPress 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 in plain text, with a text/plain content type. There is a filter that can be used in PHP to change the content type of email to text/html, but using this on its own results in some ugly looking emails:

WordPress doesn’t include its own templates, or any form of HTML markup at all. This means WordPress emails 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 plain text as a fallback when HTML rendering isn’t available). There is an issue on the WordPress Trac to add support for them, but it’s been open for 11 years. It’s hard to be optimistic about it being implemented soon.

This also isn’t ideal if you’re sending out email notifications that you need to track, as tracking views can only be implemented in HTML emails.

How Plugins Handle WordPress HTML Email

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

There are also dedicated WordPress email template plugins. These 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 WordPress emails. It’s compatible with most WordPress plugins that send emails (including WP Offload SES!) and makes it easy to customize the content and appearance of WordPress’ default emails. I especially like how the templates are editable from the WordPress customizer:

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

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

WP HTML Mail

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

If you need something with a bit more style, WP HTML Mail includes over 20 premade templates, all of which are free and can be further customized:

Another feature that sets it apart from Email Templates is that it also has paid extensions that integrate with some of the most popular plugins and e-commerce platforms, 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.

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 Mail plugin is pretty slick, is thoughtful about what makes a good WordPress HTML email, and is a plugin that I could definitely recommend if the situation called for it.

How Should You Handle WordPress HTML Email?

While WordPress core has a way to go before it offers good support for HTML emails, plugin developers have helped to pick up some of the slack. I don’t believe 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 recommend leaving emails as plain text and letting plugins (like WooCommerce, etc.) include their own HTML emails. If you’re running a WordPress site that sends out lots of emails, or if you need a consistent design across your emails, then maybe a plugin like WP HTML Mail could fit the bill for you.

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

This entry was posted in WP Offload SES, Email and tagged WordPress, Email, WP Offload SES.

.replybox-fallback, .replybox-fallback ul { list-style: none; }

David Nash says:

October 22, 2019 at 6:03 am

Ironically this issue arose for me yesterday, I needed to send a multipart email. I found the bug you mention in the article, and was pleased to see that it looked like it was heading in the right direction toward a release in a future WordPress version. Being a little worried, like yourself about it actually making a release I decided to implement the patch. It didn’t work. I looked at the SES plugin and discovered that it overrides the wp_mail function and jumps straight to the PHP mailer class, so patching wordpress wouldn’t work. I found that changing the SES plugin – Email.php file in the __construct replacing the $this->body( $message );with the following solved my issue. if (is_array($message)){ foreach ( $message as $type => $bodies ) { foreach ( (array) $bodies as $body ) { if ( 'text/html' === $type ) { $this->body($body); } elseif ( 'text/plain' === $type ) { $this->altBody($body); } } }}else{ $this->body( $message );}This code is essentially what is added to the wp_mail patch. My call to the wp_mail function: $messages = array('text/plain' =>'plain text', 'text/html' =>'<p>html content</p>'); $retval= wp_mail($to,$subject,$messages,$headers);This seems to do the trick. It would be great if something similar could be added to the plugin.

Bet Hannon says:

October 22, 2019 at 8:22 am

Do any of these HTML email plugins help with email accessibility? (Which is really hard!)

Matt Shaw says:

October 23, 2019 at 6:46 am

Hmm, good question. I think they’ll help out at least a little bit, but I’m sure improvements could be made. I think if accessibility is your main concern, plain text or a custom solution is probably the safest bet.

Reply

Mehmood Ahmad says:

October 22, 2019 at 11:05 am

Gutenberg have an ability to completely change this old customizer look and it can also add a ton of other features also. I will love to see how it goes….

Ross McKay says:

October 22, 2019 at 3:02 pm

A couple of interesting plugins there! For those of us crafting "bespoke" HTML emails, it’s worth looking at the responsive emails guides at MailChimp and other email list providers. It’s their business to help people send good emails, so a few of them have good guides on that. It’s not too hard getting a nice responsive design in emails these days, one that works well across various desktop and mobile readers. And worth noting these two marvellous resources: * https://caniuse.email/ * https://www.caniemail.com/

Matt Shaw says:

October 23, 2019 at 6:48 am

Nice, I didn’t know about the caniuse for emails! I’ve also found that the Litmus and EmailOnAcid blogs are a treasure trove of information.

Reply