HTML code to create the email address

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.