Generate Emails with HTML & CSS in WordPress

According to Chris Coyier, here are the things you can NOT do when creating emails:

Include a <head> section with styles. Apple Mail.app supports it, but Gmail and Hotmail do not, so it’s a no-no. Hotmail will support a style section in the body but Gmail still doesn’t.
Link to an external stylesheet. Not many email clients support this, best to just forget it.
Background-image / Background-position. Gmail is also the culprit on this one.
Clear your floats. Gmail again.
Margin. Yep, seriously, Hotmail ignores margins. Basically any CSS positioning at all doesn’t work.
Font-anything. Chances are Eudora will ignore anything you try to declare with fonts.

What you CAN do is:

In two words, inline styles. It’s not as awful as you might think, since we are basically developing a one-off email, inline styles are not nearly as egregious as using them on a website. Need a big green title for a block of text?

1	<h3 style="color: #1c70db;">NOW $159</h3>

The big can-do is images. Think creatively on what you can do with images.
Since you will be using tables, think gridular. Grids are designers friends, there is lots you can do with a grid.

Layout Techniques

Most people suggest using table, tr, and td tags for page layout within an HTML email. Tables are the most stable option, especially if you’re creating email messages that require a more complicated multi-column layout. Gmail simply removes div tags, and coverage in other clients like Hotmail is spotty. Also, floating div tags don’t work in several email clients, so any floating elements can be placed in a table.
Using a div tag for a layout or background color is a better option when you’re working with a single-column layout. Applying styles to div tags using inline styles versus a style tag will help keep that style in place when the email ships out to the masses.

On the bright side, you can scale back on div tags if they’re causing problems, and use the almost universally supported table, tr, and td tags for anything you can’t accomplish reliably with a div.

Sending Emails with HTML and CSS in WordPress

First we need to tell WordPress what content type are we going to use for our emails:

1
2
3
4
5

add_filter ("wp_mail_content_type", "cvf_mail_content_type");
function cvf_mail_content_type() {

return "text/html";
}

Then let’s modify the wp_mail function by adding some html contents and css on the $message parameter:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<?php
function cvf_email($to) {

$from = get_option('admin_email');
$headers = 'From: Carlo Fontanos <"' . $from . '">';
$subject = "Welcome to CarloFontanos ".$username."!";

ob_start();
// Include header contents
include("email_header.php");
?>

A very special welcome to you, <?php echo $username ?>. Thank you for joining CarloFontanos.com!
We hope you enjoy your stay at CarloFontanos.com. If you have any problems, questions, opinions, praise, comments, suggestions, please feel free to contact us at any time

<?php
// Include footer contents
include("email_footer.php");

$message = ob_get_contents();

ob_end_clean();

wp_mail($to, $subject, $message, $headers);
}

Other Tips from Chris Coyier

Remember to use full paths to images, not relative paths. (e.g. http://www.yourserver.com/email/images/logo.gif). Also, link to images from your own server, not anyone elses.
Check with your ISP before you go out sending thousands and thousands of emails, they might think you are a spammer.
Test, test, and test again with as many different email clients as you can possibly get access to. You will definetly want to test the major online clients like Gmail, Yahoo, and Hotmail, but also definitely check Outlook, Mail.app, and as many other desktop clients as possible.
Don’t go over 600px in width. Even that is pushing it. If your design can handle it, 440px is closer to ideal.
Think of any extra CSS you may use as upward-compatibility. You can always include some header style CSS if you want, but think of it as a bonus for people using email clients that support it. Then turn it off completely and make sure the design still makes sense.
Try not to look like SPAM. Pretty obvious, but just writing good code and honest copy should keep you out of the can here. Your HTML email is definitely NOT the place for a Viagra joke.
Just like in web design, it doesn’t hurt to think above the fold. Meaning what users will see before they have to scroll.
Use your footer like a footer. This is a great place for lots of things including phone numbers and addresses, about information, unsubscribe options, and perhaps a little reminder of what this email is and why the reader is on the list.
OBEY THE LAW. The CAN-SPAM act became law on Jan. 1, 2004. It says there many things you must do as a commercial email-er. Highlights are basically don’t be deceptive, and that you MUST include a physical mailing address as well as a working unsubscribe link.

Do you need help with a project? or have a new project in mind that you need help with?

Contact Me