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.

Practice

1. What is the main purpose of using parameters in WordPress shortcodes?

easy

A. To customize the output of the shortcode dynamically

B. To add CSS styles directly inside the shortcode

C. To create new WordPress posts automatically

D. To disable the shortcode temporarily

Solution

1. Step 1: Understand shortcode parameters

   Parameters allow passing extra information to shortcodes to change their behavior or output.

2. Step 2: Identify the purpose of parameters

   They let you customize what the shortcode shows without changing the code itself.

3. Final Answer:

   To customize the output of the shortcode dynamically -> Option A

4. Quick Check:

   Parameters customize shortcode output [OK]

Hint: Parameters change shortcode output without code edits [OK]

Common Mistakes:

• Thinking parameters add styles directly
• Confusing parameters with creating posts
• Believing parameters disable shortcodes

2. Which of the following is the correct syntax to define a shortcode with a parameter named color in WordPress PHP?

easy

A. function my_shortcode($atts) { return $atts['color']; }

B. function my_shortcode($color) { return $color; }

C. function my_shortcode() { return $color; }

D. function my_shortcode($atts) { $atts = shortcode_atts(['color' => 'blue'], $atts); return $atts['color']; }

Solution

1. Step 1: Recognize correct use of shortcode_atts()

   The function shortcode_atts() safely sets default values and merges user parameters.

2. Step 2: Check parameter handling

   function my_shortcode($atts) { $atts = shortcode_atts(['color' => 'blue'], $atts); return $atts['color']; } uses shortcode_atts() with default 'color' and returns the value correctly.

3. Final Answer:

   function my_shortcode($atts) { $atts = shortcode_atts(['color' => 'blue'], $atts); return $atts['color']; } -> Option D

4. Quick Check:

   Use shortcode_atts() to handle parameters [OK]

Hint: Always use shortcode_atts() to set defaults [OK]

Common Mistakes:

• Not using shortcode_atts() for defaults
• Missing parameter array in function
• Trying to access parameters without $atts

3. Given this shortcode handler in PHP:

function greet_shortcode($atts) {
  $atts = shortcode_atts(['name' => 'Guest'], $atts);
  return "Hello, " . $atts['name'] . "!";
}

What will be the output of [greet name="Alice"] in a post?

medium

A. Hello, Guest!

B. Hello, name!

C. Hello, Alice!

D. Hello, !

Solution

1. Step 1: Understand shortcode_atts default and override

   The default name is 'Guest', but if 'name' is passed, it overrides the default.

2. Step 2: Check the passed parameter

   The shortcode passes name="Alice", so $atts['name'] becomes 'Alice'.

3. Final Answer:

   Hello, Alice! -> Option C

4. Quick Check:

   Parameter overrides default value [OK]

Hint: Passed parameters override defaults in shortcode_atts() [OK]

Common Mistakes:

• Ignoring passed parameters and using defaults
• Misreading the parameter key
• Expecting output without parameter value

4. What is wrong with this shortcode handler code?

function example_shortcode($atts) {
  return "Color is " . $atts['color'];
}

Used as [example color="red"]

medium

A. It will always return 'Color is ' without the color value

B. It will cause an undefined index error if 'color' is not passed

C. It will not register the shortcode properly

D. It will output the color but ignore other parameters

Solution

1. Step 1: Check parameter handling without defaults

   The code accesses $atts['color'] directly without setting defaults or checking if it exists.

2. Step 2: Identify error risk

   If the shortcode is used without 'color', PHP will throw an undefined index notice or error.

3. Final Answer:

   It will cause an undefined index error if 'color' is not passed -> Option B

4. Quick Check:

   Always use shortcode_atts() to avoid undefined indexes [OK]

Hint: Use shortcode_atts() to prevent undefined index errors [OK]

Common Mistakes:

• Accessing parameters without defaults
• Assuming parameters always exist
• Ignoring PHP notices or warnings

5. You want to create a shortcode [box color="green" size="large"] that outputs a colored box with size text. Which PHP function correctly handles both parameters with defaults and returns a string like <div class='box large' style='background:green;'>Box</div>?

hard

A. function box_shortcode($atts) {
$atts = shortcode_atts(['color' => 'blue', 'size' => 'medium'], $atts);
return "Box";
}

B. function box_shortcode($color, $size) {
return "Box";
}

C. function box_shortcode() {
return "Box";
}

D. function box_shortcode($atts) {
return "Box";
}

Solution

1. Step 1: Use shortcode_atts() to set defaults for 'color' and 'size'

   function box_shortcode($atts) { $atts = shortcode_atts(['color' => 'blue', 'size' => 'medium'], $atts); return "
   Box"; } correctly merges defaults with passed parameters safely.

2. Step 2: Return properly formatted HTML string with parameters

   function box_shortcode($atts) { $atts = shortcode_atts(['color' => 'blue', 'size' => 'medium'], $atts); return "
   Box
   "; } uses correct string interpolation to build the div with class and style attributes.

3. Final Answer:

   function box_shortcode($atts) { $atts = shortcode_atts(['color' => 'blue', 'size' => 'medium'], $atts); return "
   Box
   "; } -> Option A

4. Quick Check:

   Use shortcode_atts() and interpolate parameters in output [OK]

Hint: Use shortcode_atts() and string interpolation for parameters [OK]

Common Mistakes:

• Not using shortcode_atts() for defaults
• Wrong function parameters
• Incorrect string concatenation or quotes