If you’ve ever coded a theme for the WordPress platform, you’ve probably come across shortcodes. Today I’m gonna show you how to quickly code your own.

What is a ShortCode?

In wordpress, a “short code” is a piece of text designed to add functionality to a post or a page.  For instance, since WordPress 2.5 you’ve been able to include galleries of images in your posts and pages. Once you’ve uploaded and attached your images to a gallery, you can include the gallery in your post or page by including this short code.

How to Create Your Own

• You must have the ability to edit your theme files ( through FTP or WordPress’ built in editor
• You must have a working knowledge of PHP and HTML/Javascript

The creation of a short code is as easy as creating one function in the functions.php file (which will be located in the root directory of your theme). In the example below, I first create the function “showOnHomePage” which has two parameters:

1. Atts
   • These is a named array of the attributes that have been passed from the shortcode ie,  for this shortcode [showonhomepage page="1"], the array ["page" => 1] would be passed as the first parameter
2. Content:
   • Shortcodes can either be self closing ( [standalone] ) or they can be enclosing ( [enclose] — Content — [/enclose] )
   • the Content parameter is the html/text inside of the shortcode tags.

Whatever value you return from the function will be the content that gets displayed on the page/post.

The last step to creating the shortcode is to use the add_shortcode built in wordpress function to add your code to the list of available shortcodes.

An Example

Below is an example of how to create a Short Code that lets you only display certain content if it is being displayed on the home page.

Functions.php

1
2
3
4
5
6
7
8
9
10
function showOnHomePage($atts, $content = null){

    if(!is_home()){

        $content = '';

    } else {

        $content = do_shortcode( $content ) ;

    }

    return $content;

}



add_shortcode( 'home', 'showOnHomePage' );

WordPress Post Editor

1
2
3
[home]

    This text will show up on the home page.

[/home]

Reference

Great reference article for Short Codes, here.