Creating shortcodes in Wordpress - Try It Yourself

Creating Shortcodes in WordPress

📖 Scenario: You want to add a simple reusable message block inside your WordPress posts without typing the full message every time.Shortcodes let you do this by typing a small code snippet that WordPress replaces with your message.

🎯 Goal: Build a WordPress shortcode that outputs a friendly greeting message when used inside posts or pages.

📋 What You'll Learn

Create a function that returns a greeting message

Register a shortcode named greeting linked to the function

Use the shortcode inside content to display the message

💡 Why This Matters

🌍 Real World

Shortcodes let WordPress users add reusable content blocks easily without coding each time.

💼 Career

Knowing how to create and register shortcodes is useful for WordPress developers customizing themes and plugins.

1

Create the greeting function

Create a function called my_greeting_function that returns the string 'Hello, welcome to my site!'.

Wordpress

# Your code here

Hint

Use function my_greeting_function() { return 'Hello, welcome to my site!'; }

2

Register the shortcode

Add a line to register the shortcode greeting using add_shortcode that links to the function my_greeting_function.

Wordpress

<?php
function my_greeting_function() {
    return 'Hello, welcome to my site!';
}

# Your code here

Hint

Use add_shortcode('greeting', 'my_greeting_function'); to register the shortcode.

3

Use the shortcode in content

Write a comment showing how to use the shortcode [greeting] inside WordPress post content.

Wordpress

<?php
function my_greeting_function() {
    return 'Hello, welcome to my site!';
}

add_shortcode('greeting', 'my_greeting_function');

# Your code here

Hint

Write a comment like // Use the shortcode [greeting] inside post content

4

Complete the plugin file

Add the PHP opening tag <?php at the top if missing and ensure the full code is ready to be saved as a plugin file.

Wordpress

<?php
function my_greeting_function() {
    return 'Hello, welcome to my site!';
}

add_shortcode('greeting', 'my_greeting_function');

// Use the shortcode [greeting] inside post content to display the message

# Your code here

Hint

Make sure the file starts with <?php and includes the function and shortcode registration.

Practice

1. What is the main purpose of creating a shortcode in WordPress?

easy

A. To manage user roles and permissions

B. To create a new theme for the website

C. To add custom CSS styles to the site

D. To insert reusable content or functionality using a simple tag

Solution

1. Step 1: Understand shortcode purpose

   Shortcodes allow users to add reusable content or features easily inside posts or pages.

2. Step 2: Compare with other options

   Creating themes, adding CSS, or managing users are unrelated to shortcodes.

3. Final Answer:

   To insert reusable content or functionality using a simple tag -> Option D

4. Quick Check:

   Shortcodes = reusable content tags [OK]

Hint: Shortcodes add reusable content with simple tags [OK]

Common Mistakes:

• Confusing shortcodes with themes or CSS
• Thinking shortcodes manage users
• Assuming shortcodes are for styling only

2. Which of the following is the correct way to register a shortcode named hello in WordPress?

easy

A. register_shortcode('hello', 'hello_function');

B. add_shortcode('hello_function', 'hello');

C. add_shortcode('hello', 'hello_function');

D. register_shortcode('hello_function', 'hello');

Solution

1. Step 1: Recall shortcode registration syntax

   The correct function is add_shortcode with first argument as shortcode tag, second as callback function.

2. Step 2: Match correct argument order

   add_shortcode('hello', 'hello_function'); uses add_shortcode('hello', 'hello_function'), which is correct syntax.

3. Final Answer:

   add_shortcode('hello', 'hello_function'); -> Option C

4. Quick Check:

   add_shortcode(tag, callback) = correct [OK]

Hint: Use add_shortcode('tag', 'function') to register [OK]

Common Mistakes:

• Using register_shortcode instead of add_shortcode
• Swapping the order of arguments
• Passing function name as first argument

3. Given this shortcode function:

function greet_shortcode($atts) {
  $name = $atts['name'] ?? 'Guest';
  return "Hello, $name!";
}
add_shortcode('greet', 'greet_shortcode');

What will be the output of [greet name="Alice"] in a post?

medium

A. Hello, !

B. Hello, Alice!

C. [greet name="Alice"]

D. Hello, Guest!

Solution

1. Step 1: Analyze shortcode attributes

   The function checks if 'name' attribute exists; if yes, uses it; else defaults to 'Guest'.

2. Step 2: Apply given shortcode with name="Alice"

   The attribute 'name' is 'Alice', so output is "Hello, Alice!".

3. Final Answer:

   Hello, Alice! -> Option B

4. Quick Check:

   Attribute 'name' passed = output uses it [OK]

Hint: Attributes override defaults in shortcode functions [OK]

Common Mistakes:

• Ignoring attributes and using default always
• Outputting shortcode tag instead of processed text
• Missing attribute check causing errors

4. Identify the error in this shortcode registration code:

function my_shortcode() {
  return 'Welcome!';
}
add_shortcode(my_shortcode, 'welcome');

medium

A. The function name should be a string in add_shortcode

B. The function must echo output, not return

C. The shortcode tag and callback function arguments are swapped

D. Shortcode functions cannot have parameters

Solution

1. Step 1: Check add_shortcode argument order and types

   The first argument must be the shortcode tag as a string, and the second argument must be the callback function name as a string.

2. Step 2: Identify incorrect argument usage

   The code uses add_shortcode(my_shortcode, 'welcome') where my_shortcode is not quoted, so it's treated as a constant or variable, causing an error. Also, the arguments are swapped.

3. Step 3: Correct usage

   The correct call should be add_shortcode('welcome', 'my_shortcode'); with both arguments as strings and in correct order.

4. Final Answer:

   The function name should be a string in add_shortcode -> Option A

5. Quick Check:

   add_shortcode('tag', 'function') correct order and string types [OK]

Hint: First argument is shortcode tag string, second is function name string [OK]

Common Mistakes:

• Swapping shortcode tag and function arguments
• Not quoting function name as string
• Expecting shortcode function to echo instead of return

5. You want to create a shortcode [box color="blue"]Content[/box] that wraps the content in a colored div. Which of these functions correctly implements this?

hard

A. function box_shortcode($atts, $content = null) {
$color = $atts['color'] ?? 'red';
return "$content";
}
add_shortcode('box', 'box_shortcode');

B. function box_shortcode($content, $atts = null) {
$color = $atts['color'] ?? 'red';
return "$content";
}
add_shortcode('box', 'box_shortcode');

C. function box_shortcode($atts) {
$color = $atts['color'] ?? 'red';
return "$content";
}
add_shortcode('box', 'box_shortcode');

D. function box_shortcode() {
return "Content";
}
add_shortcode('box', 'box_shortcode');

Solution

1. Step 1: Check function parameters for shortcode with content

   Shortcode functions that handle enclosed content must accept two parameters: $atts and $content (default null).

2. Step 2: Verify attribute handling and output

   function box_shortcode($atts, $content = null) { $color = $atts['color'] ?? 'red'; return "
   $content"; } add_shortcode('box', 'box_shortcode'); correctly uses $atts['color'] with default, and returns a div with inline style wrapping $content.

3. Final Answer:

   Function with ($atts, $content=null) and returns colored div wrapping content -> Option A

4. Quick Check:

   Shortcode with content needs $content param [OK]

Hint: Use ($atts, $content=null) to access content inside shortcode [OK]

Common Mistakes:

• Swapping $atts and $content parameters
• Not setting default null for $content
• Ignoring content parameter and hardcoding output