How to replace email notifications with custom layout?
Built-in Customization Options
Before using this filter, consider the built-in Email Template Customization options. You can customize colors, logo, text, and even use a custom HTML template directly from the plugin settings without writing code.
Use this filter only when you need programmatic control over email content, such as dynamic templates based on user roles or conditional content.
REQUIREMENTS
To be able to implement this guide, you need to learn how to insert PHP snippets to your website.
You can find guide here: WP Beginner
<?php
add_filter('bp_better_messages_overwrite_email', 'override_messages_emailer', 10, 4);
function override_messages_emailer( $bool, $user_id, $thread_id, $messages ){
$gmt_offset = get_option('gmt_offset') * 3600;
/**
* Get user which will receive email
*/
$user = get_userdata( $user_id );
/** Getting subject */
$subject = $messages[0]->subject;
$email_subject = '[' . get_bloginfo('name') . '] You have unread messages:' . $subject;
$thread_url = esc_url( Better_Messages()->functions->add_hash_arg('conversation/' . $thread_id, [], Better_Messages()->functions->get_link($user_id) ) );
/**
* Composing html messages list
*/
$messageHtml = '<table style="margin: 0 0 20px!important;width: 100%;"><tbody>';
$last_id = 0;
foreach ($messages as $message) {
$sender = get_userdata($message->sender_id);
$timestamp = strtotime($message->date_sent) + $gmt_offset;
$time_format = get_option('time_format');
if (gmdate('Ymd') != gmdate('Ymd', $timestamp)) {
$time_format .= ' ' . get_option('date_format');
}
$time = wp_strip_all_tags(stripslashes(date_i18n($time_format, $timestamp)));
$author = wp_strip_all_tags(stripslashes(sprintf(__('%s wrote:', 'bp-better-messages'), $sender->display_name)));
$message = wp_strip_all_tags(stripslashes($message->message));
if ($last_id == 0 || $last_id != $sender->ID) {
$messageHtml .= '<tr><td colspan="2"><b>' . $author . '</b></td></tr>';
}
$messageHtml .= '<tr>';
$messageHtml .= '<td style="padding-right: 10px;">' . $message . '</td>';
$messageHtml .= '<td style="width: 1px;white-space: nowrap;vertical-align: top;"><i>' . $time . '</i></td>';
$messageHtml .= '</tr>';
$last_id = $sender->ID;
}
$messageHtml .= '</tbody></table>';
/**
* Composing Email HTML
*/
ob_start(); ?>
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Simple Transactional Email</title>
<style>
/* -------------------------------------
INLINED WITH htmlemail.io/inline
------------------------------------- */
/* -------------------------------------
RESPONSIVE AND MOBILE FRIENDLY STYLES
------------------------------------- */
@media only screen and (max-width: 620px) {
table[class=body] h1 {
font-size: 28px !important;
margin-bottom: 10px !important;
}
table[class=body] p,
table[class=body] ul,
table[class=body] ol,
table[class=body] td,
table[class=body] span,
table[class=body] a {
font-size: 16px !important;
}
table[class=body] .wrapper,
table[class=body] .article {
padding: 10px !important;
}
table[class=body] .content {
padding: 0 !important;
}
table[class=body] .container {
padding: 0 !important;
width: 100% !important;
}
table[class=body] .main {
border-left-width: 0 !important;
border-radius: 0 !important;
border-right-width: 0 !important;
}
table[class=body] .btn table {
width: 100% !important;
}
table[class=body] .btn a {
width: 100% !important;
}
table[class=body] .img-responsive {
height: auto !important;
max-width: 100% !important;
width: auto !important;
}
}
/* -------------------------------------
PRESERVE THESE STYLES IN THE HEAD
------------------------------------- */
@media all {
.ExternalClass {
width: 100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
.apple-link a {
color: inherit !important;
font-family: inherit !important;
font-size: inherit !important;
font-weight: inherit !important;
line-height: inherit !important;
text-decoration: none !important;
}
#MessageViewBody a {
color: inherit;
text-decoration: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.btn-primary table td:hover {
background-color: #34495e !important;
}
.btn-primary a:hover {
background-color: #34495e !important;
border-color: #34495e !important;
}
}
</style>
</head>
<body class="" style="background-color: #f6f6f6; font-family: sans-serif; -webkit-font-smoothing: antialiased; font-size: 14px; line-height: 1.4; margin: 0; padding: 0; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;">
<table border="0" cellpadding="0" cellspacing="0" class="body" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background-color: #f6f6f6;">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"> </td>
<td class="container" style="font-family: sans-serif; font-size: 14px; vertical-align: top; display: block; Margin: 0 auto; max-width: 580px; padding: 10px; width: 580px;">
<div class="content" style="box-sizing: border-box; display: block; Margin: 0 auto; max-width: 580px; padding: 10px;">
<!-- START CENTERED WHITE CONTAINER -->
<table class="main" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%; background: #ffffff; border-radius: 3px;">
<!-- START MAIN CONTENT AREA -->
<tr>
<td class="wrapper" style="font-family: sans-serif; font-size: 14px; vertical-align: top; box-sizing: border-box; padding: 20px;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;">
<p style="font-family: sans-serif; font-size: 16px; font-weight: bold; margin: 0; Margin-bottom: 15px;">Hi <?php echo $user->display_name; ?>,</p>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;">You have unread messages: "<?php esc_attr_e($subject); ?>"</p>
<?php echo $messageHtml; ?>
<p style="font-family: sans-serif; font-size: 14px; font-weight: normal; margin: 0; Margin-bottom: 15px;"><a href="<?php echo $thread_url; ?>">Go to the discussion</a> to reply or catch up on the conversation.</p>
</td>
</tr>
</table>
</td>
</tr>
<!-- END MAIN CONTENT AREA -->
</table>
<!-- START FOOTER -->
<div class="footer" style="clear: both; Margin-top: 10px; text-align: center; width: 100%;">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: separate; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width: 100%;">
<tr>
<td class="content-block" style="font-family: sans-serif; vertical-align: top; padding-bottom: 10px; padding-top: 10px; font-size: 12px; color: #999999; text-align: center;">
<span class="apple-link" style="color: #999999; font-size: 12px; text-align: center;"><a href="<?php echo home_url(); ?>"><?php echo get_bloginfo('name'); ?></a></span>
</td>
</tr>
</table>
</div>
<!-- END FOOTER -->
<!-- END CENTERED WHITE CONTAINER -->
</div>
</td>
<td style="font-family: sans-serif; font-size: 14px; vertical-align: top;"> </td>
</tr>
</table>
</body>
</html>
<?php
$content = ob_get_clean();
/*
* Configure wp_mail to send as html and sending
*/
$content_type = function() { return 'text/html'; };
add_filter( 'wp_mail_content_type', $content_type );
wp_mail( $user->user_email, $email_subject, $content );
remove_filter( 'wp_mail_content_type', $content_type );
// If true is returned the plugin will not send email itself, if false is returned it will send.
return true;
}