Shortcodes with parameters in Wordpress

Introduction

Shortcodes let you add special content inside WordPress posts or pages easily. Using parameters makes them flexible so you can change what they show without changing the code.

You want to add a button with different colors on different pages.

You want to show a custom message that changes based on user input.

You want to embed a gallery but choose how many images to show each time.

You want to insert a styled box with different titles or backgrounds.

You want to reuse a piece of content but customize parts of it per use.

Syntax

Wordpress

[shortcode_name param1="value1" param2="value2"]

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

You can access these parameters in your PHP function to change output.

Examples

This shortcode creates a button with red color and large size.

Wordpress

[button color="red" size="large"]Click me[/button]

This shortcode shows a greeting message customized with the name 'Anna'.

Wordpress

[greeting name="Anna"]

This shortcode creates a box with a blue background and a title 'Welcome'.

Wordpress

[box title="Welcome" background="blue"]Content here[/box]

Sample Program

This code creates a shortcode named greet_user that takes a name parameter. If no name is given, it uses 'Guest'. It outputs a simple greeting message with the name.

You can add [greet_user name="Maria"] in your post to see: Hello, Maria! Welcome to our site.

Wordpress

<?php
// Register shortcode with parameters
function greet_user_shortcode($atts) {
    // Set default parameter values
    $atts = shortcode_atts(
        array(
            'name' => 'Guest'
        ), $atts, 'greet_user'
    );
    // Return greeting message
    return "<p>Hello, " . esc_html($atts['name']) . "! Welcome to our site.</p>";
}
add_shortcode('greet_user', 'greet_user_shortcode');

// Usage in WordPress post or page:
// [greet_user name="Maria"]
?>

Important Notes

Always use shortcode_atts() to set default values for parameters.

Escape output with esc_html() to keep your site safe from code injection.

Parameters are optional if you provide defaults, so shortcode works even without them.

Summary

Shortcodes with parameters let you customize content easily inside WordPress posts.

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

Use PHP functions with shortcode_atts() to handle parameters safely.

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