How-To Guides

How to Customize WordPress Emails with Header and Footer (Plugin & Code Method)

Vinay Shukla

25 Jun 2025 — 7 min read

Emails are a powerful branding tool, but most WordPress users don’t pay attention to them. Whether it’s a new user signup, password reset, or order confirmation, every email from your website represents your business. The problem? Default WordPress emails look plain and unprofessional, missing a chance to strengthen your brand.

In this guide, I’ll show you how to customize WordPress emails by adding a header and footer with your logo, colors, and branding. You’ll learn two methods—one using a plugin (easy, no coding) and another using custom code (for advanced users). First, let’s start with the plugin method, perfect for beginners who don’t want to edit code.

Why Customize WordPress Emails?

From my experience working with many WordPress sites—eCommerce stores, blogs, and business websites—I’ve noticed one common problem: boring, generic emails. Clients often ask me, "Can we make these emails look more professional?" or "How do we add our logo and brand colors to emails?"

Think about it—just like your website design represents your brand, your emails should too. When users receive a password reset link or order confirmation, a well-designed, branded email builds trust and makes your business look more professional and reliable.

What Does a Branded Email Look Like?

A well-branded WordPress email generally includes:

A logo at the top (header)
A footer with copyright or contact info
Matching colors and fonts used on your site
Maybe even social media icons or a call-to-action

Why Use a Plugin?

Pros:

No coding required
Easy to preview and test email designs
You can change colors, logos, and layouts from your dashboard
Often works well with WooCommerce, membership plugins, etc.

Cons:

Adds another plugin to your site (some users want to keep it lightweight)
Limited design customization in free versions

Still, for beginners or for quick setups, I recommend the plugin route.

Recommended Plugin: WP HTML Mail

There are many plugins for customizing emails in WordPress, but the one I personally recommend is:

WP HTML Mail – Email Designer (Free on WordPress.org)

Step-by-Step: Customizing WordPress Emails Using WP HTML Mail

Step 1: Install and Activate the Plugin

Go to your WordPress dashboard → Plugins → Add New
Search for “WP HTML Mail”
Click Install Now and then Activate

📸 [PLACEHOLDER FOR PLUGIN INSTALLATION SCREENSHOT]

Step 2: Go to the Email Customizer Settings

Once activated:

In the WordPress dashboard, go to Email Templates from the left menu
Click on “Email Designer”

Now you will see a live preview editor with header, content, and footer areas.

📸 [PLACEHOLDER FOR EMAIL DESIGNER SCREENSHOT]

Step 3: Add Your Header

Upload your logo at the top
Set the background color (match your website header or brand palette)
You can add a tagline or welcome message

Step 4: Customize Body Content (Optional)

Choose default font style, link color, button style
Adjust the layout padding and alignment

Step 5: Add Footer Content

Add social icons, contact info, or unsubscribe link
Include your business name and year:
© 2025 Host Niki. All rights reserved.

📸 [PLACEHOLDER FOR FOOTER CUSTOMIZATION SCREENSHOT]

Step 6: Preview Email Types

Click on the Preview tab to see:

Password Reset Emails
New Account Emails
WooCommerce Order Emails (if you’re using WooCommerce)
Custom emails from plugins like Contact Form 7, WPForms, etc.

Step 7: Save Changes

Once you’re happy with the email template, click Save.

That’s it – now all your WordPress emails will have your branding with the header and footer you designed!

Bonus: Add Conditional Styling for WooCommerce Emails

If you're running an ecommerce store, WP HTML Mail has an add-on for WooCommerce that allows you to design order confirmation, shipping emails, etc.

You can:

Show product images
Add order summary tables
Match the color palette of your store

Link: https://wp-html-mail.com/woocommerce-email-customizer/

This is useful if you want to give your buyers a great first impression after purchase.

Alternatives to WP HTML Mail

While I prefer WP HTML Mail, here are a few other email customization plugins:

Plugin Name	Pros	Link
Kadence WooCommerce Email Designer	Great for WooCommerce emails	Kadence Plugin
YayMail	Drag-and-drop WooCommerce email builder	YayMail
Email Templates by WPFactory	Simple HTML wrapper for default emails	WPFactory Plugin

As a WordPress developer and digital strategist, I often work with clients who prefer not to add too many plugins. However, I still recommend using a plugin like WP HTML Mail for sites where:

The client doesn’t want to handle any code
Fast deployment is needed
WooCommerce or membership plugins are in use
Frequent design changes are expected

But if you're someone who likes a lightweight site (like me 😎), then customizing email templates without plugins (using code) is cleaner and more performance-friendly.

Customizing WordPress Emails Without a Plugin (Code Method)

Now, let’s talk about my personal favorite: the no-plugin method.
As someone who builds and manages multiple WordPress sites, I prefer clean, lightweight solutions. Adding a plugin for every small feature bloats the site and increases the chance of conflicts or slowdowns. That’s why I often go the custom code route, especially for things like email branding.

Why Go Plugin-Free?

Let me tell you why I, Vinay Shukla, prefer this approach:

Lightweight – No need to load extra plugin files.
Full Control – You control the HTML, layout, and logic.
Easy to Deploy – Great for developers or agency owners managing multiple sites.
Customizable per Email Type – You can target specific email types if needed.

How WordPress Sends Emails

