email_template
Design

Creating a custom email template for your BuddyPress emails

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!

About Bowe Frankema

 Creating a custom email template for your BuddyPress emails Building communities on BuddyPress is something I’m very passionate about. The decision to focus exclusively on BuddyPress projects over the last few years inspired me to share back some of the things I've learned here on BP-Tricks! You can find me on WordCamps & BuddyCamps across the globe and on Twitter! Follow me on Twitter

I'm constantly updating my BuddyPress Hosting Guide and SiteGround and WPEngine
have proven to be a great fit for hosting your BuddyPress community.

Need some help finding the perfect host? Check out my in-depth BuddyPress Hosting guide!

Discussion

19 responses to ‘Creating a custom email template for your BuddyPress emails

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

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

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

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

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

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

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

  2. This is awesome, thanks!

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

  3. 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!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>