Most pages on a business site have one job for the visitor at the end: call, send a message, book, or go to the next page. A plain text link at the bottom of a paragraph is easy to miss. A clear button is not.
You can add a button in WordPress without a plugin, using the Buttons block that comes with the editor. The fiddly parts are the link itself (especially for phone numbers and WhatsApp), whether it should open a new tab, and making it readable against your colours. This post takes each in turn.
How to add a button in WordPress
- Decide where the button belongs on the page and put your cursor there, usually just after the paragraph that gives the reason to click.
- Add a Buttons block: search the inserter (the blue + at the top left) for “Buttons”, or type /buttons in an empty paragraph and press Enter.
- A Buttons block appears with one button inside it. Click on the button and type its label.
- With the button still selected, click the link icon in its toolbar (the keyboard shortcut is Ctrl + K, or Cmd + K on a Mac). Paste the address, or start typing the name of one of your pages and pick it from the list. Press Enter to apply.
- Save the draft and click the button in Preview to make sure it goes where you meant.
Note the two levels. Buttons (plural) is the container that holds one or more buttons and controls how they line up. Button (singular) is each individual button, with its own label, link and style. If a setting you expect is missing from the sidebar, you probably have the other one selected. List View, opened from the top toolbar, shows which is which, and our introduction to the block editor explains parent and child blocks in more detail.
Where the button can point
The link field accepts more than web pages. These are the ones a business site uses most.
A page on your own site
Start typing the page’s title in the link field and choose it from the suggestions, which avoids typing mistakes in the address. If you later change that page’s slug, check the button again, because the link holds the old address. To jump to a section further down the same page, give that section’s heading an HTML anchor (in the heading’s Advanced settings), then link the button to # followed by that anchor, such as #prices.
A phone number
Use tel: followed by the full international number with no spaces, for example tel:+44 and then the rest of your number. On a phone, tapping it opens the dialler with the number filled in. On a desktop, it may offer to open a calling app or do nothing useful, which is one reason call buttons matter most on mobile.
Use https://wa.me/ followed by your number in international format, without the plus sign, spaces, brackets or a leading zero. An Indian number becomes https://wa.me/91 and then the ten digits. You can add a ready-written first message by adding ?text= and the message, with spaces written as %20. Test it on a phone that has WhatsApp, and on a computer, where it opens WhatsApp Web or the desktop app.
An email address
Start the link with mailto: and then the address. Tapping it launches whatever mail program the visitor has, and plenty of people, especially on office or library machines, have none configured, so a form is the safer main route. Print the address in plain text beside the button as a fallback.
A file
A PDF menu, price list or brochure works too. Upload the file to the Media Library, open it there, use the button that copies its address, and paste the result into the button’s link field.
Deciding which of these to offer, and where on the page they belong, is a separate question. Our post on where call and WhatsApp buttons help covers that side.
Should the button open in a new tab?
In the link settings there is an Open in new tab toggle, sometimes tucked under an Advanced section. For most buttons, leave it off.
- Links to your own pages: same tab. Visitors expect the Back button to work, and a pile of tabs of the same site confuses people on phones.
- Phone, WhatsApp and email links: the setting makes no useful difference, because they open an app rather than a page. Leave it off.
- External sites and large PDFs: a new tab is reasonable here, so the visitor still has your page open behind it. Mentioning it in the label, such as “Download the price list (PDF)”, sets expectations.
Making the button look right and stay readable
Select the single Button, then look at the sidebar. Options vary by theme, but these are common.
- Style: Fill (solid colour) or Outline (border only). Use Fill for the main action on a page and Outline for a secondary one beside it.
- Colour: text and background, often with a choice of gradient too. Pick from your theme’s palette where you can, so buttons match across pages.
- Typography: font size, and sometimes weight and letter case.
- Border and radius: square corners, slightly rounded, or a pill shape.
- Width: a small set of fixed widths, from a quarter of the available space up to full width. Full width works well on narrow layouts.
Contrast matters more than colour choice. White text on a pale yellow button is unreadable in sunlight on a phone. The editor sometimes shows a warning when the text and background are too close, and the accessibility standard most sites aim for, WCAG, sets a minimum contrast between text and its background, with a stricter figure for small text than for large. Our plain-language summary of what WCAG requires explains how that is measured.
If you find yourself styling every button by hand, set the style once for the whole site. In a block theme, go to Appearance → Editor → Styles, open Blocks and choose Button. In a classic theme, button colours are usually in Appearance → Customize or the theme’s own settings, depending on your theme.
Two buttons side by side
With a button selected, click the + that appears beside it (or use the Buttons block’s own + in List View) to add a second button in the same container. Then select the outer Buttons block to set:
- Justification: left, centre, right or spread across the row.
- Orientation: side by side, or stacked one above the other.
- Spacing between them, if your theme provides the control.
On phones, side-by-side buttons wrap onto separate lines when there is not enough room. Keep labels short so that happens cleanly, and leave enough room around each one that a thumb does not catch the wrong button.
Checking before you publish
- Click every button in Preview, then again on the live page from a phone.
- Read the label alone, without the paragraph around it. “Call the shop” or “Ask about this on WhatsApp” works. “Click here” or “Submit” tells the visitor nothing.
- If a button looks fine but does nothing when clicked, something on the page may be covering it. Our guide to buttons that will not click explains how to find the cause.
- Want the same contact button in the header on every page? That belongs in the header template rather than on each page, as described in our post on adding a phone number to the header.
Buttons are a small piece of the routine work covered in our WordPress guide for business owners, which also deals with menus, forms and backups.
Frequently asked questions
How do I know if anyone is clicking my buttons?
WordPress does not count clicks by itself. Google Analytics can record outbound clicks automatically through its enhanced measurement settings, and call or WhatsApp taps are usually tracked as events set up in Analytics or Google Tag Manager. Some form and button plugins also include basic click counts.
Can I make a button that copies my phone number instead of dialling it?
Not with the core Buttons block. A tel link always hands the number to the phone’s dialler or a calling app. Copy-to-clipboard needs a small script or a plugin that offers it. For most visitors, a tap-to-call button plus the number shown as text nearby covers both needs.
How do I put the same button on every service page?
Build the button once, with its heading or sentence if it has one, and save it as a synced pattern. Insert that pattern on each service page. When the number or wording changes, editing the pattern updates every copy. A button that belongs on every page of the site is better placed in the header.
Is it all right to use an image as a button?
It works, by linking an Image block, but it is usually a poorer choice. Text in an image cannot be resized, translated or read by screen readers unless the alt text repeats it, and it looks blurry on some screens. A real Button block with good colours does the same job better.
Tracking WhatsApp taps properly, or a call button that stays on screen as people scroll on a phone, is beyond what the block does by itself. Additions like these are the sort of thing our WordPress support service sets up and tests on a phone with you.
Next in this series: How to Add a Table in WordPress Without a Plugin
