Adding a Link to a Button in WordPress
The Button block links like any other text selection, which is why so many buttons end up saved with no link at all. The fix is knowing when the editor has actually committed the URL.
A WordPress button is a link with styling, and the editor treats it exactly like a link inside a paragraph — including the part where nothing is saved until you confirm it. That is the whole reason buttons so often publish as clickable-looking text that does nothing.
The Button block itself is straightforward. Knowing where WordPress hides the options, and how to tell a committed link from an abandoned one, is the useful part.
Add the button and its link
In the block editor:
- Click the block inserter and add a Buttons block. WordPress places one Button block inside it.
- Type the label directly on the button. Keep it to two or three words.
- With the cursor still in the button text, click the link icon in the block toolbar, or press Ctrl+K (Cmd+K on a Mac).
- Paste the full URL, including
https://, or start typing the title of an existing page or post and pick it from the suggestions. - Press Enter, or click the submit control at the end of the field.
Step five is the one people miss. Typing a URL and then clicking elsewhere on the page discards it. After pressing Enter, the popover collapses to show the destination — if it does not, the link was not applied.
To change a link later, select the button, open the link control again and choose to edit. To remove one, use the unlink option in the same toolbar.
The Buttons wrapper holds several buttons side by side; add more with the inserter inside it. Each Button block carries its own link, so linking one does not link its neighbour. This catches people who duplicate a button to make a matching pair and forget to change the second URL.
Options worth knowing
- Open in new tab. Expand the options inside the link popover and switch it on. Use it for links leaving your site, not for internal navigation.
- Link rel attributes. The block's Advanced settings panel exposes a field for the link's rel value where you need
nofolloworsponsored. WordPress handles the security-related rel values for new tabs itself. - Anchor links. Give the target block an HTML anchor in its own Advanced settings, then link the button to
#that-anchor. - Email and phone. Type
mailto:hello@example.comortel:+441234567890into the link field. WordPress will not offer these as suggestions, so type them in full. - Existing content. Searching by page title is safer than pasting a URL, because WordPress stores a real link that you can find later with a link checker. Broken buttons are one of the things a broken link check surfaces.
Where the styling lives
Selecting the Button block gives you fill or outline style, width, colours, typography and border radius in the settings sidebar. Selecting the surrounding Buttons block controls alignment and spacing between them. People frequently fight the sidebar because they have the wrong one of the two selected — the breadcrumb at the bottom left of the editor tells you which block you are on.
If a style you need is not exposed, add a class in the block's Advanced settings and target it with custom CSS rather than editing block HTML by hand. Editing the markup directly usually produces a block validation warning on the next edit. A short refresher on how blocks store their attributes is in what a block is in WordPress.
Classic editor and page builders
The classic editor has no button block. Buttons there come from the theme or a shortcode plugin, so the link is a parameter in a shortcode rather than something you set in a toolbar. Check the theme documentation for the attribute name — do not guess it. If you are on the classic editor deliberately, restoring the classic editor explains the trade-offs.
Page builders use their own button widget with an explicit link field in the widget settings, usually alongside separate toggles for new tab and nofollow. The advantage is that the field is always visible, so the silent no-link failure does not happen. Elementor users working on navigation elements will find the related patterns in editing a header in Elementor.
When a button is the wrong element
A button is for one action on a page: buy, book, download, contact. A row of six buttons is navigation wearing the wrong clothes, and it belongs in a menu where it will be keyboard-navigable and consistent across the site.
Before publishing, tab to the button with the keyboard and confirm it takes focus and shows a visible focus outline, then click it on a phone. A button that only works with a mouse is a link that half your visitors cannot use.
Frequently asked
- Almost always because the URL was typed into the link field but never committed, so the block saved as plain styled text. Select the button and open the link control again: if the field is empty, the link was never applied. Press Enter or use the submit control after typing the URL.
- Select the button, open its link control, expand the options in the link popover and switch on the open-in-new-tab setting. WordPress adds the target and the accompanying rel attributes for you, so there is no need to edit the HTML.
- Yes. Give the destination block an HTML anchor in its Advanced settings, then set the button's link to a hash followed by that anchor, such as #pricing. Do not include the page URL unless the button lives on a different page.