Creating shortcodes in Wordpress

Introduction

Shortcodes let you add special content or features inside WordPress posts or pages easily. They save time by reusing code with a simple tag.

You want to add a button or special layout inside a post without writing HTML every time.

You want to insert dynamic content like the current date or user info inside pages.

You want to let non-technical users add complex features by typing a simple code.

You want to create reusable content blocks that can appear in many places.

You want to keep your content clean and separate from code.

Syntax

Wordpress

function shortcode_function_name($atts, $content = null) {
    // Process attributes and content
    return 'Your output here';
}
add_shortcode('shortcode_tag', 'shortcode_function_name');

The function receives attributes and optional content inside the shortcode.

Use add_shortcode to register the shortcode tag and link it to your function.

Examples

This shortcode [hello] will show "Hello, world!" wherever used.

Wordpress

function hello_shortcode() {
    return 'Hello, world!';
}
add_shortcode('hello', 'hello_shortcode');

This shortcode [button url="https://example.com"] creates a clickable button linking to the given URL.

Wordpress

function button_shortcode($atts) {
    $atts = shortcode_atts(['url' => '#'], $atts);
    return '<a href="' . esc_url($atts['url']) . '" class="btn">Click me</a>';
}
add_shortcode('button', 'button_shortcode');

This shortcode [wrap]content[/wrap] wraps the content inside a div with class "wrapper".

Wordpress

function wrap_shortcode($atts, $content = null) {
    return '<div class="wrapper">' . do_shortcode($content) . '</div>';
}
add_shortcode('wrap', 'wrap_shortcode');

Sample Program

This shortcode [greet name="Alice"] will output "Hello, Alice!". If no name is given, it says "Hello, Friend!" by default.

Wordpress

<?php
// Shortcode to display a greeting with a name attribute
function greet_shortcode($atts) {
    $atts = shortcode_atts(['name' => 'Friend'], $atts);
    return 'Hello, ' . esc_html($atts['name']) . '!';
}
add_shortcode('greet', 'greet_shortcode');

// Usage in WordPress post: [greet name="Alice"]
?>

Important Notes

Always sanitize attributes and content to keep your site safe.

Shortcodes can be nested, but use do_shortcode() inside your function to process inner shortcodes.

Test your shortcode in posts or pages to see how it looks and works.

Summary

Shortcodes let you add reusable content with simple tags inside WordPress.

Create a function that returns the output and register it with add_shortcode.

Use attributes and content to make your shortcode flexible and dynamic.

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