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.