Creating shortcodes in Wordpress - Practice Exercises

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this shortcode function?

Given this WordPress shortcode function, what will be displayed on the page when the shortcode is used?

Wordpress

<?php
function greet_shortcode() {
    return 'Hello, friend!';
}
add_shortcode('greet', 'greet_shortcode');
?>

A An error message appears because the shortcode is not registered correctly.

B Nothing appears because the function does not echo the text.

C The shortcode name 'greet' is displayed as plain text.

D The text 'Hello, friend!' appears where the shortcode is placed.

💡 Hint

Remember that shortcode functions should return the content, not echo it.

The shortcode function returns the string 'Hello, friend!'. WordPress replaces the shortcode with this returned string in the page content.

📝 Syntax

intermediate

Which option correctly registers a shortcode with an attribute?

You want to create a shortcode [colorbox color="red"] that outputs a colored box. Which code correctly handles the color attribute?

Wordpress

<?php
function colorbox_shortcode($atts) {
    $atts = shortcode_atts(array(
        'color' => 'blue'
    ), $atts);
    return '<div style="background-color:' . esc_attr($atts['color']) . '; width:100px; height:100px;"></div>';
}
add_shortcode('colorbox', 'colorbox_shortcode');
?>

A The code correctly sets a default color and uses the passed attribute safely.

B The code should echo the div instead of returning it for the shortcode to work.

C The shortcode_atts function is used incorrectly and will cause an error.

D The esc_attr function is unnecessary and will break the output.

💡 Hint

Shortcode functions must return content, and shortcode_atts helps set defaults.

This code uses shortcode_atts to set a default color and safely outputs the div with the color style. Returning the string is correct for shortcodes.

🔧 Debug

advanced

Why does this shortcode output nothing?

Consider this shortcode code. Why does it not display anything on the page?

Wordpress

<?php
function show_date_shortcode() {
    echo date('Y-m-d');
}
add_shortcode('showdate', 'show_date_shortcode');
?>

A Because add_shortcode is called after the shortcode is used, so it is not registered.

B Because the function echoes output instead of returning it, the shortcode outputs nothing.

C Because the shortcode name 'showdate' is invalid and not recognized.

D Because the date function is used incorrectly and returns an empty string.

💡 Hint

Shortcode functions must return content, not echo it.

Shortcodes require the function to return the content string. Echoing outputs content immediately and returns nothing, so the shortcode outputs empty.

❓ state_output

advanced

What will be the output of this shortcode with nested shortcodes?

Given these shortcode functions, what is the final output of [outer] when used in a post?

Wordpress

<?php
function inner_shortcode() {
    return 'Inner';
}
function outer_shortcode() {
    return 'Outer ' . do_shortcode('[inner]');
}
add_shortcode('inner', 'inner_shortcode');
add_shortcode('outer', 'outer_shortcode');
?>

A Outer [inner]

B [outer]

C Outer Inner

D Inner Outer

💡 Hint

do_shortcode processes nested shortcodes inside the returned string.

The outer shortcode returns 'Outer ' plus the result of processing the inner shortcode, which returns 'Inner'. So the final output is 'Outer Inner'.

🧠 Conceptual

expert

What error occurs if a shortcode function returns an array instead of a string?

If a shortcode function returns an array like ['Hello', 'World'], what happens when the shortcode is used in WordPress content?

Wordpress

<?php
function array_shortcode() {
    return ['Hello', 'World'];
}
add_shortcode('arraytest', 'array_shortcode');
?>

A A PHP warning about array to string conversion and the output shows 'Array'.

B The shortcode outputs 'HelloWorld' by concatenating array elements.

C The shortcode outputs nothing silently without error.

D A fatal error occurs stopping the page from loading.

💡 Hint

Shortcodes must return strings, not arrays.

Returning an array causes PHP to warn about converting array to string and outputs the word 'Array' in place of the shortcode.

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