The process of adding buttons into WordPress was complicated before the invention of the WordPress Block editor. While it is no longer a difficult topic, this process continues to generate much discussion.
If you’re confused about adding buttons, this article provides a few easy steps to help you add buttons in WordPress.
In short, WordPress buttons – and website buttons in general –are the best way to encourage your site’s visitors to sign up, download, log-in, or any other action that might benefit you.
CTA (call to action) buttons are the simplest way to direct visitors to pricing information, services, products, or anything else that could lead to a transaction or some kind of turn over.
CTA buttons promote new products or services, showcase affiliate links, advertising partner websites, or introduce special new promotions and offers.
The success of a button isn’t as defined as one would expect; certain parameters must be met. Examples include size, color, and placement. These should adhere to standard UX and IU principles and guidelines.
Red is usually associated with negative actions, such as unsubscribing from a newsletter. Green is almost always reserved for positive actions, like purchasing an item or booking an appointment. Buttons that follow these color guidelines can influence the actions of those visiting your website.
The process of adding buttons to your WordPress site can be very simple, and without using HTML or CSS languages.
Plug-ins without a shortcode, like “Forget About Shortcode Buttons”, are good options for adding buttons to your site.
Buttons are simply created within the WordPress editor, where styling then takes place. All you have to do to get this type of button functioning is to click the ‘Insert Button’ icon.
To use this plugin, you’ll need a version of WordPress that is 3.9 or higher.
“Forget About Shortcode Buttons” allows you to add your own icons and save templates of your favorite buttons so you may use them later on.
1. Go to your WordPress dashboard and click on ‘Add New Plugins’.
2. Install “Forget About Shortcode Buttons”.
The plug-in uses shortcode but doesn’t require you to remember any shortcode. It allows you to add buttons using a simple ‘Add Button’ option while you’re working on an article or post.
Since the button creation process uses a different program, it can be time-consuming. However, the results are well worth the effort.
1. Navigate to the MaxButtons page and click the ‘Add New’ button.
2. Fill in the first box, the ‘Button Name’ box, with whatever name you want your button to have behind the scenes. Fill in the URL, which is the link that people will be taken to when they click the button. Fill in the text, which are the words that appear when visitors see your button on the page.
3. Choose your customization options: font colors, font styles, and more.
4. Go to the bottom of the page to change your button’s background or add a border.
5. Click ‘Save’ when you’re happy with your button. A real-time preview should be available in the top corner.
You won’t see the button in your WordPress text editor, but it will be there when you publish your post. Before using MaxButtons, it’s important to understand that if you deactivate your MaxButtons plug-in, all of your created buttons will disappear.
Introduced in WordPress 5.0, the Gutenberg WordPress block editor uses the built-in button block of the latest version of WordPress. Many people prefer and recommend this method because of its flexibility and practicality.
1. Create a new post or navigate to the editor section of a post you wish to add a button to.
2. Click the ‘+’ icon to add a new block. Select the button block under the section titled ‘Layout Elements’.
3. Once the button block has been created and is visible on your content editor, you can type inside of it. The text can be bold, underlined, or italic. Each of these settings is easy to toggle through as they can be found in the toolbar. In addition, you can choose to center-align or side-align your button.
4. Paste the URL of the desired page into the ‘Paste URL or Type to Search’ field that is located beneath your button.
5. Click on the ‘Apply’ icon.
6. From here, you can customize your button. You may change its style, text color, background color, and much more from the comfort of the block settings panel, located on the right side of the page.
You can choose from three distinct button styles: outline, default, and squared. If you aren’t sure which one you like, you can try them by clicking to see a preview. You can also make changes to your color scheme by going to your ‘Color Settings’ section.
Here, you’ll find five color variants for your background and text. Or, you could opt to use a custom color option by clicking on ‘Custom Color’.
These are a few easy ways to add buttons in WordPress, but the best, in our view, is by using the buttons feature that is already built into BeTheme.
Buttons, regardless of how they make it onto your site, are always useful. When done correctly, they can be a deciding factor for your site’s success.
Be sure to monitor your button’s success. Using Google Analytics is a good way to do this, allowing you to track visitor clicks and add Google UTM parameters.
Parameters are important for gaining insight into the source of your visitor’s click, i.e. where they were before they clicked onto the link that took them to your page.
If you enjoyed reading this article about how to add a button in WordPress, you should read these as well:
Free cheat sheets available
Subscribe to download a set of cheat sheets for CSS, JS, and HTML
You'll receive an email with the cheat sheets in an instant.