Creating a custom email template for your BuddyPress emails

email_template

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.

 Creating a custom email template for your BuddyPress emails

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:

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

 

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/

email logo Creating a custom email template for your BuddyPress emails

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!

Screen shot 2011 06 23 at 1.01.08 PM Creating a custom email template for your BuddyPress emails

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

BuddyPress Hosting Guide Looking for quality BuddyPress hosting? We will guide you through all the available hosting options and help you find the best webhost for your next BuddyPress project!

Something about bowe

BuddyPress fanatic, WordPress Theme designer and MultiSite community builder. Proud co-founder of PressCrew. Loves to use awesome in every sentence. Often described as a Dutch Treehugging Hippie.

19 Responses to Creating a custom email template for your BuddyPress emails

  1. Ovidiu June 23, 2011 at 2:36 pm #

    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.

    • bowe June 23, 2011 at 4:33 pm #

      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 :-)

      • Ovidiu June 23, 2011 at 8:47 pm #

        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.

        • bowe June 23, 2011 at 10:27 pm #

          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?

          • Ovidiu June 23, 2011 at 10:28 pm #

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

    • bowe June 23, 2011 at 10:30 pm #

      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 :-)

  2. Magnus June 23, 2011 at 3:35 pm #

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

    • bowe June 23, 2011 at 4:33 pm #

      Glad you’re like it Magnus :-)

  3. ewebber June 24, 2011 at 6:45 am #

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

    • ewebber June 24, 2011 at 2:51 pm #

      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.

  4. abbey June 24, 2011 at 10:47 am #

    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.

    • abbey June 24, 2011 at 10:48 am #

      I cant access i mean

  5. ewebber June 24, 2011 at 2:50 pm #

    @abbey have you tried deleting the plugin from the plugins folder?

  6. Mistafo July 15, 2011 at 9:22 pm #

    This is awesome, thanks!

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

  7. samuel September 8, 2011 at 9:37 pm #

    Nice buddypress trick. thanks you.

  8. ArtyShow September 13, 2011 at 2:22 pm #

    The plugin has been updated : http://wordpress.org/extend/plugins/wp-better-emails/

    Unfortunaletly, I didn’t work on the multisite compatibility but I plan to work on it in next release.

    Any feedback appreciated !

  9. Dead Sea Kit July 16, 2012 at 11:10 pm #

    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.

  10. DNExpert February 22, 2013 at 2:58 pm #

    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!

  11. Ayush November 3, 2013 at 7:28 am #

    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