How to add button in WordPress block editor: Best Way

Do you want to find out how to add button in WordPress block editor?

When it comes to enhancing your WordPress content, adding buttons can be a game-changer. 

Whether you want to direct your readers to another page or encourage them to take a specific action, buttons are a powerful tool. In this blog, we’ll walk you through the simple steps of adding buttons in the WordPress block editor. From navigating to the right place to customizing the look and feel, we’ve got you covered.

So, let’s dive in and make your content more engaging and interactive with eye-catching buttons!

Why do we need buttons on a WordPress site?

There are many reasons why buttons are important on a WordPress site. Buttons are an important part of a website’s look and usefulness. They help users move between pages and make it easier for them to do important things like download content or sign up for newsletters.

 They act as visual cues that tell users what to do and can have a big effect on interest and sales.

To make the main call to action on a page stand out, like “Apply” or “Request Information,” buttons are necessary. They are also essential for good web design because they help guide customer behavior and boost interest.

So, smartly using buttons is important for making calls to action on a WordPress site work better.

Well then without further ado let’s add the button to the WordPress site.

How to add button in WordPress block editor?

There are 3 main different ways to add a button in the WordPress block editor.

1. Using the Buttons block
2. Using a plugin
3. Using CSS with the help of a classic text editor.

Let’s learn all of them step by step.

How to add a button in WordPress using a button block?

The Button block is a built-in block in the WordPress block editor that allows you to add one or more buttons to your page or post. It has been available since WordPress 5.4, when the button block was deprecated.

To use the Button block in WordPress Gutenberg to add a button, do the following:

1. Open the Gutenberg editor and go to the page or post where you want to add the button.

2. Move your mouse over the “Add Block” button, which is the “+”  sign in the top left corner of the block editor.

3. Now type “Buttons” on the search block search bar or you can simply scroll down to the design section you will find the button block.

4. After selecting the button block, a new button will appear. Here, you can choose how your button will fit with the text, put the text that will show up on the button, and change other settings like the link, style, and CSS class from the block tab at the right corner column.

5. You can change how the button looks by using the choices. These include alignment, justifications, text alignment, bold, italic, strikethrough, link, font color, and background color.

6. Click “Add to Block” when you’re happy with the choices to add the button to your content.

7. To put the button where you want it, click and drag the block to the desired spot in the text.

8. Click the “Add Block” button again and do steps 3–7 again for each button you want to add.

Alternatively, you can use the keyboard shortcut “/buttons” to quickly insert a Buttons block. Once inserted, you can customize the text, link, and style for each button within the block.

Well, adding a button using a block editor is not so tough, now we will learn another method using a plugin.

How to add a button in WordPress using a plugin?

To add a button in WordPress Gutenberg using a plugin, you can follow these steps:

Go to the WordPress dashboard and select Plugin -> Add New Plugins.

Now type button block on the plugin search and you will get a plugin name called Button Block – Get Fully Customizable & multi-functional buttons.

Install and activate the plugin.

You will get a prompt to confirm the email to opt in Button block plugin.

Then, go to the Gutenberg editor and find the “Widgets” block group. This is where you can add the “Button Block.” This will let you add a button to your text.

Once you’ve added the Button Block, you can change the text, URL, and style of the button right in the editor. You can also change the block settings in the settings menu on the right to make the button look even better.

If you follow these steps and use the right Button Block plugin, it will be easy to add and change buttons in the WordPress Gutenberg editor.

Great, so far you can add a button using a plugin and the blocks in WordPress.

But there is another way of using CSS code to add buttons. For that, we need the classic text editor.

How to add a button in WordPress using CSS?

If you want to use the classic editor in WordPress, you can follow how to disable block editor in WordPress.

Once you are in the classic editor, switch to text view by clicking the “Text” tab in your post editor.

Add class=”button” to the <a> tag of the link where you want to put the button. 

<p>A link styled as a button:</p>

<a class=”button”  href=”https://bdthemes.com” target=”_blank”>BDThemes</a>

You can change how the button looks by adding a CSS style to the link in text view.

For that simply go to your theme customize option and open Additional CSS.

Then add the CSS code below with button class and hit the publish button and check the button in the preview of your text editor.

.button {

  background-color: #f44336;

  color: red;

  padding: 14px 25px;

  text-align: center;

  text-decoration: none;

  display: inline-block;

}

Wrapping Up

Finally, this is the end. You just learn how to add button in WordPress block editor.

It wasn’t that hard to follow this walkthrough. So far you have learned three different ways which are very easy to follow. Also, you learn the need for buttons in WordPress.

Frequently Asked Questions