If you have been using WordPress for some time, you would have came across WordPress Shortcodes. Some shortcodes come pre-built in WordPress or is specific to the WordPress theme you are using and some shortcodes come as an extension via a WordPress Plugin.
What exactly is a WordPress Shortcode?
A shortcode is like a short command / macro unique to WordPress. It is used to execute a longer and more complex code, therefore allowing the code to be displayed. Think of it as a snippet of code (HTML or PHP) that can be reused again and again throughout your website.
WordPress Themes and plugins utilize shortcodes extensively to help you add function and/or aesthetics to your site. But not all themes fit your preferences 100%.
WordPress Shortcode Example
So here’s how you can write your own shortcode to extend your theme to your preferences and perhaps increase your own productivity. In this guide, we will walk through with you an example of creating a simple button with a link using a shortcode.
The Example
Prerequisite: You will need to understand some basic HTML and CSS. And be comfortable with editing the functions.php file within WordPress
Our Objective: To create a simple button with customizable link and text.
First of all, lets take a quick look at what we are going to create below. It is basically a full width button with white text on a Turquoise background.
VISIT US!
Below is the shortcode we want to create with 2 parameters for link and text.
[custom_btn link="https://wpjunction.net"]VISIT US![/custom_btn]
And the raw HTML code below.
<a style="padding: 5px 5px 5px 5px; background-color: turquoise; display: block; text-align: center; color: white; margin: 20px; border-radius: 4px;" href="https://wpjunction.net" target="_blank" rel="nofollow">VISIT US!</a>
Don’t worry if the code seems complicated and messy. We’ll do this step by step.
Before proceeding…
First of all, lets locate the functions.php file of your WordPress installation. You can do this within the WordPress Dashboard by assessing the Appearance > Theme Editor.
Before attempting this, make sure you have a backup of the file or have means to manually edit functions.php (via cpanel, file manager for example) should anything go wrong. Although this tutorial is relatively safe, even for beginners, please only attempt only at your own risk.
Now that we have an idea of our output and the code, lets begin.
Moving on…
First, lets create a function within functions.php. For our example we will be using 2 dynamic parameters {link} and {text}. This is so that we can call out our shortcode with different links and Text wherever we want. Shortcodes are, after all, for re-usability.
The basic function that we need is as follows.
function custom_btn_Func($atts, $content = "")
{
//Your Logic Here
}
add_shortcode('custom_btn', 'custom_btn_Func');This is the basic construct of a shortcode. With $atts as an array able to accept multiple variables. And $content being, well, the content of the shortcode.
The example below shows the usage of passing a content and attributes with the shortcode.
[custom_btn att="{attribute}" att1="{attribute2}"]{Content}[/custom_btn]The last bit of code registers the shortcode “custom_btn” to run the function “custom_btn_Func”. You can change the shortcode and function names to be something more meaningful to your use case of course.
add_shortcode('shortcode_name', 'function_name');Next we add a little bit of code to check if link attribute is empty and assign them with default values. In this case, we check if the “link” attribute is set and defaults it to a value “#”.
function custom_btn_Func($atts, $content = "")
{
//check if attributes are empty and assign default
$a = shortcode_atts( array(
'link' => '#',
), $atts );
//Your Logic Here
}
add_shortcode('custom_btn', 'custom_btn_Func');Next And now we insert the HTML output as a PHP string and replace the parameters as their respective PHP variables and of course, return the output.
It’s important to remember to always return the output instead of printing the output ie. with echo. As this causes problems and conflicts with other plugins and themes.
function custom_btn_Func($atts, $content = "")
{
//check if attributes are empty and assign default
$a = shortcode_atts( array(
'link' => '#',
), $atts );
//Your Logic Here
//Css style string
$style = 'padding: 5px 5px 5px 5px;background-color: turquoise; display: block; text-align: center;color:white; margin: 20px; border-radius: 4px;';
$str = '<a href="'.$atts['link'].'" title="'.$content.'" style="'.$style.'" target="_blank" rel="nofollow">'.$content.'</a>';
return $str;
}
add_shortcode('custom_btn', 'custom_btn_Func');Lastly, we insert the shortcode in our desired post like so:
[custom_btn link="https://wpjunction.net" ]VISIT US![/custom_btn]
Conclusion
There you have it. A step by step example of how to build your custom shortcode in WordPress. For further reading on Shortcodes, you may read more on the official Shortcodes API documentation. Thank you for reading this simple WordPress shortcode tutorial and we hope you will find it useful!
