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

WordPress button shortcodes enable you to easily add custom buttons to your website without having to write the CSS code from scratch. These code snippets are easily created, reused, and customized, making them the preferred method for adding these interactive elements.

The easiest way to create and add WordPress shortcodes to your website is to use a plugin like MaxButtons. After installing it, simply:

1. Open MaxButtons’s button creation menu on your WordPress admin dashboard.
2. Create a new button and configure its behavior.
3. Edit a post where you want to insert the button.
4. Insert the button using the MaxButtons block or manually using a shortcode.

If you don’t want to use a shortcode, you can add buttons using plugins like Ultimate Blocks, which provide a design customization feature built into the WordPress editor. In WordPress 5.4 or later, you can also do it with the default Buttons block.

Before going deeper, explore what WordPress button shortcodes are and how to add them to your website using a plugin. Then, learn about alternative methods so you can determine whether they are better suited for your use cases.

What are WordPress button shortcodes?

WordPress button shortcodes are small pieces of code that let you easily include interactive elements, like a call-to-action buttons, 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 a 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.
• 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 the 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 panel. 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 overwriting the settings before insertion.

In 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 button 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 should look like this:

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

This is supposing you only want to 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 than 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 in 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 with 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. In case you’re using an older version of WordPress, simply open your WordPress hosting control panel or admin dashboard and download Version 5.4 or newer.

How to create a custom WordPress shortcode

So far, we have explained how to add button shortcodes into your WordPress site using plugins. While easy to use, you may find that they offer limited customization options and can slow down your server, especially if you already have several extensions installed.

If you want to avoid plugins, you can create a WordPress shortcode for your button from scratch. Since this method involves manual coding, it requires some technical knowledge and may not be suitable for beginners who want a quick solution.

Conversely, developers or seasoned WordPress users may prefer creating the shortcode from scratch since they have full control over the button design as well as configuration. Moreover, this method helps maintain optimal performance since the additional code is leaner and cleaner than using a plugin.

Whichever method works best for you, you’ll now be fully equipped to start creating your own button shortcodes.

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