WordPress button shortcodes: how to add a button to your site

Struggling to add buttons to your WordPress site? Well, since this platform doesn’t have any default feature that allows you to create one, we have to get some help from plugins.

In this tutorial, we’ll show you how to use both WordPress button shortcode and non-shortcode plugins.

What are WordPress button shortcodes?

WordPress button shortcodes are small pieces of code that let you easily include interactive elements, such as a call-to-action link, on your web page. They are handy for a few reasons:

• Ease of use. Inserting buttons on your site using shortcodes is easy, as you only need to write the brief code snippet into the post editor without writing custom CSS or JavaScript.
• Customizability. You can customize various aspects of your shortcode buttons, including the size, color, shape, and target URL. Whi
• Consistency and reusability. After creating a WordPress shortcode for a button, you can insert it on multiple pages and retain the same design every time.

The WordPress platform offers different ways to create button shortcodes, including writing them from scratch. In this tutorial, we’ll set it up using a plugin because it is the easiest method and simplifies the shortcode management for the future.

How to create a button shortcode in WordPress?

To set up a button shortcode in WordPress, simply install the required plugin and follow the procedure. Depending on the plugin, however, the steps for creating a shortcode differ. So, check its manuals to learn about the actual process.

In this article, we’ll show you how to create a button shortcode with MaxButtons since it’s one of the most popular and simplest plugins for this task. Here’s how to do it:

1. Open the WordPress admin dashboard. Navigate to the sidebar and click MaxButtons.
2. Hit Add New, which will redirect you to the button shortcode creation menu.

3. Under the Basics section, configure essential settings of your button. For example, set the button’s name, URL, font, padding, and more.
4. Scroll down to the next sections for border, background, text shadow, and container customization to further refine your button’s styling. You can preview how your button looks in the top right corner of your screen.

5. Go to the Advanced section and adjust other optional settings.
6. Once you finish designing the button, hit Save.

To check previously-created buttons, navigate to your WordPress sidebar → MaxButtons → Buttons. Here, you can find all existing buttons with options to manage them, as well as their ID and name.

Once the button is ready, add it to your web page. Here’s how to do it:

1. Go to the WordPress admin dashboard’s sidebar → Posts → All Posts.
2. Click Edit on the page you want to insert the button into.
3. Click the + icon to add a new block and select the MaxButtons block.
4. Navigate to the block configuration pane on the right side of your screen and hit Select button.
5. Select the button you want to insert and click Insert Button into Editor.

The button will appear in your editor. When inserting a button, you can overwrite its configuration by adjusting the settings from the block configuration pane. For example, you can change the text, URL, and set it to open the link in a new tab.

If you use the WordPress Classic Editor, the steps for inserting a button are similar. The difference is that you add a button by clicking the Add block button instead of using a block and overwrite the settings before insertion.

On the Gutenberg editor, you can also use the default Shortcode block to manually insert the button. However, you must manually write the shortcode, and the button design doesn’t display in the post editor.

Using shortcodes, you can insert a MaxButtons block by either using its name or ID, as shown below.

[maxbutton id="1"]

[maxbutton name="Google"]

You can also overwrite existing configurations by adding more parameters to your shortcode. If you wish to replace all supported settings, your code looks as follows:

[maxbutton id="1" text="yourtext" url="http://yoururl" linktitle="tooltip" window="new" nofollow="true" extraclass="extra"]

Suppose you only replace the text, omit other settings, and include only the text parameter.

What are the alternatives to button shortcode plugins?

There are alternatives to button shortcode plugins that offer a more straightforward process for creating and inserting this interactive content. Here are two of the most common options.

Block plugin

While shortcodes offer flexibility and reusability, they might not be as beneficial if you prefer to insert buttons using a block. For this purpose, a button plugin like Ultimate Blocks is the ideal method.

Ultimate Blocks offer a pre-configured button block that you can easily insert into the WordPress post editor and style it from there. Simply add the Buttons (UB) block and begin modifying your button directly.

The design options are more extensive MaxButtons, allowing you to change the button orientation, apply an animation, and include an icon to make it more compelling. However, some styling settings are only available on the PRO version.

You can save the design of your button by navigating to the Style tab of the block configuration pane. Then, expand the Advanced section and hit save current style.

If you wish to reuse the styling in another button, go to the Style tab, expand the Styles section, and select a saved design. You can also set a button design as a default, which helps maintain a consistent design easily without using shortcodes.

Buttons block

The Buttons block is a built-in feature of WordPress 5.4 and later versions that lets you drag and drop a button to your post or page without installing an additional plugin. Here’s how to use it:

1. Open your Gutenberg WordPress block editor and click the plus icon to add a new block.
2. In the block explorer, search for and select the Buttons block.
3. Enter the text for your button.
4. Adjust the settings of your button from the inline tooltip and block configuration pane.

While straightforward, this method has limited customization options. Moreover, it’s not reusable and doesn’t work on the Classic Editor.

If you want a simple solution and only need to add a few buttons, this built-in block is an excellent alternative to using a plugin. To get this feature, all you need is to open your WordPress hosting control panel or admin dashboard and download version 5.4 or newer.

Conclusion

Buttons are very beneficial for any website. They effectively grab attention and contain call-to-action texts that encourage people to perform an action.

As WordPress doesn’t provide any default feature to insert a button to your website, you’ll have to use some additional plugins. There are WordPress button shortcode-based and non-shortcode-based plugins. In this tutorial, you learned how to use both. Which one suits you best? It’s up to you to decide!

All of the tutorial content on this website is subject to Hostinger's rigorous editorial standards and values.