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

byMariahP

326 followers

7 years ago

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:

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