23 March 2013
Category:
Blog
Comments: Comments Off on Make WordPress Emails Pretty and Responsive With WPMUDEV’s New Plugin!

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!

Woohoo! Pretty WordPress notification emails!

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-labelled 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

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 a 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

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 in to 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!

Contact Info:

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!

Related posts:

  1. Get Pretty HTML Emails For WordPress With the Free WP Better Emails Plugin One of the very first interactions you have with your...
  2. Send HTML Emails with WordPress and the e-Newsletter Plugin We’re very excited to introduce our brand new e-Newsletter plugin...
  3. WordPress HTML Newsletters: Create Beautiful Emails with SendPress SendPress lets you create, send, manage and track HTML emails...

Comments are closed.