How to add button in WordPress editor [tutorial]

Why is WordPress button block so important?

Navigation on the website is important for visitors and customers. We want to send them from one subpage further. Guide them through the whole shopping process. That’s why it’s important to correctly insert important links inside page content.

Basically we have 2 options. Use standard link or button. Opinions on when to use first and later option are various. It’s usual that on one page there are multiple possible actions. We need to make sure which one is primary and which one is secondary. We recommend you to use button only for primary action. That way you achieve greater visibility of this primary action. You’ll focus visitors attention to this action. We can also call it call-to-action button. Don’t create too many buttons on one subpage.

What are main button functions?

• Buttons can get visitors attention – call to action
• They separate page or post content and make it more readable
• Help with orientation on the page. Lot of visitors only visually scan page with their eyes
• Navigate visitors to other pages using hyperlinks

There are a lot of parameters that determine button success. Important is for example size, placement or button color. It’s necessary to follow standard UI and UX principles. Green color is used for buttons with positive action for example to buy something. Red color is for negative one – for example to unsubscribe from newsletter. Correctly designed buttons that way directly influence visitor actions.

Adding button on any Page or Post in WordPress

Situation before WordPress 5

Adding buttons was quite complicated process before WordPress Block editor was invented. Because this feature was not naturally in the WordPress. You could use theme with Page Builder or 3rd party plugin. Shortcodes create buttons in this case.

In our older WordPress themes you can add button using shortcodes in visual editor. After clicking on Insert Shortcode -> Button you can set various settings in modal window. Text, text color, button color, url, alignment and so on. Thanks to these advanced settings you can add button quite easily and fast without any programming.

How to use Button block in WordPress editor?

Thanks to WordPress 5 there is second way. Much easier. WordPress visual editor brings many useful blocks. To create a button on website you can now use WordPress Button block in editor.

Step-by-step guide how to add button in WordPress editor

1. At first you need to decide where you wish to insert the button
2. Button block can be added various ways:
– by clicking on “+” in the top bar or anywhere in the block editor where you select Button block

– you can also find any block using search bar, just write “button”

– by typing “/“ that gives you access to all available blocks

3. Created Button block can be configured further

Add button text and URL address

As soon as is WordPress Block button created, you can type text inside it. Remember that for call to action button it is better to use short text with clear message. You can set text to be bold, italic or underlined. All these changes can be made by clicking in the toolbar. You can also align button to the side or center it.

Button usually points to another page or external website. For that reason right under it there an input to add URL address. Advantage is that adding URL does not require selecting text.

Changing button color

New editor allows you to amend WordPress button block in few seconds. Just use settings in the sidebar on the right hand side. You can change button background color or text color inside the button. There are basic predefined colors or you can choose your own. All changes are visible right away to see if the color combination is all right.

Great feature is that if you select wrong combinations for example grey background and white text color WordPress block editor will warn you that button could not be readable on your website.

Find your own button style

To create or change the button ultra fast and without any effort you can use one of prepared styles. Button can be that way changed to for example rounded, bordered or rectangular. Experiment what matches the best your website style or design.

Editing button with custom CSS

Even greater customization can be achieved using custom CSS classes. That way you can add your own CSS styles and style button in WordPress editor exactly as you wish.

As we can see there is much easier way than using button shortcode. WordPress Button block can be used in any theme that is compatible with WordPress Block Editor. Read more about our brand new Citadela WordPress theme. It is specially designed and developed for WordPress Block Editor.

Extra tip at the end

Don’t forget to monitor your WordPress button block and button success itself. If you use Google Analytics, you can create an unique URL. To track visitors clicks you can add Google UTM parameter. URL can be created using URL builder. Adding parameters allows you to identify source of the visit. It’s very useful if you wish to know from where visitors came to your shopping page.

What’s the biggest problem that you currently have with WordPress button block? Let’s discuss in the comments below. Share your experience with using Buttons on website.