Shortcodes with parameters in Wordpress - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this shortcode with parameters?

Given the shortcode handler below, what will be the output when using [greet name="Alice"] in a WordPress post?

Wordpress

<?php
function greet_shortcode($atts) {
  $atts = shortcode_atts(array('name' => 'Guest'), $atts);
  return "Hello, " . $atts['name'] . "!";
}
add_shortcode('greet', 'greet_shortcode');
?>

A Hello, Alice!

B [greet name="Alice"]

C Hello, Guest!

D Error: Undefined index 'name'

💡 Hint

Look at how the shortcode_atts function sets default values and overrides them with passed parameters.

The shortcode_atts function merges the default 'name' => 'Guest' with the passed attributes. Since 'name' is provided as 'Alice', it replaces the default. The function returns 'Hello, Alice!'.

📝 Syntax

intermediate

Which shortcode handler code correctly handles a 'color' parameter with a default?

Choose the correct PHP shortcode handler that sets a default color of 'blue' and returns a span with that color applied.

A

function color_shortcode($atts) {
  return "<span style='color: blue;'>Colored Text</span>";
}

B

function color_shortcode($atts) {
  $color = $atts['color'] ?: 'blue';
  return "<span style='color: $color;'>Colored Text</span>";
}

C

function color_shortcode($atts) {
  $color = isset($atts['color']) ? $atts['color'] : 'blue';
  return "<span style='color: $color;'>Colored Text</span>";
}

D

function color_shortcode($atts) {
  $atts = shortcode_atts(array('color' => 'blue'), $atts);
  return "<span style='color: " . esc_attr($atts['color']) . ";'>Colored Text</span>";
}

💡 Hint

Use shortcode_atts to merge defaults with passed attributes safely.

Option D uses shortcode_atts which is the recommended way to handle shortcode parameters with defaults. It also escapes the attribute for security.

🔧 Debug

advanced

Why does this shortcode not display the passed 'text' parameter?

The shortcode handler below is registered for [showtext text="Hello"]. Why does it always output 'Default Text' regardless of the parameter?

Wordpress

<?php
function showtext_shortcode($atts) {
  $text = 'Default Text';
  if (isset($atts['text'])) {
    $text = $atts['text'];
  }
  return $text;
}
add_shortcode('showtext', 'showtext_shortcode');
?>

A Because the shortcode_atts function is not used, so $atts is empty.

B Because the shortcode is not registered properly with add_shortcode.

C Because the shortcode is used incorrectly in the post.

D Because $atts is always empty unless shortcode_atts is used.

💡 Hint

Check how the shortcode is used in the post content.

The shortcode handler is correct and checks for 'text' in $atts. If the shortcode is used as [showtext], no parameter is passed, so it outputs 'Default Text'. If used as [showtext text="Hello"], it outputs 'Hello'. The problem is likely the shortcode usage missing the parameter.

❓ state_output

advanced

What is the output of this shortcode with nested parameters?

Consider the shortcode handler below. What will be the output of [box color="red" size="large"]Content[/box]?

Wordpress

<?php
function box_shortcode($atts, $content = null) {
  $atts = shortcode_atts(array('color' => 'blue', 'size' => 'medium'), $atts);
  return "<div style='color: " . esc_attr($atts['color']) . "; font-size: " . ($atts['size'] === 'large' ? '2rem' : '1rem') . ";'>" . do_shortcode($content) . "</div>";
}
add_shortcode('box', 'box_shortcode');
?>

A <div style='color: blue; font-size: 1rem;'>Content</div>

B <div style='color: red; font-size: 2rem;'>Content</div>

C <div style='color: red; font-size: 1rem;'>Content</div>

D <div style='color: blue; font-size: 2rem;'>Content</div>

💡 Hint

Check how the size parameter affects font-size and how color is applied.

The shortcode_atts sets default color blue and size medium. The passed attributes override these with color 'red' and size 'large'. The font-size is '2rem' for large size. The content is wrapped inside the styled div.

🧠 Conceptual

expert

Which statement about shortcode parameters and security is true?

When creating shortcodes with parameters in WordPress, which practice is the most important to prevent security issues?

A Always escape user input parameters before outputting them to prevent XSS attacks.

B Never use shortcode_atts because it can cause parameter injection.

C Use eval() to parse parameters safely.

D Trust all shortcode parameters because they come from the site admin.

💡 Hint

Think about how user input can affect HTML output and security.

Shortcode parameters can be manipulated by users or content editors. Escaping output (e.g., with esc_attr or esc_html) prevents cross-site scripting (XSS) attacks. Using shortcode_atts is safe and recommended. eval() is dangerous and should never be used. Trusting all input is unsafe.