Creating a shortcode for a button in WordPress

When I first started out in WordPress, I was using the WYSIWYG editor to create my buttons and trust me, looking back now, “Jesus, it was long winded”.

Only if I knew back then, how to create my own shortcodes for my buttons it would have been great and definitely more time consuming.

Today I’m going to share with you how I do this. So, we’ll turn this:

<button class="red">
    <a href="#">Shop now</a>
</button>

Into a working button that doesn’t require any HTML at all, we can use it with the shortcode function in WordPress.

In your functions.php file, you’ll want to add a new function:

<?php 

function button($atts, $content = null) {
    extract( shortcode_atts( array(
        'url' => 'placeholder goes here, preferably a #'
    ), $atts ) );
    return '<button><a href="' . $url . '">' . do_shortcode($content) .'</a></button>';
}

add_shortcode('button', 'button');

?>

Here you’ve created a function that creates the shortcode, here’s how it works:

  • Create the function called button
  • Extract the shortcode variables to import variables into the following array
  • Created our array variable url so that we can insert our own URL later
  • Defined the array as our atts (attribute) variable
  • Return / call out our button
  • Turn the function into a shortcode

Now we’ve created the function, we need to display the shortcode on our WordPress website. For the sake of this tutorial, let’s create a post and enter the following:

[button url="/shop/"]Button Text[/button]

This will then display something a little like the following:

[button url=”” class=””

But we want the button to have a class right? Sure, let’s make a few adjustments to our functions.php snippet:

<?php

function button($atts, $content = null) {
    extract( shortcode_atts( array(
        'url' => '#',
        'class' => 'class-name'
    ), $atts ) );
    return '<button class="' . $class . '"><a href="' . $url . '">' . do_shortcode($content) .'</a></button>';
}

add_shortcode('button', 'button');

?>

So now we’ve added an attribute to our array that allows us to set the class in the button.

In order to add a class to the button, you’ll have to add define this in the shortcode:

[button url="/shop/" class="class-name"]Button Text[/button]

The button currently looks super basic, so lets add some CSS to the button:

button.class-name{
    background-color:#4DD0E1;
    border:0;
    outline:0;
    color:#E0F7FA;
    -webkit-box-shadow:5px 5px 5px -2px rgba(173,173,173,1);
    -moz-box-shadow:5px 5px 5px -2px rgba(173,173,173,1);
    box-shadow:5px 5px 5px -2px rgba(173,173,173,1);
    transition:0.5s all ease;
    -webkit-transition:0.5s all ease;
    -moz-transition:0.5s all ease;
}
button.class-name a{
    display:block;
    padding:10px 15px;
    color:inherit;
    text-decoration:none;
}
button.class-name:hover{
    background-color:#80DEEA;
}

This is a great way to display a custom button over and over in WordPress, I hope this helped you as much as it helped me.