WordPress uses the wp_mail() function (a wrapper around PHP's mail()) to send all default emails — like new user notifications, password resets, etc.

To customize emails, we’ll use the following WordPress hooks:

wp_mail_content_type – To set content type to text/html
wp_mail or wp_mail_headers – To modify headers (optional)
wp_mail or other filters – To modify email content

But most importantly, we’ll use wp_mail filter to wrap the default email body inside our own HTML template with header and footer.

Step-by-Step: Customize WordPress Emails via Code

Step 1: Allow HTML in WordPress Emails

By default, WordPress sends emails in plain text. So first, we’ll tell WordPress to send HTML emails.

Add this to your functions.php or in a custom plugin:

add_filter( 'wp_mail_content_type', function() {
    return 'text/html';
});

Step 2: Create Your Email Wrapper Template

Now let’s create a function that wraps your email message inside a branded template.

function my_custom_email_template($message) {
    ob_start();
    ?>
    <div style="font-family: Arial, sans-serif; background-color: #f4f4f4; padding: 20px;">
        <div style="max-width: 600px; margin: auto; background: #fff; border-radius: 8px; overflow: hidden;">
            <!-- Header -->
            <div style="background-color: #004d40; color: #fff; padding: 20px; text-align: center;">
                <h2 style="margin: 0;">Host Niki</h2>
                <p style="margin: 0; font-size: 14px;">Your Trusted Hosting Partner</p>
            </div>

            <!-- Body -->
            <div style="padding: 30px; color: #333;">
                <?php echo wpautop($message); ?>
            </div>

            <!-- Footer -->
            <div style="background-color: #e0f2f1; padding: 20px; text-align: center; font-size: 12px;">
                © <?php echo date('Y'); ?> Host Niki. All rights reserved. | <a href="https://hostniki.com">Visit Website</a>
            </div>
        </div>
    </div>
    <?php
    return ob_get_clean();
}

Step 3: Filter Email Messages

Now apply this template to all outgoing emails:

add_filter('wp_mail', function($args) {
    $args['message'] = my_custom_email_template($args['message']);
    return $args;
});

And that’s it! Now all WordPress emails will be wrapped inside your branded header and footer.

Ready-to-Use Email Templates (Copy & Paste)

Here are a few HTML email designs you can directly use in your theme’s functions.php. Each one uses basic HTML and inline CSS, so they work across all email clients.

Template 1: Minimal Clean

function minimal_clean_email_template($message) {
    return '
    <div style="background:#f9f9f9;padding:20px;">
        <div style="max-width:600px;margin:auto;background:#ffffff;border:1px solid #ddd;padding:30px;">
            <h2 style="color:#333;">Host Niki</h2>
            <hr>
            '.wpautop($message).'
            <hr>
            <p style="font-size:12px;color:#999;text-align:center;">
                This email was sent by Host Niki<br>
                <a href="https://hostniki.com">www.hostniki.com</a>
            </p>
        </div>
    </div>';
}

Template 2: Green Band with Logo

function green_band_email_template($message) {
    return '
    <div style="font-family:sans-serif;background:#f4f4f4;padding:20px;">
        <div style="max-width:600px;margin:auto;background:#fff;">
            <div style="background:#004d40;color:#fff;padding:20px;text-align:center;">
                <img src="https://hostniki.com/logo.png" style="height:40px;" alt="Host Niki">
            </div>
            <div style="padding:30px;color:#444;">
                '.wpautop($message).'
            </div>
            <div style="background:#eee;padding:15px;text-align:center;font-size:12px;">
                Need help? Email <a href="mailto:[email protected]">[email protected]</a>
            </div>
        </div>
    </div>';
}

Use any of these in your email filter like this:

add_filter('wp_mail', function($args) {
    $args['message'] = green_band_email_template($args['message']);
    return $args;
});

Bonus: Downloadable HTML Template + Code Integration

As a thank you for reading this article, here’s a bonus full email template that you can download and implement on your WordPress site.

File: `email-template.html`

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Email from Host Niki</title>
</head>
<body style="margin:0; font-family:Arial, sans-serif; background:#f3f3f3;">
  <div style="max-width:600px;margin:30px auto;background:white;padding:20px;border-radius:8px;">
    <div style="background:#004d40;color:white;padding:20px;border-radius:6px 6px 0 0;">
      <h1 style="margin:0;">Host Niki</h1>
    </div>
    <div style="padding:20px;color:#333;">
      {{email_content}}
    </div>
    <div style="background:#eee;padding:15px;text-align:center;font-size:12px;">
      &copy; 2025 Host Niki. Powered by <a href="https://hostniki.com">hostniki.com</a>
    </div>
  </div>
</body>
</html>

Replace {{email_content}} with the actual email message.

PHP Code for Integration (functions.php)

function hostniki_email_template($message) {
    $template = file_get_contents(get_template_directory() . '/email-template.html');
    $final_message = str_replace('{{email_content}}', wpautop($message), $template);
    return $final_message;
}

add_filter('wp_mail', function($args) {
    $args['message'] = hostniki_email_template($args['message']);
    return $args;
});

Make sure to place email-template.html inside your active theme folder.

Final Thoughts

Customizing WordPress emails without plugins gives you complete control over how your brand is presented. It might require a bit of effort initially, but once done, you’ll have clean, branded, professional emails — without bloating your site.

As I always say — “Do it once, do it right.”

Whether you’re a developer, agency owner, or just a passionate WordPress user like me, this approach gives your site a professional edge.

Over to You!

So now you have two solid options:

Plugin method (easy and great for beginners)
No-plugin method (lightweight and powerful)

If you liked this guide, feel free to connect with me at digitalvinay.in. Drop a comment, share your feedback, or request more templates!

Until next time,
Vinay Shukla
Website Developer, Marketer, and WordPress Enthusiast