How to create your own WordPress shortcode – A Simple Example

0
138
Create WordPress Shortcodes

If you have been using or exploring WordPress for some time, you would have came across WordPress shortcodes. A shortcode is like a short command / macro in WordPress to execute a longer and more complex code, therefore allowing the code to be repeatable in different parts of your content.

Theme and plugin authors utilize shortcodes extensively to help you add function and/or aesthetics to your site. But not all themes fit your preferences 100%. So here’s how you can write your own shortcode to extend your theme to your preferences and perhaps increase your own productivity.

This example shortcode, is a currently being used on our website.

Our Objective: To create a button with a link with custom text.

First of all, we need to identify the output/result we want to achieve.

<a href="{link}" title="{text}" class="vc_btn vc_btn-turquoise vc_btn-sm vc_btn_square" target="_blank" rel="nofollow">text</a>

Which looks like {text}

Now lets create a function in functions.php with the output in mind with 2 parameters for {link} and {text}

function custom_btn($atts, $content = "") 
{

}

And now we insert the HTML output as a PHP string and replace the parameters as their respective PHP variables, return the value and register the function.

function custom_btn($atts, $content = "") 
{
		$str = '<a href="'.$atts['link'].'" title="'.$content.'" class="'.$atts['class'].'" target="_blank" rel="nofollow">'.$content.'</a>';
		return $str;

}
add_shortcode('custom_btn', 'custom_btn');

And Lastly, we insert the shortcode in our desired post like so:

[custom_btn link="https://wpjunction.net" class="vc_btn vc_btn-turquoise vc_btn-sm vc_btn_square"]VISIT US![/custom_btn]
VISIT US!

Note: It is best that you are using a child theme functions.php file when doing edits / code additions to keep your main theme updatable.

Thank you for reading this simple guide and we hope you will find it useful!

Disclosure: This page contains external affiliate links. By clicking on these links, we may receive a commission should you choose to purchase the product. Opinions on this article is our own and we do not receive any form of payment for a positive review.