Challenge - 5 Problems
Enclosing Shortcodes Master
Get all challenges correct to earn this badge!
Test your skills under time pressure!
❓ component_behavior
intermediate2:00remaining
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]Attempts:
2 left
💡 Hint
Remember that the $content parameter contains the text between the shortcode tags.
✗ Incorrect
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
intermediate2:00remaining
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?
Attempts:
2 left
💡 Hint
Enclosing shortcodes require a second parameter for content with a default null value.
✗ Incorrect
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
advanced2:00remaining
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]
Attempts:
2 left
💡 Hint
Check the function parameters and how WordPress passes content to shortcodes.
✗ Incorrect
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
advanced2:00remaining
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]
Attempts:
2 left
💡 Hint
Shortcodes are processed inside out, so inner shortcode output is passed as content to outer shortcode.
✗ Incorrect
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
expert2:00remaining
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?
Attempts:
2 left
💡 Hint
Think about how WordPress handles shortcode return values that are not strings.
✗ Incorrect
If the shortcode function returns null, WordPress treats it as an empty string and replaces the shortcode with nothing, so no output is visible.