Let’s face it, the standard WordPress/BuddyPress emails suck. They are boring, confusingly formatted and have no branding whatsoever. For a regular WordPress site this isn’t that bad because usually your visitors do not receive your emails that often. With BuddyPress your users get loads of emails for all the notifications they receive. Creating a good looking email template does wonders for the feel of your network, and really gives it a more unique feel. Can you imagine Twitter of Facebook sending out completely text based email notifications to you? That is so 90’s! Let’s get started!

Install the awesome WP-Better-Emails plugin

This is one hell of a hidden gem on the WordPress repository. If it wasn’t for Sarah Gooding her post on WPMU I’d probably would have never found it. This plugin gives you a great looking email template to work from, and that’s exactly what we’re going to do.

Changing the email template into something more BuddyPress worthy

WordPress Blue? Screw you! BuddyPress red is what we want! So when you’ve installed the plugin visit the Email Options page under Settings, can then click on the Template Options tab. Here you can modify the template that get’s sent to your users, and below is the code I’ve used to give it a nice BuddyPress feel:

[html]

<table border="0" cellspacing="0" cellpadding="0" width="100%" bgcolor="#f9f9f9">
<tbody>
<tr>
<td style="padding: 15px;" align="center">
<table cellspacing="0" cellpadding="0" width="550" bgcolor="#ffffff">
<tbody>
<tr>
<td>
<div style="border: solid 1px #d9d9d9;">
<table id="header" style="line-height: 1.5; font-size: 12px; font-family: Helvetica, Arial, sans-serif; border: solid 1px #FFFFFF;" border="0" cellspacing="0" cellpadding="0" width="100%;" bgcolor="#ffffff">
<tbody>
<tr>
<td colspan="2" height="30" background="%blog_url%/wp-admin/images/white-grad-active.png"></td>
</tr>
<tr>
<td style="line-height: 32px; padding: 0 0 0 30px;" valign="baseline">
<span style="font-size: 32px;"><a style="text-decoration: none;" href="%blog_url%" target="_blank">%blog_name%</a></span></td>
<td style="padding: 0 30px 0 0;" align="right" valign="baseline">
<span style="font-size: 14px; color: #777777;">%blog_description%</span></td>
</tr>
</tbody>
</table>
<table id="content" style="color: #444; line-height: 1.5; font-size: 12px; font-family: Arial, sans-serif; padding: 20px 30px 0 30px;" border="0" cellspacing="0" cellpadding="0" width="100%;" bgcolor="#ffffff">
<tbody>
<tr>
<td style="padding: 20px 0; border-top: solid 1px #d9d9d9;" colspan="2">%content%</td>
</tr>
</tbody>
</table>
<table id="footer" style="line-height: 1.5; font-size: 12px; font-family: Arial, sans-serif; padding: 0 30px 15px 30px;" border="0" cellspacing="0" cellpadding="0" width="100%;" bgcolor="#ffffff">
<tbody>
<tr style="font-size: 11px; color: #777777;">
<td style="border-top: solid 1px #d9d9d9;" colspan="2">
<img style="padding: 15px 0 0 0;" src="%blog_url%/wp-content/plugins/buddypress/bp-themes/bp-default/_inc/images/email_logo.png" alt="Powered by BuddyPress" width="32" height="32" align="right" />
<div style="padding: 15px 0 1px 0;"><img style="vertical-align: middle;" src="%blog_url%/wp-admin/images/date-button.gif" alt="Date" width="13" height="13" /> Email sent the %date% @ %time%</div>
<div><img style="vertical-align: middle;" src="%blog_url%/wp-content/images/comment-grey-bubble.png" alt="Contact" width="12" height="12" /> For any request, please contact <a href="mailto:%admin_email%">%admin_email%</a></div></td>
</tr>
</tbody>
</table>
</div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>

[/html]

 

Upload the BuddyPress Logo to your uploads folder

We’re almost done, the only thing we need to do now is upload a nice BuddyPress logo to the uploads folder. The template I made already reserved a spot for the logo in the footer, so all we need to do is upload it. Save the logo below to your hard drive and upload it into wp-content/uploads/

Of course you can replace this logo for any logo you like, actually I’ll advise you to do that.

Check the results

This template is based on the BP-Default color scheme, but you can adjust the template with a code editor with some basic html/css knowledge. Change the background color, text color and images and you have a completely custom email template going out to your users!

Have fun creating your custom email template. If you’ve made any cool ones be sure to show me in the comments!

Tagged

Leave a Reply

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