No credit card. Takes under a minute.

Login
INSIGHTS3 MIN READ

How to make a button open in a new tab using the Wordpress button block

MariahP

Published on March 5, 2019

Published on Wealthy Affiliate — a platform for building real online businesses with modern training and AI.

How to make a button open in a new tab using the Wordpress button block

Hey everyone,

I'm writing this down mostly for my own reference but I figured maybe it would help somebody else out.

If you are using the block editor in wordpress you may have noticed that it has a ready made button block.

You can use it to make simple easy link buttons. I was super excited about this because I was previously using HTML to make buttons and it wasn't too difficult if I wanted every button to look the same, but changing the color and style of the buttons was a pain.

With the button block you can change the color of the button and text easily by simply selecting the desired colors from the sidebar on the right.

However the only thing that bugged me about these buttons is that it doesn't have an option to have the link open in a new tab. So today I did a little checking around and I have figured out an easy way to do it.

Step 1:

Create your button as normal. Add the text you want to appear on the button, insert the link, and adjust the colors however you want.

Step 2:

Ready to put this into action?

Start your free journey today — no credit card required.

Click the 3 dots and select "Edit as HTML" which is the 5th option on the list.

Step 3:

Find the portion of code that begins with href="https://..." your link is the portion between the quotation marks that starts with https://

Step 4:

Immediatley after the quotation mark that closes your link, copy and paste this bit of code:

Step 5:

Once you do that, this will happen:

Click "convert to HTML"

Update your post and hit preview to check if it worked. Clicking the button should now open the link in a new tab.

It's super simple and I really broke it down which is why it takes "5 steps."

The awesome thing is, if you need multiple buttons in the same post, you can now simply copy the entire HTML and paste it into a new custom HTML block and then simply change the link from step 3 (remember just to change the part between the quotation marks beginning with https://) to your new link. Then you won't have to mess with words, or colors more than once!

Like I said, I'm writing this post so that I can easily reference it when I need to do it again in the future. But let me know if it helped you out at all. And maybe I'll do it some more when I learn little tricks like this for myself!

Until next time,

-Mariah

Share this insight

This conversation is happening inside the community.

Join free to continue it.

The Internet Changed. Now It Is Time to Build Differently.

If this article resonated, the next step is learning how to apply it. Inside Wealthy Affiliate, we break this down into practical steps you can use to build a real online business.

No credit card. Instant access.

2.9M+

Members

190+

Countries Served

20+

Years Online

50K+

Success Stories

The world's most successful affiliate marketing training platform. Join 2.9M+ entrepreneurs building their online business with expert training, tools, and support.

Member Login

© 2005-2026 Wealthy Affiliate
All rights reserved worldwide.

🔒 Trusted by Millions Worldwide

Since 2005, Wealthy Affiliate has been the go-to platform for entrepreneurs looking to build successful online businesses. With industry-leading security, 99.9% uptime, and a proven track record of success, you're in safe hands.