Shortcodes with parameters in Wordpress - Step-by-Step Execution

Concept Flow - Shortcodes with parameters

User adds shortcode with parameters

↓

WordPress parses shortcode

↓

Extract parameters from shortcode

↓

Pass parameters to shortcode handler function

↓

Handler processes parameters and returns output

↓

WordPress replaces shortcode with output in content

WordPress reads the shortcode with parameters, extracts them, runs the handler function with these parameters, and replaces the shortcode with the returned output.

Execution Sample

Wordpress

[greet name="Alice" times="2"]

function greet_shortcode($atts) {
  $atts = shortcode_atts(['name' => 'Guest', 'times' => 1], $atts);
  return str_repeat("Hello, {$atts['name']}! ", (int)$atts['times']);
}
add_shortcode('greet', 'greet_shortcode');

This shortcode outputs a greeting repeated a number of times based on parameters.

Execution Table

Step	Action	Parameters Extracted	Handler Output	Content Replacement
1	WordPress finds shortcode [greet name="Alice" times="2"]	name="Alice", times="2"
2	Pass parameters to greet_shortcode function	name="Alice", times="2"
3	Inside greet_shortcode: set defaults and merge	name="Alice", times="2"	name='Alice', times='2'
4	Generate output by repeating greeting	name='Alice', times='2'	Hello, Alice! Hello, Alice!
5	Replace shortcode in content with output			Hello, Alice! Hello, Alice!

💡 Shortcode replaced with generated greeting output, processing complete.

Variable Tracker

Variable	Start	After Step 3	After Step 4	Final
$atts	[]	{"name":"Alice","times":"2"}	{"name":"Alice","times":"2"}	{"name":"Alice","times":"2"}
Output	""	""	"Hello, Alice! Hello, Alice! "	"Hello, Alice! Hello, Alice! "

Key Moments - 2 Insights

Why do we use shortcode_atts inside the handler function?

shortcode_atts sets default values and merges them with user parameters, ensuring all expected parameters exist. See Step 3 in execution_table.

What happens if the user omits a parameter like 'times'?

The default value from shortcode_atts is used, so 'times' defaults to 1. This prevents errors and ensures output is generated. Refer to variable_tracker for defaults.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'times' after Step 3?

A 2

B "2"

C 1

D undefined

💡 Hint

Check the Parameters Extracted and Handler Output columns at Step 3.

At which step does WordPress replace the shortcode with the output?

A Step 2

B Step 3

C Step 5

D Step 4

💡 Hint

Look at the Content Replacement column in the execution_table.

If the shortcode was [greet], what would be the output?

A Hello, Guest!

B Hello, !

C Hello, Guest! Hello, Guest!

D No output

💡 Hint

Refer to key_moments about default parameters and variable_tracker for defaults.

Concept Snapshot

Shortcodes with parameters let users add dynamic content.
Syntax: [shortcode param1="value1" param2="value2"]
Use shortcode_atts() in handler to set defaults.
Handler receives parameters as array.
Return string replaces shortcode in content.
Parameters are strings; cast if needed.

Full Transcript

In WordPress, shortcodes can have parameters inside square brackets. When WordPress finds a shortcode with parameters, it extracts them as strings. These parameters are passed to a handler function registered with add_shortcode. Inside the handler, shortcode_atts merges user parameters with defaults to ensure all expected keys exist. The handler then processes these parameters and returns a string. WordPress replaces the shortcode in the post content with this returned string. For example, a shortcode [greet name="Alice" times="2"] calls a function that repeats a greeting twice. If parameters are missing, defaults are used. This process allows dynamic, customizable content insertion in posts and pages.

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