shortcode

Create a Shortcode From Scratch

Last modified: October 23, 2018

If you have been using WordPress for a while, you’ve probably had the pleasure using Shortcodes.

What are Shortcodes?

Shortcodes are short (like the name suggests) peices of code withing square brackets that (could) accept variables and everything ultimately prints out on the page.

That sentence could be a bit mixing up so hopefully this will be easier. In this tutorial we are going to learn how to add a shortcode within your text in a post and turn it into a colorful button with a link when the post gets published.

Here we go…

Create a Plugin First

We already learned how to create a plugin from scratch, so I’ll just paste the code for the basics and we’ll continue from there.

<?php
/*
Plugin Name: BTN Shortcode
Description: Create a button with a shortcode
Author: Scan WP
*/

// Register style sheet.
add_action( 'wp_enqueue_scripts', 'swp_register_plugin_styles' );

/**
 * Register style sheet.
 */
function swp_register_plugin_styles() {
  wp_register_style( 'whatsapp-c2c-style', plugins_url( 'btn-shortcode/assets/css/plugin.css' ) );
  wp_enqueue_style( 'whatsapp-c2c-style' );
}

I just added the following as a plugin and activated it. As you can see I already registered the styles because we’ll need some css here.

Creating the Shortcode

So for our shortcode we need 3 parameters:

  1. Link
  2. Text
  3. Color

Within your main plugin php file, add the following:

function swp_scode_func( $atts ) {
    $a = shortcode_atts( array(
        'link' => '',
        'text' => 'Try it Out',
        'color' => 'green',
    ), $atts );

    return '<div class="swp_scode_btn">
    <a style="background-color:' . $a['color'] . ';" class="" href="' . $a['link'] . '" target="_blank">' . $a['text'] . '</a>
      </div>';
}
add_shortcode( 'swp-scode', 'swp_scode_func' );

What we did here is declare the name of the shortcode which is swp-scode and the shortcode can accept 3 parameters like we just wrote above. However, if you don’t add the button text or background color for some reason, there is a backup.

Using the Shortcode

Now all you have to do is add a test shortcode to your post and checking if it works.

As a test run we’ll create a button that says go here! and points to google.com

[swp-scode link="https://google.com" text="Go here!"]

Let’s see how this looks…

Depending on the actual style you already have on your site the look of the button might vary a little but in general you should see a small green button.

What I want to do is make sure the button is centered, has some padding in it, the text is white and make it change colors a bit when in hover state and some margins.

Adding Style to the Shortcode

In your plugin, create an assets folder and in it add a css folder. Within that folder create a plugin.css file. This is where I’ll add some style for our button.

This is what I added to my css file but feel free to add your own style.

.swp_scode_btn{
  text-align: center;
  margin: 20px 0px;
}
.swp_scode_btn a{
  color: #fff !important;
  padding: 10px 30px
}
.swp_scode_btn a:hover{
  text-decoration: none;
  opacity:.50;
}

 

Create a Shortcode From Scratch - It's Ready!

If you followed until here, your shortcode should work perfectly now!

Adding the following to a post:

[swp-scode link="https://google.com" text="Go here!"]

Should create a perfect button on your post linking to google and even styled nicely.

Final Thoughts

This wasn’t too hard now was it? Even if you aren’t a very savvy developer you should probably be able to follow this tutorial easily and make a cool button on your site.

BTW – if you want, you could keep the shortcode as it and have the green backup color working, or you can add it in the shortcode itself in order to override it, like so:

[swp-scode link="https://google.com" text="Go here!" color="red"

This will change the background color to red. And obviously you can use HEX codes or RGBA.

If you had trouble following along – here is the full code: btn-shortcode

Save 4 Later
Email these links to yourself