Press "Enter" to skip to content

How to Add Clickable Email Addresses to WordPress

Making an email clickable isn’t that different from adding a regular link to your site.

In fact, you can use the exact same link button you normally use in the post editor. The key is to use the “mailto:” link protocol instead of “http://”.

Once you know this trick, it’s easy to replicate in your menu using the Custom Links option.

Widgets are a bit tougher since you need to write out the complete HTML yourself. Here’s the HTML code I used in the video to add an email link into the Custom HTML widget:

<a href="email@email.com">Email me</a>
Transcript

Hey, this is Ben from WPAnswered.com. In this video, you'll learn how to make an email address clickable and how to add it to a post, page, widget, or your menu. Right now I'm viewing a post and I'm using the Ignite theme and to add the email address, the first thing I'm going to do is to click on this "Edit Post" link that I've got within the Admin Tool Bar. In the Gutenberg editor, which you can see here, I'm going to click enter to create a new paragraph block and I'll type out some simple text. How about "email me" and I'll make up a fake email address for the purpose of this video. Now it's of course very easy to type out an email address, but the question is how do I link it? How do I link this email address so that when someone clicks on it, it does that thing where it opens up the email client installed on the visitor's computer?

Well, it's actually very simple. So the first thing you want to do is to highlight this text and I also recommend go ahead and click Command+c or if you're on a Windows machine Control+c right now to copy this to your clipboard. The next thing you're going to do is click on this link icon right here. Once you click the link icon, as you can see, and you've probably done this before, there's this URL input that pops up and normally you would type "http://" followed by some sort of web address. This protocol right here that I've highlighted, this lets the browser know that when you click on this link, what follows is a web page and the browser should open up that webpage in the window. We don't want to do that. Instead, we'll use a completely different protocol called "mailto." mailto tells the browser that everything that follows this colon is a valid email address and when someone clicks it, it should open up the mail client installed on that visitor's device.

So I will now press Command+v and that's going to paste in the email address and that's all you need to do. You can press the enter key or click this button right here and you now have an email address that is properly linked to itself. So I've updated the post, I'll view it, and I'm not going to click this link right now, but if I did click it, you would see the mail app open up on my Macbook. So that's all you need to do to add the clickable email address into a post. And as you can imagine, since pages also use the same editor, the process is no different for adding a clickable email address into a post. Next, I'll show you how to do this with your menu. So to get to the menu I'll click the "Customize" link in the admin tool bar, scroll down and you should see a "Menus" section at the bottom here.

And once I click on that, I'll see the menus that I've created. In this case I have a primary menu assigned to the primary menu location in the Ignite theme. So I'll click on this venue and then I'll click "Add items." Now I'm not adding a page or a post or a category or a tag. I'm actually adding a custom link. So I'll click on this section up here. As you can see, they've already prepopulated the field with the normal link protocol, which most of the time you will be using. But in this case, again, we want to type out "mailto:" and then the email address. And for the link text, which is also called the anchor text, or you could call it the menu label. I'm going to write out, "Email me" and click this "Add to Menu" button. Now you can see "Email me" shows up, and if I were to click on this, it would open up my mail client instead of taking me to a new page on my site.

So that's how you can add a clickable email link to your menu. And the last step I'm going to show you is how to do the same with a widget. Instead of using the Customizer, I'm going to go to the old widgets menu, which is still included for WordPress for now and they may remove it at some point, but you can always locate it underneath the Appearance menu. To add the email... since there isn't, there's not an email or a link widget, but there is a custom HTML widget and I can click on this and choose my primary sidebar widget area and click "Add widget" or I can just drag-and-drop it into the widget area I want to include it in. I'll give it a title. Once again, I'll just call it, "Email me" and inside I'm going to add some HTML.

If you're unfamiliar with HTML, this might look a little bit weird to you. I hope that you understand this as I go through this process, but I also will include this code snippet in the description below so you can just copy and paste it into your site so to add a clickable email address, I'll start by adding the name of the email address. This is going to be the anchor text. This is what visitors will see when they view your site. I'm going to surround this with an "a" tag. So the editor just put out the opening and the closing tag for me and now you can see I've surrounded the email address with an "a" opening tag and an "a" closing tag. The "a" HTML element is used for links. You know you might think it would be called link, but it's not. It's just called "a," and in order to tell the browser where to take a visitor, when they click on the anchor text, we use the "href" attribute.

So if I had a normal webpage, I might type out "Visit Google" and then in here include the Google webpage address, something like that. And much like you can see this link up here, "Enable accessibility mode" this is the anchor text just like this. And then as for where it actually takes me, that's the href value. So instead I'll replace this again with the email address. In fact, you know what? I will change it just to say "Email me now" and remember we don't want to use "http." We have this different protocol called mailto and then once again, I'll paste in that email address. So once I save this and visit the site, you can see at the top of my primary sidebar, I have the email me widget. "Email me now" is the anchor text, and when I click on it, it is using that mailto protocol. So it will open up my mail client with a new email with the send to field already prefilled with email@email.com I hope you learned a lot from this video. You learned how to make email addresses clickable and how to add them to the posts, pages, your menu, and widgets. If you liked the video, please click the like button. If you want to see more WordPress tutorials, don't forget to subscribe and thanks for watching.

Ben Sibley
Ben Sibley

After using WordPress for the last 9 years, I've made dozens of websites, designed and developed 20 themes that have been downloaded more than 1.5 million times, and personally helped thousands of WP users with their sites.

Now I'm sharing everything I know to help make WordPress an easier and more rewarding choice for building a website. If you have a question you want answered, submit your question here.