How to Link a Button to a Page in WordPress

Using the WordPress Block Editor (Gutenberg)

Gutenberg is the fastest way to add a clickable element that sends visitors to any URL on your site. Open the post or area where you want the element to appear, then follow these steps:

1. Click the “+” icon to insert a new block and select the “Buttons” option from the design category.
2. Type your call-to-action text directly into the element.
3. Select the small chain icon in the toolbar above, then paste your destination URL into the field.
4. Toggle “Open in new tab” if you want visitors to keep your original content open. A tab (interface feature) that opens separately prevents navigation away from your site.
5. Hit “Update” or “Publish” to save.

One mistake I see repeatedly: people paste the full URL with a trailing slash mismatch, which creates redirect chains. Copy the exact address from your browser’s address bar to avoid this.

Connecting a Clickable Element in Elementor

Elementor, the popular drag and drop visual builder, handles this differently. Edit your content with Elementor, then drag the widget onto your layout. In the left panel, find the “URL” field under the content tab and paste your destination address. You can also use the dynamic tags feature to select an existing post or section from a dropdown, which prevents broken hyperlinks down the road.

After saving, preview the result on the front end. If the element doesn’t respond to clicks, check that you haven’t accidentally nested it inside another clickable HTML element.

Using HTML Anchor Tags for Same-Section Navigation

An anchor is a named location within your content that visitors jump to when they click a corresponding hyperlink. This is useful for table of contents navigation on longer posts.

1. Add an HTML anchor (the id attribute) to the target section. In the Block Editor, open the block’s “Advanced” settings and type a unique ID like pricing-details.
2. Create your clickable element and set the URL to #pricing-details.
3. Test the jump by previewing the post.

Only use lowercase letters, numbers, and hyphens in your anchor ID. Spaces and special characters break the functionality in most browsers.

Adding a Navigation Menu Item That Points to a Specific Section

WordPress menu (computing) items aren’t limited to top-level destinations. You can point any menu item to a specific section on any area of your website.

1. Go to Appearance, then Menus in the admin dashboard.
2. Expand “Custom Links” in the left column.
3. Enter the full URL followed by #your-anchor-id (for example, https://example.com/services/#pricing-details).
4. Type your desired navigation text and click “Add to Menu.”
5. Save the menu.

This approach works well for one-section sites where each menu item scrolls to a different part of the home content area.

Using JavaScript for Advanced Redirect Logic

JavaScript, the scripting language that runs in web browsers, can handle conditional redirects that simple hyperlinks cannot. For example, you might redirect users to different destinations based on form input or geographic location.

Add an onClick attribute to your HTML element with a function call that triggers window.location.href. This method is overkill for simple navigation, so only use it when standard approaches fall short. If you’re still learning WordPress, stick with the Block Editor method first.

Tips for Making Your Clickable Elements More Effective

The destination URL matters, but so does what surrounds it. Follow these practices:

• Use specific action text (“Get Your Free Quote” beats “Click Here”). This helps with overall SEO and improves accessibility.
• Keep the styling consistent. Visitors expect the same colors and shapes across your website for interactive elements.
• Test on mobile. A clickable element that works on desktop may be too small to tap on a phone screen.
• Avoid linking to external sites without rel="noopener" for security.

After setting up your elements, always preview the live version. The admin view and the published result sometimes differ, especially when CSS from your theme overrides default styles. Knowing how to link a button to a page in WordPress is the easy part. Making sure it actually works on every device is where most people trip up.

Frequently Asked Questions About Linking Buttons in WordPress

How do I make a redirect to another destination from a clickable element?

Paste the destination URL into the element’s settings. In the Block Editor, click the chain icon after selecting the element. In Elementor, use the URL field in the content tab. Both methods create a standard hyperlink that sends visitors to your chosen address.

Can I open the destination in a new tab?

Yes. Both the Block Editor and Elementor include a “new tab” toggle. Enable it so visitors stay on your original content while the destination opens separately. This is especially useful for external references or image galleries.

Why does my clickable element not work after publishing?

The three most common causes are: a missing or incorrect URL, conflicting CSS from your theme hiding the element, or JavaScript errors on the front end 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">.