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.