Create a Shortcode From Scratch
Last modified: January 13, 2020
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…
* This button will show the rest of the post and open up an offer from a vendor
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:
- Link
- Text
- 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