Shortcodes with parameters in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to register a shortcode named 'greet'.

Wordpress

add_shortcode('[1]', 'greet_function');

Drag options to blanks, or click blank then click option'

Ashortcode

Bhello

Cwelcome

Dgreet

Attempts:

3 left

💡 Hint

Common Mistakes

Using a function name instead of the shortcode tag.

Using uppercase letters in the shortcode name.

The shortcode name must match the first argument in add_shortcode to register it correctly.

2fill in blank

medium

Complete the function to get the 'name' parameter from shortcode attributes.

Wordpress

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

Drag options to blanks, or click blank then click option'

Aname

Btitle

Cperson

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different key than defined in shortcode_atts.

Forgetting to use quotes around the key.

The 'name' key is used to access the parameter passed in the shortcode attributes.

3fill in blank

hard

Fix the error in the shortcode function to correctly return the greeting.

Wordpress

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

Drag options to blanks, or click blank then click option'

A$atts.name

B$atts->name

C$atts['name']

D$atts[name]

Attempts:

3 left

💡 Hint

Common Mistakes

Using object property syntax on an array.

Omitting quotes around the key.

Shortcode attributes are arrays, so use square brackets with quotes to access values.

4fill in blank

hard

Fill both blanks to create a shortcode that returns a message with a default and user parameter.

Wordpress

function greet_function($atts) {
    $atts = shortcode_atts(array('[1]' => 'Guest'), $atts);
    return 'Welcome, ' . $atts['[2]'] . '!';
}

Drag options to blanks, or click blank then click option'

Aname

Buser

Cguest

Dvisitor

Attempts:

3 left

💡 Hint

Common Mistakes

Using different keys for default and access.

Using keys not defined in shortcode_atts.

Both blanks must use 'name' to match the default attribute and the accessed key.

5fill in blank

hard

Fill all three blanks to create a shortcode that returns a custom message with parameters 'name' and 'time'.

Wordpress

function greet_function($atts) {
    $atts = shortcode_atts(array('[1]' => 'Guest', '[2]' => 'day'), $atts);
    return 'Good ' . $atts['[2]'] . ', ' . $atts['[3]'] . '!';
}

Drag options to blanks, or click blank then click option'

Aname

Btime

Dday

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up keys between default and access.

Using inconsistent parameter names.

The first blank is the 'name' key, second is 'time', and third is 'name' to access the correct parameters.

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