Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

How to Add Call to Action Buttons in WordPress (Without Code)

Adding call-to-action buttons to your WordPress posts or pages can boost conversions. These buttons are eye-catching and direct users to take specific actions.

For example, you can use them to send visitors to a pricing page, product page, or services page. They can also promote special offers, new products, or affiliate links.

In this article, we’ll show you how to add beautiful call-to-action buttons in WordPress. The best part is that you won’t need to write any code.

Let’s explore the easy way to enhance your WordPress site with these effective buttons.

Adding Buttons in WordPress Step by Step

Note: This article is for adding custom call-to-action buttons in WordPress. If you want to add social media buttons, then please see our guide on adding social share buttons in WordPress.

Adding Buttons in WordPress Posts and Pages (Step by Step)

WordPress makes it super easy to add buttons with a built-in Button block. It is a feature that was introduced with the Gutenberg WordPress block editor.

We will show you multiple ways to add call-to-action buttons to WordPress blog posts and pages. You can choose the solution that best suits your needs.

Feel free to use the table of contents below to navigate through this article easily:

Table of Contents:

Video Tutorial

Subscribe to WPBeginner

If you don’t like the video or need more instructions, then continue reading.

Adding Buttons in WordPress Posts / Pages Using Default Editor

In our experience, this method is easy and recommended for all users. It uses the built-in ‘Buttons’ block in the WordPress block editor. If you still use the older classic editor, then you can skip to the next section.

First, you need to create a new post or edit an existing one where you want to add a button.

On your post edit screen, click on the ‘+’ icon and select the Buttons block from the Layout Elements section.

Add button block

Next, you should be able to see the button block added to the content editor.

Simply click on the ‘Add text…’ area and enter your button text.

Add button text

After that, click on the Link button in the toolbar to add a link.

You can search for a post or page or simply copy and paste a URL in the link field.

Add button link

Once done, hit ‘Enter’ or press the ‘Apply’ icon to save your link.

If you want to display the button in the center, you can click on the ‘Justify’ icon and then select ‘Justify Center’. You can also change the vertical alignment of the button from the toolbar.

Change button alignment

Next, you can customize your button style and change the text and background colors from the block settings panel on the right side.

Simply switch to the ‘Style’ tab under block settings to adjust your button style.

Change button style

There are three button styles you can choose from: default, outline, and squared. You can try each one by clicking on them and choosing the one that looks best.

The Color Settings section includes five color variations for both the button background and button text. Not only that, but you can also use a custom color of your choice by clicking on the ‘Custom Color’ option.

Button style settings

Once you are happy with the button design, you can save your post or publish it to see a live preview.

Here is how it looked on our demo website.

Call to action button preview

Bonus: If you want to see how well your buttons perform, you should use MonsterInsights. It has built-in event tracking for affiliate links, outbound links, and custom events, so you can see how well your buttons are performing. For more details, see important marketing metrics that you must track in WordPress.

Creating a WordPress Button in Classic Editor

The default WordPress block editor is modern, faster, and easier. Some users still use the old Classic WordPress Editor.

We don’t recommend using the classic WordPress editor. It is outdated and does not have enough features for users to create awesome content. If you are still using it, then we advise turning it off and starting using the block editor.

On the other hand, some users may still want to use it. In that case, you will need an alternative solution to add buttons on your WordPress site.

There are three options available for adding buttons in the WordPress Classic Editor:

  1. Add a button in WordPress with HTML / CSS code.
  2. Add buttons with a WordPress button shortcode plugin.
  3. Add a button in WordPress without using shortcodes.

Of the three options, the first one is the coding method. You will need to write HTML / CSS code and add it to your website wherever you need a button. It is not beginner-friendly.

The second option is the most commonly used method. That’s because most of the WordPress button plugins provide shortcodes for adding buttons.

The third option is the best because it allows you to easily add buttons to your posts and pages without having to remember the shortcode.

Let’s take a look at how to add buttons in WordPress without using shortcodes.

The first thing you need to do is install and activate the Forget About Shortcode Buttons plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Once you have activated the plugin, create a new post or edit an existing one. In the editor, you will see a new button labeled ‘Insert Button’ in the visual editor.

Insert Button Icon in Classic WordPress Editor

To insert a new button in your post, you need to click on the ‘Insert Button’ icon.

This will bring up a popup window where you can design your new button.

Enter Button Text and URL in Classic Editor

First, you need to add your button text and URL. As you add your button text, you can see a live preview in the box below.

Next, you can add a nofollow tag to your link and open the link in a new tab by clicking on the checkbox options below.

After that, you can select an icon for your button. If you click on the ‘Icons’ tab, then you will be able to see the icons that you can add before or after the text in your buttons.

Add Icon to your Button in Classic Editor

These icons are actually icon fonts (learn how to use icon fonts in the WordPress post editor).

Next, you can choose the text color and background color for your button by clicking on the Color box icon.

Change Button Background Color in WordPress Classic Editor

After that, click on the drop-down menu to choose the button style.

There are eight different button styles ready for use.

Choose a Button Style in Classic WordPress Editor

Similarly, you can also choose the button size from extra small to extra large.

Once you are satisfied with the look, simply click on the ‘Update’ button.

You will be able to see your button as it appears in your post, right inside the post editor.

You can also set button alignment by simply selecting the button text and using the toolbar buttons in the classic editor.

Center Align Your Button in Classic Editor

Double-clicking on the button will bring up the Insert Button popup, and you can re-edit your button if you like.

Once you are happy with its design, you can publish or update your post and see it in action. This is how the fancy button appeared on our demo WordPress website.

