Protect your email: Hiding email addresses on WordPress

Introduction

Email addresses, commonly found on webpages, are a vital point of contact for businesses and individuals alike. Without sufficient protection, these email addresses can be harvested by automated bots crawling the web. This exposes the recipient to a significantly higher risk of receiving spam emails and being targeted by phishing scams. Interacting with such emails can lead to disastrous consequences. Because of this, hiding email addresses is more important now than ever.

In two simple steps, I will show you how to keep safe by hiding email addresses using a few lines of HTML and CSS code. This ensures that bots are unable to scrape your email address, whilst keeping it visible to legitimate visitors.

While there are plugins available for WordPress which also achieve the same end result, I prefer a code based approach. It’s simpler and more elegant than installing a plugin. Using plugins is a wonderful way to expand the functionality of a WordPress website. Although plugins are a great way to enhance a WordPress website’s functionality, there are a few things to keep in mind. Whilst small, adding a plugin incurs extra load of your server, which can slow down the site down. There’s also the risk of introducing unexpected vulnerabilities.

The approach of adding the code below is preferable to me because it gives full control over the changes I make to the WordPress site. As you can see, there are only a few lines to add so the impact is much less the adding a plugin. As it doesn’t rely on external code libraries outside of my control, this makes things more secure by default.

The code

I have combined several methods from an article at Labnol to give a simple two-step solution which even beginners with WordPress should have no trouble implementing. The same code can also be used on other websites publishing systems, but the steps might vary slightly.

HTML code to create the email address

In the post itself, create a “Custom HTML” block with the following content.

<p>
    <a href = "mailto:johnATgmailDOTcom"
        onclick = "this.href=this.href
            .replace(/AT/,'@')
            .replace(/DOT/,'.')">
        <my-email data-user="john" data-domain="gmail.com"></my-email>
    </a>
</p>

This block of code works like this:

1. It defines a paragraph using the <p> and </p> tags.
2. In a similar way, it then defines the email link (anchor) using <a> and </a> tags.
   • The “href” defines what happens when you click on the link.
   • You see here the obfuscated email address.
3. When clicking the link (onclick), Javascript replaces the AT and DOT by ‘@’ and ‘.’. Your email program now receives the correct email address.
4. The <my-email> tag is used to create the actual text you see on the website. The CSS code below handles the rendering.

Note: The email address won’t be visible until the CSS code below is added to your website.

Customise the code to match the email address you are wanting to hide.

CSS code to display the email address

Go to the “Additional CSS” panel of your theme.
(WordPress Dashboard -> Appearance -> Customise -> Additional CSS)

Add the following code; modifying it to match the email address you are wanting to hide.

 my-email::after {
    content: attr(data-domain);
  }
  my-email::before {
    content: attr(data-user) "\0040";
  }

You will recognise the my-email tag from the code above. This code essentially says “show the text defined by ‘data-domain’ and ‘data-user’”.

The second part, with data-user, also includes the instruction to display an ‘@’ symbol using the ASCII reference number 0040.

Troubleshooting

These steps are fairly simple to undertake. If, when you test it, you find it’s not working, check the following:

• Do the values for the email address in the ‘href’ match the values in the ‘my-email’ tag?
• Have you got all the ” marks still?
• Do the tags have matching ‘ends’? <p> and </p>

If you would like help with this, feel free to drop me a line at:

The code in this post generated the email address above.

This article was written, in part, with assistance from AI.