Brand your WordPress Emails

Whether or not you believe it, you already have a brand. Your brand is how the world views you. How you shape your brand and what you do with it is the critical thing. So, defining your brand (who and what you are) and building brand awareness (how people find out about you) is vital to the success of your business.

Have you ever heard people refer to themselves as “Apple people,” “Nike people,” or “Trader Joe’s” people?—HubSpot Blog

But what makes a brand so special? One way that makes a brand special is its ability to reach into people’s core values more than anything that you can buy off the shelf or the internet. We can physically touch products and company offices. However, we can’t grasp a brand with our hands. Because products will come and go,  a powerful brand name can outlast products. A brand has the power to go beyond a material thing.

According to Coschedule, a brand should have these traits:

• Evokes a feeling.
• Delivers a promise.
• Cultivates a relationship.
• Provides a unique value.

By now, you should understand what a brand is and how it plays a pivotal role in any business. Your next question might be, “Should I care about making my emails look good?”

As Canva puts it, you want your emails to stand out and grab the audience’s attention. We definitely want people to open and read our emails.

However, there’s a subtle point lurking here. It’s something that codifies a stronger and more meaningful connection. It’s the glue that binds the styling of emails with branding. And that something is consistency.

When it comes to our audience, brand consistency ranks astonishingly high in their minds.

What we’ll cover

In this article, we’ll start by looking at the benefits of HTML emails over plain text emails. This includes peeling back the covers to see how emails work in WordPress. Then, we’ll dive into one method for transforming a default WordPress email into a branded, professional email.

We’ll use Uncanny Automator Pro and the WP HTML Mail plugin to demonstrate how to leverage and customise WordPress’s emails in a real-world scenario. Here’s a sneak peek at the new account notification email that we’ll build.

Lastly, we’ll round things up with a look at some of the other tools out there to help you.

The drawbacks of using plain text emails

According to a Zendesk study, 87% of the people surveyed thought brand consistency was important. This means your transactional emails should look just as good as your website does. Your emails are an extension of your brand.

To appreciate this, let’s walk through WordPress’s workflow for handling emails.

Twenty-five email triggers

If you check the WordPress documentation, you’ll see that WordPress will send an email for 25 different scenarios. For example, email notifications go out when there’s a new user registration, an admin password change, or a new post comment.

Each specific scenario triggers a PHP function to construct an appropriate email message based on the context. This includes providing the from and the to email address, the subject line, and the email body. Each of these email attributes can be different depending on the scenario.

When there’s new user registration, for instance, the from email address defaults to the Administration Email Address in the site’s General Settings, the to email address is set to the new user’s email address, the subject line includes the phrase New User Registration, and the body contains login details.

One gotcha is that the email sender’s name will be WordPress if there is no name set in the sender’s user profile. To make sure that never happens, make sure your sender’s profile is completely filled out with your brand information.

The wp_mail() function

When the email is ready to go, the wp_mail() function goes into action. The wp_mail() function, in turn, uses PHPMailer and SMTP utilities to perform the nitty-gritty of sending the email.

By default, wp_mail() sends plain text emails. Here’s what a new user notification looks like.

It’s a start. But, we can do better to get it to the level of professionalism that your brand deserves.

As you can see, it turns out that WordPress has done the heavy lifting for us (as a good framework should). And better yet, WordPress gives us the hooks we need to customise our emails as much as we want. This is a game-changer because we’re not stuck with sending only plain text emails that have “no style.”

Designing the demo email

Designing your email isn’t just about making it look unique or aesthetically stunning. Effective email design also takes into account readability.

Simple style guide

A couple of concise 2-3 sentence paragraphs without fluff gets right to the point. Busy people will appreciate this.

Complicated steps can be broken down into lists. The appropriate use of font styles and white space makes copy easier to read and less intimidating compared to a 200-300 word slab of text.

Body content

Let’s apply the simple style guide that we just mentioned to this mini slab of text.

This is how our new account notification looks after.

The main paragraph is brief, and the important pieces of information are emphasized using white space and a couple of font styles. We also follow a standard email structure. The email opens and closes with a friendly salutation complete with a signature section at the end.

That’s our email body. Let’s work on the other design components.

Header and footer content

We’ll feature the Uncanny Automator logo front and centre in the header on a white background. We want our readers to recognise our brand right away.

For the footer, we’ll list our brand name, Uncanny Automator, with white text on a blue background. We’ll add the Automator website URL and a convenient link for contacting support.

Colour scheme

Here are the colours we’ll use:

