Make WordPress Emails Pretty and Responsive With WPMUDEV’s New Plugin!

By default, WordPress’s emails are pretty ugly. No logo, header, or footer or any styling at all really.

Wouldn’t it be nice to add your own branding to it? Make it look like an email someone actually wants to read — instead of looking like a dog’s breakfast of text. Not only that, but you want to make it easy for everyone that reads email on their mobiles, not to have to zoom in and scroll both horizontal and vertical to read!

Well, you can. We’re releasing a new FREE plugin that does just that — HTML Email Templates. When WordPress sends an email, our plugin intercepts that, and places a template you specify around the message!

Don’t get too excited. We haven’t included a custom email template builder, but there are absolutely LOADS of free resources around the internet where you can pick up pixel-perfect email templates if you’re looking for something more sophisticated than you might produce on your own. Keep in mind, however, you can simply enter HTML on your own. The tutorial below is for those who wish to deal with pre-made templates.

Before we get started, I’m happy to let you know the plugin is Multisite compatible too! Instead of setting the template in wp-admin, however, you set it in wp-admin/network/. But I’ll get to that later.

Step 1

We’ve got to find a template to use! I had a quick browse around for white-labeled templates that were mobile-friendly, and came across Zurb’s Responsive Email Templates. Obviously, if you already have an HTML email template for your brand, use that! I’m going to run through using this one though.

Go ahead and download the Basic Template. We’re going to modify this, and eventually use it as a responsive email template.

Step 2

Once we’ve got that downloaded, we need to modify a few things in the template to match our brand. They are:

• Spit out the content of the email in the message area
• Modify the logo image
• Change the “Basic” word in the top right to a link to our blog
• Update the information in the footer; Facebook, Twitter, Google+, Email and Telephone links

Replacing the Textual Content

There are several text elements in the template that are currently lorem ipsum- we don’t want any of that!

For starters, on line 47, replace “Hi, Elijah Baily” (wrapped in an h3 element), with “Hey there!” Unfortunately, since the plugin simply filters the wp_mail() function, we don’t have a whole lot of information available to us. What would be stellar is if we had the subject, receiver profile, etc. But we don’t! So we’re going to have to keep it pretty vanilla for now.

After that, you’re going to want to change the following paragraph classed “lead” to “Your WordPress website needs your attention! Read below and get onto it!” A nice directive so the email gets noticed by its reader, and action is taken.

Finally, replace the following paragraph (a huge chunk of lorum ipsum) with “MESSAGE”. Including the <p> tag! The plugin filters the template for the MESSAGE string and replaces it with the message sent by WordPress.

If you want, there’s an extra section called “callout” which is like a call to action. I’m going to delete it, but if you can think of a reason to use it, by all means! This is where having more information about the email being sent would come in handy.

The header

We also need to replace the logo and the “Basic” text in the top. I’ve gone ahead and made a 200×50 logo for it, but feel free to replace it with your own!

Once you’ve made your own logo, and uploaded it either to your server or to a sharing service such as imgur, you need the direct link — that’s the link that ends in the file name. My logo is http://i.imgur.com/XB27Xye.png. On line 25, replace the img src with your logo URL.

On the following line, where an h6 is visible, simply change “Basic” to the name of your blog.

Contact Links

The last thing to modify is the contact information at the bottom. I’ll leave this to you. The lines to edit are 62 (where you put in your social network details), and 75/76 for email and number.

And at long last your email template is complete! There’s one last thing to do before we can use it though. Email templates (for cross-client compatibility) should have all styles inline. Never expect an email client to be smart enough to pull in an external resource (i.e. CSS). Images are fine, but many clients don’t play well with external CSS links OR <style> tags.

Step 3

Now we’ve modified everything, we need to make the template email friendly. Email clients are more or less horrendous in the way they format and render HTML. Just look how spotty and inconsistent this comparison is between major clients we should be factoring into our work.

There are, however, two overarching rules when building HTML emails.

1. ALWAYS use tables for layouts
2. ALWAYS have inline CSS

Yep, I know this looks like the Web circa 1995, but email clients’ rendering engines are so hit and miss its the only way to create a solid layout.

Luckily with the Zurb layout we’re using, they’ve done the hard part. Using tables, that is. All that we have to do is convert the email.css into inline styles!

I’d want to put aside about five hours to do this, manually copying each style into every table, strong, a, em, and p element will take some time.

Just Kidding!

Thankfully, there’s an online service that will convert your style to be inline. There are a handful actually, but after doing some testing I’ve found the best to be the service from TorchBox Apps. I found with others, some of my styles were getting completely ignored! (Editor note: this site appears to have been taken down. Try using MailChimp’s CSS Inliner Tool instead.)

Move CSS into the template

Open up the email.css file that you downloaded when you downloaded the Zurb template. Copy it all to your clipboard.

At the top of basic.html where you see

<link rel="stylesheet" type="text/css" href="stylesheets/email.css" />

Replace it with some style tags, along with the entire CSS document you just copied.

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%20type%3D%22text%2Fcss%22%3E%0A%20%20%2F*%20PASTE%20ALL%20OF%20EMAIL.CSS%20HERE%20*%2F%0A%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;style&gt;" title="&lt;style&gt;" />

By now you should have a pretty hefty document. It’s about to get worse, but alas, that’s the way HTML Email goes.

Visit the InlineStyler, and paste your entire basic.html file into the box. It should have all your modifications we made previously, as well as an entire CSS document in the head.

Hey, presto! Inline styles! Take a moment to revel in what code looked like 15 years ago!

<h5 class="" style="margin: 0;padding: 0;font-family: &quot;HelveticaNeue-Light&quot;, &quot;Helvetica Neue Light&quot;, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;Lucida Grande&quot;, sans-serif;line-height: 1.1;margin-bottom: 15px;color: #000;font-weight: 900;font-size: 17px">Contact Info:</h5>

Now one caveat with this process is that it escapes quotes font-family declarations (as you can see from the snippet above). Place all the newly converted code back into basic.html, and do a find and replace

"

with

"

Your email template is now ready for WordPress!

Step 4

The last thing to do is to paste all of basic.html into the box provided by the plugin. You can find the plugin page under Settings > HTML Email Template. Paste it in, and away you go!

If you want to test it, hit “Preview,” and the plugin will send you a test email to see how it looks!

Boom.

So there you have it. Pretty email notifications from WordPress! It’s long been an annoyance of mine, so I’m stoked I can finally have pretty emails everywhere! Get yours here with the new plugin.

What are your thoughts? Are you using an existing solution I don’t know about? Let me know below!

Tags:

• email