WordPress Shortcode Tutorial: Simple to Advanced Part 1

Shortcodes were introduced in WordPress 2.5. These are very useful, powerful and effective functions. I always love WordPress due to its power and flexibility. WordPress is the king of CMS and blogging platforms. Custom Menus and Shortcodes are one of those features that ratchet up the user friendliness of the system.

This tutorial is about the process of building, installing, and using a shortcode in your WordPress blog. I am also planning to implement these powerful code snippets in Chip Zero, Chip Life and Chip Photo WordPress themes.

Tutorial Part 2: WordPress Shortcode TinyMCE Button Tutorial

What are Shortcodes?

I am going to break the definition of WordPress shortcode for the sake of simplicity.

• A shortcode is a special tag. You can choose the name of this special tag according to your wish. For example, [sayhello], [mylink][/mylink] etc
• You can use this special tag into your post at any location.
• This shortcode will be replaced with different content when actually viewing the post on your blog.

gallery is a built-in shortcode of WordPress. When you load a blog page with the gallery shortcode, WordPress replaces the shortcode with all of the code that actually displays a gallery of your images.

As you can observe, a shortcode looks similar to an HTML tag, but is enclosed with square brackets instead of angle brackets.

Tutorial 1: Simple Shortcode [sayhello]

We will build a very simple shortcode [sayhello] in our tutorial 1. Our shortcode [sayhello] will simply print “Hello World!”. Let’s explore it step by step.

Step 1: Create a Primary Function

Let’s write our primary function in “functions.php” file.

/**
ShortCode Tutorial
say_hello Method
*/

function say_hello() {
	return "Hello World!";
}

Step 2: Hook into WordPress

Now we will hook our function say_hello into WordPress. This can be achieved by using the “add_shortcode” method.

/**
Hook into WordPress
*/

add_shortcode( 'sayhello', 'say_hello' );

add_shortcode Method

• The first parameter defines the shortcode you’ll be using in the editor,
• The second points to the function we created a moment or so ago.

Step 3: Write Shortcode in Editor

That should do it. Just type [sayhello] into your editor and WordPress will dynamically replace the text as needed.

Tutorial 2: Advanced Shortcode – Adding Attributes

Shortcodes can be used with attributes, which are very useful, for example, for passing arguments to functions. In this tutorial, we’ll show you how to create a shortcode to display a URL, just as you would with the BBCodes that one uses on forums such as VBulletin and PHPBB.

Step 1: Create the Primary Function

This step is as simple as in our tutorial 1. We will make some enhancements in our primary function so that it should be able to accept attributes by shortcode. Let’s write “my_link” function in “functions.php” file.

/**
ShortCode Tutorial
my_link Method
*/

function my_link( $atts, $content = null ) {
  extract( shortcode_atts( array (
    'href' => 'https://www.tutorialchip.com/'
  ), $atts ) );
  return '<a href="'.$href.'">'.$content.'</a>';
}

Step 2: Hook into WordPress

This step remains unchanged, but essential. Remember, without this, WordPress has no what to do with the shortcode.

/**
Hook into WordPress
*/

add_shortcode( 'mylink', 'my_link' );

Step 3: Write Shortcode in Editor

Let’s make a test by writing our shortcode in editor.

[mylink href="https://www.tutorialchip.com/"]TutorialChip[/mylink]

When you save a post, the shortcode will display a link titled “TutorialChip” and pointing to https://www.tutorialchip.com/.

Tutorial 3: Adding Shortcode Button to TinyMCE Editor – Part 2

You may also be interested to learn adding shortcode buttons in the TinyMCE editor. Please visit WordPress Shortcode TinyMCE Button Tutorial Part 2.

Hopefully you’ve liked this tutorial. Don’t forget to subscribe your email for tutorials and resources.