• Black (#000000) for the text.
• White (#ffffff) for the main content background.
• Automator blue (#0790e8) for the brand accent colour.
• Dark grey (#323232) for the email background.

Creating the demo email

There are two parts for creating the email:

1. The first part is to set up the email body in an Automator recipe.
2. The second is to create the email template using the WP HTML Mail plugin.

Before you start

If you want to follow along, we recommend setting up a new user registration form first. This only takes minutes to do. Please refer to the following how-to guides:

• For a complete primer on creating registration forms, please read the Create registration forms with free forms plugins blog post.
• Our knowledge base has step-by-step tutorials for six of the most popular WordPress forms plugins.

You’ll also need the Uncanny Automator Pro version so you can create an anonymous recipe.

Set up the email body in Automator

1. Create an anonymous recipe in Uncanny Automator that registers a new WordPress user.

2. For the trigger, use the registration form you created earlier, then select the New User action to enter the required user data.

3. Add a WordPress Send an email action.

4. Keep the Send an email to at the top and the From and To fields set to their default values.

5. Type “Welcome!” for the Subject.

Next, we’ll use Automator’s TinyMCE editor and token selector (*) to compose the email body. Feel free to use our example above as a template or come up with your own.

6. Enter your text in using the editor for the Body field. We’ll want to do the following edits at a minimum.

7. Select User first name from the token selector for your intro salutation.

8. Italicise and bold at least one word in your email.

9. Pull in the username by selecting the User username token.

10. Insert the User reset password URL token.

11. Click Save.

You should have something similar to this so far.

12. Lastly, make your recipe Live. Click on all Draft toggles displayed on our recipe page to make them live.

Extra credit: If HTML and CSS come easy for you, click on the Text tab in the editor and add a fancy boxed text design to your email body. Here’s an example.

Create the email template using WP HTML Mail

1. After installing and activating WP HTML Mail, navigate to Settings > Email Template.

2. Edit the EMAIL CONTAINER.

Set the Background color to #323232.

3. Edit the EMAIL HEADER.

Click on Show image only. Use #ffffff for the Background color. Adjust the Padding as needed.

4. Edit the HEADER IMAGE.

Upload your logo from your Media Library or paste in a link to an external image file.

5. Edit the EMAIL CONTENT.

Set the Background color to #ffffff. Select the Tahoma for the Headline, Subheadline, and Content font. Set the Link styling to #0790e8.

6. Edit the EMAIL FOOTER.

Type your text and insert your links using the editor. Set the Background color to #0790e8. Use the Edit HTML input box to override the link colour to be white, so they show up on the blue background. Here’s an example HTML snippet.

7. Edit the Email sender.

8. Click the Save and Preview button toward the upper right.

Testing the demo email

After saving your email template, you can scroll down to see a preview and send a test email. WP HTML Mail also has a convenient test mode setting under the Advanced tab that allows you to override the default email address that the emails are sent to.

Let’s leave these alone for now so we can run a full end-to-end test using the Automator recipe we created earlier. Let’s see how we did.

Navigate to the new user registration page you created earlier. Fill in and submit the with a valid email address. Check your inbox. If you followed our demo, your results should be similar to our finished product.

Congrats on making your Automator email look good!

Pro tip: If you need just want to see how the Automator email looks without having to register a new user every time, then create a recipe that sends you an email when you log in or visit the homepage. Doing this allows you to iterate over your design and test multiple times without having to create and clean up test accounts.

Other tools

WP HTML Mail is a good fit for styling Automator emails because it provides a template without altering the actual email message body. This is a good thing. We want to personalise Automator notifications directly inside the recipe and only call in a plugin to style the rest (e.g., the sender, email container, header, and footer).

Email Templates sender settings.

Email Templates is another option, and it’s similar to WP HTML Mail. There are a couple of noticeable differences between the two:

1. The Email Templates plugin is accessed through the WordPress Customizer. This can be good or bad, depending on how much you like working through the Customizer.
2. WP HTML Mail supports the importing and exporting of email templates. Email Templates does not. WP HTML Mail’s import/export feature is extremely useful for making a quick backup or for taking your template to another site.

The WP Better Emails plugin also fits the bill. Unfortunately, it has not been updated to run with WordPress versions greater than 4.4.23 at the time of writing.

A word of caution: There are plugins in the WordPres.org directory like Better Notifications for WP that allow you to customise the individual WordPress email notifications. However, the primary purpose of these plugins is for overriding the message body, and they don’t provide template support.

Conclusion

Your brand is how the world sees you and gets to know you. Your brand is your promise to your customers. Brand consistency is your promise to your brand.

It’s important to make your business recognizable so people can quickly associate an email with your business. It will also help you build familiarity with potential customers who signed up to learn more about what you have to offer.—ConstantContact Blog

In this article, we learned how easy it is to harness the power of WordPress to propel your emails from blah to exquisite. We saw how tools like Uncanny Automator take advantage of WordPress’s built-in email system so you can deliver your message in your style and brand.

Now it’s your turn to share your voice, purpose, and professionalism through your new branded emails.