Enclosing shortcodes in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this enclosing shortcode?

Consider this WordPress shortcode definition and usage. What will be the output on the page?

Wordpress

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

// Usage in post content:
// [wrap]hello world[/wrap]
[/code]

A <div class="wrapper">HELLO WORLD</div>

B <div class="wrapper">hello world</div>

C [wrap]hello world[/wrap]

D Error: Missing content parameter

💡 Hint

Remember that the $content parameter contains the text between the shortcode tags.

The shortcode function wraps the content in a div and converts it to uppercase using strtoupper. So the output is the content in uppercase inside the div.

📝 Syntax

intermediate

Which shortcode definition correctly supports enclosing content?

You want to create a shortcode that can wrap content between opening and closing tags. Which of these definitions correctly supports that?

A function my_shortcode($atts) { return 'Hello'; } add_shortcode('greet', 'my_shortcode');

B function my_shortcode() { return 'Hello'; } add_shortcode('greet', 'my_shortcode');

C function my_shortcode($atts, $content = null) { return strtoupper($content); } add_shortcode('greet', 'my_shortcode');

D function my_shortcode($content) { return strtolower($content); } add_shortcode('greet', 'my_shortcode');

💡 Hint

Enclosing shortcodes require a second parameter for content with a default null value.

Only option C defines the function with two parameters: $atts and $content = null, which is required to receive the enclosed content. Others either lack the content parameter or have incorrect signature.

🔧 Debug

advanced

Why does this enclosing shortcode output nothing?

Given this shortcode code, why does the content not appear on the page? [code] function highlight_shortcode($atts, $content) { return '' . $content . ''; } add_shortcode('highlight', 'highlight_shortcode'); // Usage: [highlight]Important[/highlight] [/code]

A Because $content parameter is missing the default null value, so it is empty.

B Because the content is not passed as the second parameter with default null, so $content is empty.

C Because the shortcode is not registered with add_shortcode.

D Because the shortcode function does not return anything.

💡 Hint

Check the function parameters and how WordPress passes content to shortcodes.

WordPress requires the $content parameter to have a default value of null to properly receive enclosed content. Without '= null', $content is not set and is empty, so nothing is output.

❓ state_output

advanced

What is the output of nested enclosing shortcodes?

Given these shortcode definitions and usage, what is the final output? [code] function bold_shortcode($atts, $content = null) { return '' . $content . ''; } function italic_shortcode($atts, $content = null) { return '' . $content . ''; } add_shortcode('bold', 'bold_shortcode'); add_shortcode('italic', 'italic_shortcode'); // Usage: // [bold]This is [italic]important[/italic][/bold] [/code]

A <strong>This is <em>important</em></strong>

B [bold]This is [italic]important[/italic][/bold]

C <em>This is <strong>important</strong></em>

D This is important

💡 Hint

Shortcodes are processed inside out, so inner shortcode output is passed as content to outer shortcode.

The inner [italic] shortcode wraps 'important' in . Then the outer [bold] shortcode wraps the entire string including the inner tags in . So the final output nests inside .

🧠 Conceptual

expert

What happens if an enclosing shortcode returns null?

If a WordPress enclosing shortcode function returns null instead of a string, what will be the result on the page?

A The content inside the shortcode is displayed without any wrapping.

B The shortcode tags remain visible as plain text on the page.

C WordPress throws a fatal error and stops rendering the page.

D The shortcode is replaced by an empty string, so no visible output.

💡 Hint

Think about how WordPress handles shortcode return values that are not strings.

If the shortcode function returns null, WordPress treats it as an empty string and replaces the shortcode with nothing, so no output is visible.