Correct Way of Sending WordPress HTML Email

While working on the WordPress website, you need to send HTML emails. These emails can be for registration, orders placed, deals, coupons, etc. When you use the wp_mail method, it sends an email in plain text format. But, we always want our site to email in a nice format. It should have a logo, better design elements, a footer, social links, etc. instead of having only plain text content.

Let’s say you create your email content with HTML tags and inline styling. You are now expecting your email to render the HTML. But instead of rendering HTML, your email will display along with the HTML tags. That is obvious as this is how plain text email works.

WordPress provides a filter wp_mail_content_type to set the email content type to text/html. This content type will allow you to use all HTML tags in your email. This filter automatically rendered HTML in an email.

To use this filter you need to add below code in your functions.php file.

add_filter( 'wp_mail_content_type', function( $content_type ) {
    return 'text/html';
} );

After this, when your emails are sent through your application, they will be the HTML email. Now you are under the impression that you have resolved the problems with HTML emails. Actually, it resolves your problems with custom emails but breaks the formatting of WordPress core emails. When someone posts a comment on your blog, WordPress sends an email to the admin/author. Similarly, other examples of WordPress core emails are – forgot password, reset password, WordPress version update.

The filter wp_mail_content_type breaks the formatting of all these core emails. WordPress uses line breaks in the content of their core emails. And for some reason line breaks will not appear when we use the wp_mail_content_type filter.

Let’s say I have added the wp_mail_content_type filter in the theme. Now the commenting email will appear in your inbox as shown in the screenshot below.

comment-email

You can notice that there are no line breaks in the content. This is not really good for website reputation. You should have fixed it. There is a workaround for it.

Correct Way of Sending WordPress HTML Email

As a website owner, you want both custom and core emails to work with correct formatting. To do this, remove the wp_mail_content_type from your code. I’d recommend never using this filter on your WordPress site.

Instead, use the wp_mail method wisely in your custom emails. Read the wp_mail documentation carefully. You will find it has a parameter called $headers. This parameter will fix our problem.

You just need to use this $headers parameter in your custom code. It will send your custom HTML email. This parameter needs to be sent explicitly in your code so it will not affect your core emails.

Your code for custom email will be something like below.

<?php
$message = '<h1>Email Heading</h1><p>Email Content</p>';
$headers = array('Content-Type: text/html; charset=UTF-8');
$to = get_option('admin_email');
$subject = "My Email Subject";
$mail = wp_mail($to, $subject, $message, $headers);
?>

Here, I set the content type text/html using the $headers parameter. This will be for your custom HTML email.

And now test your core email, say commenting one. It will display as the screenshot below.

new-comment-email

I hope you understand how to send WordPress HTML emails correctly. Please share your thoughts and suggestions in the comment section below.

Related Articles

If you liked this article, then please subscribe to our YouTube Channel for video tutorials.

Leave a Reply

Your email address will not be published. Required fields are marked *