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

19 thoughts on “Creating a custom email template for your BuddyPress emails

Author gravatar

0

I’ve been playing around with the plugin and its really nice but there is one thing I’m not really happy with: it is not really compatible with multisite environments. if you network activate it, every blog owner on your setup can change the templates. it would be awesome if the editing was only available for the site admin.

    Author gravatar

    0

    All your BuddyPress emails are sent out through the main blog, so if you only activate it on your BP blog, that problem is solved :-). I’m not 100% sure but you could use a whitelabel or membership plugin that hides the settings screen for site admins 🙂

      Author gravatar

      0

      well, they might be sent out through the main blog but if the plugin is only active on the main blog, the mails sent out from a subdomain blog are not formatted! Just created a test blog and commented, the mails look ugly as ever if the plugin is only active on the main blog.
      I’m not running BP though… just plain multisite.

        Author gravatar

        0

        I see your problem, but then again this is more of a BuddyPress tutorial 🙂 It would be neat to have it working for MultiSite.. have you asked the author?

          Author gravatar

          0

          hehe, yes I know that BP now works without multisite too and yes, I have opened a forum thread on wordpress DOT org.

    Author gravatar

    0

    If the author updates the plugin, please let me know so I can update the article and tell the MultiSite users it also works 100% with MS enabled 🙂

Author gravatar

0

Excellent feature! Just what we’re looking for. Will check out the plugin right away. Good work!

Author gravatar

0

Great! Thanks for sharing this I am implementing it as I type 🙂

    Author gravatar

    0

    I have it up and running and I’m so happy with it, this should be core! I also use the group email plugin and it seems to wrap round these nicely too.

Author gravatar

0

After installing this plugin on my test site, i can access my Admin Area anymore, i dont know what to do now. thank God its on my test site.

Author gravatar

0

This is awesome, thanks!

Anyone know how you could include a members avatar when you get messages for Pm’s, friend requests, etc?

Author gravatar

0

Eхcellent wаy of ԁesсribing, and good post to tаke infоrmatіon
сonceгnіng my pгеѕentаtiоn focus, which i am going
to convey іn сollege.

Author gravatar

0

I’ve actually installed it on my blog and it works awesome. The only concern I have is with the fallback option when the recipients email client does not support html. I haven’t been able to see what the email looks like then. I’d hate for my email recipients to receive broken html code in their inbox. it would look really spammy!

Author gravatar

0

guess what dude, It’s Awesome. And of course, thanks a lot. Also, I wish i could do more than just saying thanks, may be in near future… 🙂

Leave a Reply

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