Shortcodes with parameters in Wordpress - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a shortcode in WordPress?

A shortcode is a simple code wrapped in square brackets that you can add to posts or pages to insert dynamic content without writing full code.

beginner

How do parameters work in WordPress shortcodes?

Parameters let you customize the shortcode output by passing extra information inside the shortcode, like [gallery size="medium"].

beginner

Example: What does this shortcode do? [button color="red" size="large"]Click me[/button]

It creates a button with red color and large size. The parameters 'color' and 'size' change how the button looks.

intermediate

How do you define a shortcode with parameters in PHP?

You create a function that accepts attributes as an array, use shortcode_atts() to set defaults, then register it with add_shortcode().

intermediate

Why use shortcode_atts() in shortcode functions?

It sets default values for parameters and merges them with user input, so your shortcode always has valid data to work with.

What symbol wraps a WordPress shortcode?

A Curly braces {}

B Square brackets []

C Parentheses ()

D Angle brackets <>

Shortcodes are always wrapped in square brackets like [shortcode].

How do you pass parameters to a shortcode?

A Inside the shortcode like [shortcode param="value"]

B As a separate PHP file

C Using HTML attributes

D By editing the WordPress core

Parameters go inside the shortcode tag as key="value" pairs.

Which function helps set default parameter values in shortcode functions?

A get_shortcode_defaults()

B add_shortcode()

C shortcode_atts()

D register_shortcode()

shortcode_atts() merges user parameters with defaults.

What does add_shortcode() do?

A Registers a shortcode and links it to a function

B Adds a new WordPress plugin

C Creates a new post

D Deletes a shortcode

add_shortcode() tells WordPress what function to run for a shortcode.

If a shortcode has [button color="blue"], what is 'color'?

A A WordPress theme

B The shortcode name

C A PHP function

D A parameter that customizes the shortcode

'color' is a parameter passed to the shortcode to change its output.

Explain how to create a WordPress shortcode that accepts parameters and uses default values.

Think about how to handle missing parameters and connect the shortcode name to the function.

Describe how parameters inside a shortcode affect its behavior and give a simple example.

Imagine changing the color or size of a button using 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