How to create custom shortcode in WordPress

Shortcode is one of the awesome feature in WordPress. It was introduce in WordPress version 2.5. In this post I am going to discuss basics of shortcodes, different types of shortcodes. Finally how to create own custom shortcode with a snippet example.

What is a shortcode?

A shortcode is a simple text code that wrapped within square brackets ([…]). The shortcode will replace with dynamic content defined some where else. This can be add on posts or pages. It is useful when need a complicated line of codes like HTML repeated times on different posts/pages.

WordPress codex provide Shortcode_API, which provides the following shortcodes are included with WordPress:

Create a custom Shortcode

Lets create our own custom shortcode for a simple usage. There are three types of shortcodes:

  1. Simple Shortcode
  2. Shortcode with parameter
  3. Shortcode with content

We are going create a custom shortcode [mailme]. It is going to define like this adding default email id and linking to mailto. All these code need to add on theme’s functions.php file

Simple Shortcode

Shortcode: [mailme]

Replace to:
<a href=”mailto:vinu@technoremedies.com”>vinu@technoremedies.com</a>

Code to add in functions.php:

function shortcode_mailme() {
return ‘vinu@technoremedies.com’;
}
add_shortcode( ‘mailme’, ‘shortcode_mailme’ );

Shortcode with parameter

Shortcode: [mailme mailid=”hello@technoremedies.com”]

Replace to:
<a href=”mailto:hello@technoremedies.com”>hello@technoremedies.com</a>

Code to add in functions.php:
function shortcode_mailme($atts) {
extract(shortcode_atts(array(
'mailid' => 'vinu@technoremedies.com',
), $atts));
return ''. $mailid .'';
}
add_shortcode( 'mailme', 'shortcode_mailme' );

Shortcode with content

Shortcode: [mailme]Email me[/mailme]

Replace to: <a href=”mailto:vinu@technoremedies.com”>Email me</a>

Code to add in functions.php:
function shortcode_mailme($atts, $content ) {
extract(shortcode_atts(array(
'mailid' => 'vinu@technoremedies.com',
), $atts));
return ''. $content .'';
}
add_shortcode( 'mailme', 'shortcode_mailme' );

This is just an example of usage. We can combine this custom  shortcode with parameter and content together. These function and add_filter hook adding to theme’s functions.php file. With little knowledge of php we can create complicated dynamic codes as shortcode.

WordPress shortcodes generator is available here https://generatewp.com/shortcodes/ using this generator we can easily  create custom shortcodes.

About the author

Vinu Narayanan

I am a freelance web developer, travel addict and work-in-progress human being based in Kerala, India. I have 5 years of experience in Wordpress and I love to work in this CMS.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

Copyright © 2016. Created by Vinu Narayanan with Love.

Get Email Updates!

We send out our lovely email newsletter weekly with useful tips and techniques, and recent articles. Get Connected!
Email address