Protect Email Addresses and Phone Numbers from Spambots in WordPress

In this tutorial, we will learn how to protect email addresses and phone numbers from spambots on WordPress websites. By obfuscating the contact information and adding the appropriate mailto or tel links, we can ensure that the contact details remain hidden from spambots while still providing a user-friendly way for visitors to contact us. We will achieve this without relying on plugins.

Before proceeding with any customizations in WordPress, it’s essential to set up a child theme. A child theme acts as a safe and efficient way to make modifications without affecting the parent theme. If you haven’t set up a child theme yet, follow this tutorial on How to Create a Child Theme for Customization. It will guide you through the process and ensure that your customizations remain intact even after theme updates.

Adding the Obfuscation Shortcode

To obfuscate the contact information and generate the obfuscated link, along with the appropriate mailto or tel functionality, we will modify the custom shortcode in the child theme’s functions.php file. This shortcode will take the contact attribute (email or phone number) and the link text as inputs.

function obfuscate_contact_shortcode( $atts, $content = null ) {
	if ( isset( $atts['contact'] ) ) {
		$contact = $atts['contact'];
	} else {
		$contact = '';
	}
	$obfuscated_contact = obfuscate_contact( $contact );
	$link               = '<a href="';
	if ( is_email( $contact ) ) {
		$link .= 'mailto:';
	} elseif ( is_numeric( str_replace( '-', '', $contact ) ) ) {
		$link .= 'tel:';
	}
	$link .= esc_attr( $obfuscated_contact ) . '">' . esc_html( $content ) . '</a>';
	return $link;
}
add_shortcode( 'obfuscate_contact', 'obfuscate_contact_shortcode' );

Code language: PHP (php)

Explanation:

• The obfuscate_contact_shortcode() function is a modified custom shortcode that accepts the contact information (email or phone number) as an attribute and the link text as the content.
  
• Inside the function, we check if the contact attribute exists in the shortcode attributes ($atts). If it does, we assign its value to the $contact variable; otherwise, we use an empty string.
  
• We call the obfuscate_contact() function to obfuscate the contact information.
  
• Based on the type of contact information (email or phone number), we determine whether to use the mailto or tel link.
  
• Finally, we generate the HTML link with the appropriate mailto or tel functionality, ensuring security with the esc_attr() and esc_html() functions.

Obfuscating the Contact Information

To obfuscate the contact information, we will create a separate function called obfuscate_contact(). This function will convert each character of the contact information into its corresponding HTML entity.

function obfuscate_contact( $contact ) {
	$obfuscated_contact = '';
	$contact_length     = strlen( $contact );
	for ( $i = 0; $i < $contact_length; $i++ ) {
		$char                = $contact[ $i ];
		$obfuscated_contact .= '&#' . esc_attr( ord( $char ) ) . ';';
	}
	return $obfuscated_contact;
}

Code language: PHP (php)

Explanation:

• The obfuscate_contact() function takes the contact information (email or phone number) as an input.
  
• Inside the function, we initialize an empty string variable, $obfuscated_contact, to store the obfuscated contact information.
  
• We calculate the length of the contact information using strlen() to iterate through each character.
  
• For each character, we obtain its corresponding ASCII value using ord() and concatenate it with the HTML entity notation (&#) to form the obfuscated contact information.
  
• We use the esc_attr() function to ensure safe output.
  
• Finally, we return the obfuscated contact information.

Using the Obfuscated Contact Information

To utilize the obfuscation functionality, add the [obfuscate_contact] shortcode to any WordPress page or post.

For email addresses, use the following shortcode format:

[obfuscate_contact contact="example@example.com"]Contact Us[/obfuscate_contact]
Code language: HTML, XML (xml)

For phone numbers, use the following shortcode format:

[obfuscate_contact contact="123-456-7890"]Contact Us[/obfuscate_contact]
Code language: HTML, XML (xml)

Replace the contact attribute values with your desired email address or phone number, and the link text with your preferred text.

Testing the Obfuscated Contact Information

To test if it is working, View the page/post on the frontend of your WordPress website. Right-click on the webpage and select “View Page Source” or “Inspect Element” (this may vary depending on the browser you are using).

In the source code, search for the generated link that contains the obfuscated contact information. Verify that the email address or phone number is obfuscated and displayed as HTML entities (e.g., example@example.com).

If you find the obfuscated contact information in the page source, it indicates that the obfuscation is working correctly.

That’s it! You have successfully learned how to protect email addresses and phone numbers from spambots in WordPress by obfuscating the contact information using the [obfuscate_contact] shortcode. This approach provides an effective way to hide contact information and reduce the risk of spam.

If you’re interested in an alternative method to hide email addresses on WordPress websites, you can check out our tutorial on “How to Hide Email Addresses on WordPress Websites to Protect from Bots.” This tutorial uses a different technique utilizing JavaScript to dynamically insert the email address into the page.

By implementing these techniques, you can enhance the security of your website and protect your users’ contact information from spambots. Safeguarding your contact information is an essential step towards maintaining a safe and user-friendly website.