How To Create A WordPress Button Shortcode

Buttons give you a medium to encourage visitors to perform specific actions on your website.

A button can contain a call-to-action text that invites visitors to sign up for your newsletter, log in to your membership page, download a file, or access your YouTube channel.

For example, I use a button on Bloggintips.com’s homepage to make it easy for visitors to join my blog’s Facebook group.

With button shortcodes, you can add a wide range of buttons to your WordPress site and use real-time visual editing to customize them to your satisfaction.

There are other ways to create a button in WordPress, but the upside of using shortcodes is that there is no limit to how much you can customize your button to suit your needs.

In this article, I will show you how to create a WordPress button shortcode and the tools and resources you will need.

How To Create A WordPress Button Shortcode: Frequently Asked Questions

How To Create A WordPress Button Shortcode: Step-By-Step Instructions

There are two different ways to create a WordPress shortcode button.

First, I’ll show you how to do it using plugins, which is highly recommended because most people don’t know how to write code from scratch.

Then, I will also give you an alternative to do it using your own code.

The advantage of the second method is that you can customize your button to your satisfaction if the available plugin options don’t meet your needs.

1. Set up the button with a shortcode plugin
2. Add the button shortcode manually

Method 1: Set Up The Button With A Shortcode Plugin

Once you have installed your button plugin, in this case, the MaxButtons plugin, you will find the MaxButtons option in the WordPress sidebar menu.

Click MaxButtons > Add New to access the plugin’s dashboard.

On the next screen, you will see the Button Editor.

Here you can input a name for your button, add a URL, and set the design elements (font, text color, background color, etc.).

You will be able to see all the modifications you are making to your button in the live preview box on the right side of your screen.

When you are done styling your button, click Save at the top right of your screen.

Now, go to MaxButtons > Buttons to view the list of buttons and the shortcode for the button you just created.

In the image below, the shortcode is [maxbutton name=”starter button”].

To insert your button shortcode into your post or page, you can simply copy and paste it.

If you are using the classic editor, you can click Add Button from the toolbar, select the button you want, and then click Insert Button into Editor.

That’s it, your button is ready.

I should point out that you may not see the button on your backend editor, and it may only appear on your live website when your content is published.

One major issue with button shortcode plugins is that you will lose all your buttons if you ever delete the plugin.

The only way to avoid this is to use a non-shortcode button plugin.

The Forget About Shortcode Buttons plugin is an excellent alternative.

Method 2: Add The Button Shortcode Manually

Although I will give you the PHP code snippet you need to implement this method, you still need to have mastery of CSS to be able to customize your button to suit your styling needs.

This is why only people with coding knowledge should use this method.

To add your new button, open the functions.php file in your child theme and add the PHP code in the image below.

I will also suggest using the Code Snippets plugin as its a much easier way to add the code to your theme.

function custom_button_shortcode( $atts, $content = null ) {
    // shortcode attributes
    extract( shortcode_atts( array(
        ‘url’    => ”,
        ‘title’  => ”,
        ‘target’ => ”,
        ‘text’   => ”,
    ), $atts ) );
    $content = $text ? $text : $content;
    // Returns the button with a link
    if ( $url ) {
        $link_attr = array(
            ‘href’   => esc_url( $url ),
            ‘title’  => esc_attr( $title ),
            ‘target’ => ( ‘blank’ == $target ) ? ‘_blank’ : ”,
            ‘class’  => ‘custombutton’
        );
        $link_attrs_str = ”;
        foreach ( $link_attr as $key => $val ) {
            if ( $val ) {
                $link_attrs_str .= ‘ ‘ . $key . ‘=”‘ . $val . ‘”‘;
            }
        }
        return ‘<a’ . $link_attrs_str . ‘><span>’ . do_shortcode( $content ) . ‘</span></a>’;
    }
    // Return as span when no link defined
    else {
        return ‘<span class=”custombutton”><span>’ . do_shortcode( $content ) . ‘</span></span>’;
    }
}
add_shortcode( ‘custombutton’, ‘custom_button_shortcode’ );

Adding the code will create a new button shortcode you can insert into your pages and posts.

For example, the relevant shortcode for my bloggingtips.com website will be:

[custombutton

url=”https://bloggingtips.com/“

target=”self” text=”Go To FaceBook Group” ]

If I insert this shortcode into my WordPress editor and preview my post, I should see a live button on my website.

The next thing is to style the button. You can customize the button by adding some CSS using the WordPress Customizer.

To access the customizer, go to Appearance > Customize > Additional CSS.

Once you are done, Preview your page to view the results of your work.

Similar Tutorial Types To Check Out

• How to Go Through the Design Process: this article will guide you through the steps you need to take to create a working prototype of the product you want to build.
• How to Design a Landing Page: discover what it takes to build pages with suggestive imagery and unique content that consistently convert web visitors to leads.
• How to Go Through the Website Design Process: this article will show you a seven-step process that will help bring your dream website to life.

Wrapping Up

The process of adding buttons in WordPress is straightforward, especially if you are using a plugin.

With a plugin, you can get a button that is customized to your satisfaction in a few minutes, while avoiding any code problems that may occur if you use the manual method.

Ultimately, the method you choose will depend on your button styling needs and the level of your technical knowledge.