To learn how to link a button to a page in WordPress, you only need one setting: the button’s destination address. In the block editor, select it, press the chain icon (or Ctrl+K), type the title of the page you want, and pick it from the suggestions. Elementor, menus, and anchor jumps use the same idea in a different field, and each method works for internal destinations and external sites.
- Link buttons easily in WordPress.
- Use Gutenberg or Elementor methods.
- Ensure correct URL formats for links.
Which Method Fits Your Site?
Choose by where the call to action lives. One inside a post belongs to the editor that built it; one in the header belongs to the menu or the site template.
| Method | Best for | Where the address goes | Watch out for |
|---|---|---|---|
| Buttons block | Content built in Gutenberg | Chain icon in the toolbar | Stored as plain text, so a renamed destination breaks it |
| Elementor Button widget | Elementor layouts | Link field, Content tab | Dynamic tags need Elementor Pro |
| Anchor jump | A section further down the same screen | #id as the address | IDs are case-sensitive |
| Menu or Navigation item | Header and footer | Appearance, Menus, or Appearance, Editor | The theme type decides the screen |
| JavaScript | Conditional redirects | Inline onclick handler | Removed for users without unfiltered_html |
How to Link a Button to a Page in WordPress With Gutenberg
Buttons is the core call-to-action block in WordPress. It’s a container holding one or more individual items, each with its own text, destination, and style. Open the post where it should appear, then:
- Click the “+” inserter and choose “Buttons” from the Design category, or type
/buttonson an empty line. - Type the call-to-action text in place.
- Press the chain icon in the toolbar. Type part of the destination’s title and choose it from the results, or paste a full URL.
- Press Enter to apply it, then click “Save” or “Publish”.
Leave the Advanced “HTML element” setting on its default. The button element is meant for forms and scripts and doesn’t go anywhere on its own.
Search by Title Instead of Pasting a URL
Picking the destination from the search results copies its exact permalink, trailing slash included. That matters more than it looks: a pasted address with a missing slash, an old slug, or a preview parameter forces a redirect on every click. One problem we run into constantly is a button built on a staging site that still points at the staging domain after launch. If the page you want isn’t in the suggestions, check that it’s published.
Open in New Tab and Link Relation
The same popover also has an “Open in new tab” toggle. Use it for external references, not for your own site, because a separate browser tab makes the Back arrow useless for the reader. When it’s on, WordPress adds rel="noopener" itself, and current browsers apply noopener behavior to those tabs by default. Values like nofollow or sponsored go in the “Link relation” field under Advanced.
Link a Button to Another Page in Elementor
Elementor, the drag and drop builder, keeps the address in the widget panel. Edit with Elementor, drag the Button widget onto the layout, and paste the destination into the Link field on the Content tab. The gear icon beside that field opens Link Options: open in a new window, add nofollow, and custom attributes.
With Elementor Pro, the dynamic tags icon offers an Internal URL tag that lets you select an existing post from a dropdown, which survives a slug change better than a typed address. Preview the front end after saving. If clicks do nothing, check that the widget isn’t nested inside another clickable HTML element, such as a container with its own link.
Send Visitors to a Section Further Down
An anchor is a named location within your content, set by an HTML id attribute, that a hyperlink can jump to. It’s how table of contents navigation works on long posts, and a button can use it too.
- Select the target heading, open “Advanced” in the sidebar settings, and type a unique ID like
pricing-detailsin the “HTML anchor” field. - Set the button’s address to
#pricing-details. - Preview and test the jump.
Stick to lowercase letters, numbers, and hyphens. Browsers match the fragment against the id exactly, so #Pricing will not find pricing. To reach a section on another page, put the full address first: https://example.com/services/#pricing-details.
Add a Menu or Header Button That Opens a Page
Header menu items come from the theme, and the screen depends on the theme type. In a classic theme, go to Appearance, then Menus. Tick the destination in the “Pages” box, or use “Custom Links” for an anchor address, type the navigation text, click “Add to Menu”, and save.
Block themes such as Twenty Twenty-Five have no Menus screen. Open Appearance, then Editor, choose Navigation, and add an item with the “+” control; the same title search appears there. For a header call to action, open the Header template part in the Site Editor and insert Buttons next to Navigation.
When JavaScript Is the Right Tool
JavaScript, the scripting language that runs in web browsers, handles conditional redirects that plain hyperlinks cannot, such as sending visitors to different pages based on form input or geographic location. Put an onClick attribute that sets window.location.href inside a Custom HTML block.
For an ordinary jump it’s overkill. WordPress also strips inline scripts from content saved by users without the unfiltered_html capability, which includes Authors and Contributors, so the code can vanish on the next save. Anything that goes somewhere should be an ordinary link, which screen readers announce correctly and which keeps middle-click working. If you’re still learning WordPress, stay with the Gutenberg method above.
Why a Working Button Stops Working Later
Most of these failures start with a change somewhere else:
- The destination’s slug changed. WordPress remembers old slugs and redirects them for posts, but not for pages, so a renamed page leaves every hard-coded address on a 404 until you add a redirect.
- It went back to draft or private. Visitors get a 404, while a private page still loads for you when logged in, so the break is easy to miss.
- Something covers the button. A sticky header or an absolutely positioned element can sit on top of it on mobile, so taps never land.
- A cached copy is still being served. The fix is saved, but a WordPress update might not appear right away while caches clear.
Label text matters as much as the destination. Specific wording (“Get Your Free Quote” beats “Click Here”) helps overall SEO and accessibility, and one consistent style tells visitors what is clickable across your website.
Start with the Buttons block and pick the destination from the title search instead of pasting an address. Then open the published post logged out, on a phone, and tap once. If you later rename that page, add a redirect the same day. That’s how to link a button to a page in WordPress so it keeps working after launch.
Frequently Asked Questions About Linking Buttons in WordPress
How do I make a button redirect to another page in WordPress?
Give it the destination’s URL. In the block editor, click the chain icon and search by title; in Elementor, use the Link field on the Content tab. Both create a standard hyperlink, so no redirect plugin is needed.
Can I open the destination in a new tab?
Yes. Gutenberg’s popover has an “Open in new tab” toggle, and Elementor’s Link Options has “Open in new window”. It is especially useful for external references or image galleries, less so for internal ones.
Why does my call to action not work after publishing?
The usual causes are a missing or wrong address, a destination that’s unpublished or renamed, a theme element covering it, or script errors blocking the click event. Check your browser’s developer console (F12) for error messages.
How do I connect a form submit action to a different destination?
Set the action attribute in your HTML form tag to the target URL. When a visitor hits submit, the browser sends the form data to that address. Example: <form action="/thank-you">.