Button Preview - Built in Classic Editor

Adding a Click-to-Call Button in WordPress

In addition to the usual call-to-action buttons, you can also add click-to-call buttons on your website to boost leads and conversions.

A click-to-call button is a specific type of call-to-action button that allows your users to make a phone call to your team with just a tap.

Using the tap-to-call buttons, your site visitors can instantly talk to your team in person and get the information they need. Whether discussing a quote request, pre-sale information, or support issue, phone calls are quick.

As the number of smartphone users is growing, adding call now buttons is even more relevant nowadays.

If you don’t have a business phone, then you may want to look into getting a virtual business phone number.

With that said, let’s look at how to add click-to-call buttons in WordPress step by step.

The first thing you need to do is install and activate the WP Call Button plugin. For detailed instructions, you can see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you need to visit the Settings » WP Call Button page to configure the plugin settings and design your click-to-call button.

Sticky Call Button Settings in WordPress

First, you will see the Sticky Call button settings. The sticky call button is a conversion-optimized feature that moves the call button along with users as they browse your site.

You can start by activating the Call Now Button Status. Simply click on the switch toggle to activate that.

After that, you need to enter your phone number. WP Call Button has a phone number field with your country code. Simply select your country and enter your business phone number.

If you don’t have a business number, then you can get one from Nextiva. It is a trusted business VoIP provider.

Next, you can edit your call button text and choose the call button position and color.

Also, you can select where to show the sticky call button on your website. By default, it shows the call button on all pages and on all devices. You can show or hide the button on certain pages and show it only on mobile devices.

Once you review all the options, you can click on the ‘Save Changes’ button at the bottom. After that, you can visit your website and see the sticky call now button in action.

WordPress Click to Call Button

Aside from the sticky call buttons, you can also add static call buttons on your WordPress pages, posts, and sidebars using this plugin.

If you are using the WordPress block editor, then you can easily add the call now button on your pages using the WP Call Button block.

Create a new page or edit an existing page and add the WP Call Button block using your page editor.

Adding WP Call Button Block in WordPress

After that, you can customize the button text, button color, text color, and font size and show or hide the phone icon.

Once you are happy with its design, you can publish or update your page.

Customizing Call Button in WordPress Page Editor

If you are using the classic WordPress editor, then you need to use the Static Call Button generator to get a shortcode.

Go to Settings » WP Call Button and click on the ‘Static Call Button’ menu at the top.

Static Call Buttons in WordPress Settings

Simply customize the button options and then copy the shortcode. After that, you can use the shortcode in any post or page on your website.

WP Call Button plugin also allows you to add the call button on your WordPress sidebar and other widget-ready areas.

Simply go to Appearance » Widgets and drag the WP Call Button widget to a widget-ready area where you want to show the call button.

WordPress Call Button Sidebar Widget

Now you can add a title, a description, and customize the call button from the Advanced Settings section. Once done, save your widget.

That’s it! If you want to see a more detailed tutorial, then you can check our step-by-step guide on how to add a click-to-call button in WordPress.

Bonus Tip for Adding Custom Buttons in WordPress

Adding a call to action button alone is not always enough. You may also want to customize the page or post with a hero image, menus, and a custom layout.

In that case, we recommend using a drag-and-drop WordPress page builder plugin like SeedProd or Thrive Architect.

SeedProd add button

These page builders will help you create custom landing pages with fancy call-to-action buttons exactly how you want them.

Whatever you do, it’s important that you track how your buttons are performing because guessing isn’t the best business growth strategy.

We recommend using MonsterInsights. It has built-in event tracking for affiliate links, outbound links, and custom events, so you can see how well your buttons perform. For more details, see important marketing metrics that you must track in WordPress.

We hope this article helped you learn how to add buttons easily in WordPress. You may also want to see our complete guide on WordPress conversion tracking or our list of the best WordPress plugins to grow your website.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

69 CommentsLeave a Reply

  1. Jiří Vaněk

    Is it possible to track some statistics of the button, only with Google Analytics? Unfortunately, I don’t have monstesight, but I do have Google Analytics on my website.

    • WPBeginner Support

      It is possible but you would need to set up the event tracking in Google Analytics which is why we recommend using MonsterInsights :)

      Admin

      • Jiří Vaněk

        Thanks for the reply and explanation. I plan to dive a bit more into Google Analytics, as the only things I currently track with them are the number of users, geolocation and backlinks. I know that GA can do an awful lot. However, I have already seen and read several articles on your website, so I believe that thanks to them I will finally understand this tool a little better. Thank you for your great work. She moved me forward in many ways.

  2. sandra

    How can I add a form (first name / email address) to my call to action button?
    Or is there a way to adjust a contact form (remove textbox) to do the trick?
    I do not code.

    • WPBeginner Support

      You would want to check with the support for your form plugin, depending on the one you are using there are different possible methods to do what you are wanting.

      Admin

  3. Shahzaib

    I have added a button thanks alot but it appears very small and i can’t figure out how to increase its size in block editor

  4. Daniel Piggott

    Hi,

    I am currently trying to make a button on Wordpress. But there is no option to align in the centre.

    Has the latest wordpress omitted the alignment feature of a button?

    • WPBeginner Support

      You would want to ensure you are targeting the button block and not the specific button to see the alignment options :)

      Admin

      • Daniel Piggott

        Hi,

        Oh wow! I feel silly :P

        Thanks for your help. It’s much appreciated!

        Cheers, Dan

        • WPBeginner Support

          You’re welcome :)

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.