Creating shortcodes in Wordpress - Quick Revision & Summary

Recall & Review

beginner

What is a shortcode in WordPress?

A shortcode is a small piece of code in square brackets that you can add to posts or pages to insert dynamic content easily without writing full code.

beginner

How do you register a shortcode in WordPress?

You use the add_shortcode() function, giving it a name and a callback function that returns the content to display.

beginner

What does the callback function for a shortcode do?

It runs when the shortcode is used and returns the content that replaces the shortcode in the post or page.

intermediate

How can you pass attributes to a shortcode?

You define parameters in the callback function and use the shortcode_atts() function to set default values and get user input.

intermediate

Why should shortcode output be returned, not echoed?

Because WordPress expects the shortcode function to return content as a string to insert it properly, echoing can break page layout or cause errors.

Which function registers a shortcode in WordPress?

A shortcode_init()

B register_shortcode()

C add_shortcode()

D create_shortcode()

The correct function to register a shortcode is add_shortcode().

What should a shortcode callback function do?

A Echo the content directly

B Return the content as a string

C Print HTML tags only

D Save data to the database

Shortcode callbacks must return content as a string, not echo it.

How do you provide default attribute values in a shortcode?

A Using shortcode_atts()

B Using get_attributes()

C Using set_defaults()

D Using default_atts()

shortcode_atts() merges user attributes with defaults.

Where do you place shortcode tags in WordPress?

A In theme functions.php only

B In the wp-config.php file

C In the WordPress admin dashboard settings

D Inside posts or pages content

Shortcodes are placed inside post or page content to display dynamic content.

What does [gallery] represent in WordPress?

A A shortcode to display image galleries

B A CSS class for styling

C A JavaScript function

D A PHP variable

[gallery] is a built-in shortcode to show image galleries.

Explain how to create a simple shortcode in WordPress that outputs 'Hello, friend!'

Think about the function that connects shortcode name to output.

Describe how to add attributes to a shortcode and use them inside the callback function.

Attributes let users customize shortcode output.

Practice

1. What is the main purpose of creating a shortcode in WordPress?

easy

A. To manage user roles and permissions

B. To create a new theme for the website

C. To add custom CSS styles to the site

D. To insert reusable content or functionality using a simple tag

Solution

1. Step 1: Understand shortcode purpose

   Shortcodes allow users to add reusable content or features easily inside posts or pages.

2. Step 2: Compare with other options

   Creating themes, adding CSS, or managing users are unrelated to shortcodes.

3. Final Answer:

   To insert reusable content or functionality using a simple tag -> Option D

4. Quick Check:

   Shortcodes = reusable content tags [OK]

Hint: Shortcodes add reusable content with simple tags [OK]

Common Mistakes:

• Confusing shortcodes with themes or CSS
• Thinking shortcodes manage users
• Assuming shortcodes are for styling only

2. Which of the following is the correct way to register a shortcode named hello in WordPress?

easy

A. register_shortcode('hello', 'hello_function');

B. add_shortcode('hello_function', 'hello');

C. add_shortcode('hello', 'hello_function');

D. register_shortcode('hello_function', 'hello');

Solution

1. Step 1: Recall shortcode registration syntax

   The correct function is add_shortcode with first argument as shortcode tag, second as callback function.

2. Step 2: Match correct argument order

   add_shortcode('hello', 'hello_function'); uses add_shortcode('hello', 'hello_function'), which is correct syntax.

3. Final Answer:

   add_shortcode('hello', 'hello_function'); -> Option C

4. Quick Check:

   add_shortcode(tag, callback) = correct [OK]

Hint: Use add_shortcode('tag', 'function') to register [OK]

Common Mistakes:

• Using register_shortcode instead of add_shortcode
• Swapping the order of arguments
• Passing function name as first argument

3. Given this shortcode function:

function greet_shortcode($atts) {
  $name = $atts['name'] ?? 'Guest';
  return "Hello, $name!";
}
add_shortcode('greet', 'greet_shortcode');

What will be the output of [greet name="Alice"] in a post?

medium

A. Hello, !

B. Hello, Alice!

C. [greet name="Alice"]

D. Hello, Guest!

Solution

1. Step 1: Analyze shortcode attributes

   The function checks if 'name' attribute exists; if yes, uses it; else defaults to 'Guest'.

2. Step 2: Apply given shortcode with name="Alice"

   The attribute 'name' is 'Alice', so output is "Hello, Alice!".

3. Final Answer:

   Hello, Alice! -> Option B

4. Quick Check:

   Attribute 'name' passed = output uses it [OK]

Hint: Attributes override defaults in shortcode functions [OK]

Common Mistakes:

• Ignoring attributes and using default always
• Outputting shortcode tag instead of processed text
• Missing attribute check causing errors

4. Identify the error in this shortcode registration code:

function my_shortcode() {
  return 'Welcome!';
}
add_shortcode(my_shortcode, 'welcome');

medium

A. The function name should be a string in add_shortcode

B. The function must echo output, not return

C. The shortcode tag and callback function arguments are swapped

D. Shortcode functions cannot have parameters

Solution

1. Step 1: Check add_shortcode argument order and types

   The first argument must be the shortcode tag as a string, and the second argument must be the callback function name as a string.

2. Step 2: Identify incorrect argument usage

   The code uses add_shortcode(my_shortcode, 'welcome') where my_shortcode is not quoted, so it's treated as a constant or variable, causing an error. Also, the arguments are swapped.

3. Step 3: Correct usage

   The correct call should be add_shortcode('welcome', 'my_shortcode'); with both arguments as strings and in correct order.

4. Final Answer:

   The function name should be a string in add_shortcode -> Option A

5. Quick Check:

   add_shortcode('tag', 'function') correct order and string types [OK]

Hint: First argument is shortcode tag string, second is function name string [OK]

Common Mistakes:

• Swapping shortcode tag and function arguments
• Not quoting function name as string
• Expecting shortcode function to echo instead of return

5. You want to create a shortcode [box color="blue"]Content[/box] that wraps the content in a colored div. Which of these functions correctly implements this?

hard

A. function box_shortcode($atts, $content = null) {
$color = $atts['color'] ?? 'red';
return "$content";
}
add_shortcode('box', 'box_shortcode');

B. function box_shortcode($content, $atts = null) {
$color = $atts['color'] ?? 'red';
return "$content";
}
add_shortcode('box', 'box_shortcode');

C. function box_shortcode($atts) {
$color = $atts['color'] ?? 'red';
return "$content";
}
add_shortcode('box', 'box_shortcode');

D. function box_shortcode() {
return "Content";
}
add_shortcode('box', 'box_shortcode');

Solution

1. Step 1: Check function parameters for shortcode with content

   Shortcode functions that handle enclosed content must accept two parameters: $atts and $content (default null).

2. Step 2: Verify attribute handling and output

   function box_shortcode($atts, $content = null) { $color = $atts['color'] ?? 'red'; return "
   $content"; } add_shortcode('box', 'box_shortcode'); correctly uses $atts['color'] with default, and returns a div with inline style wrapping $content.

3. Final Answer:

   Function with ($atts, $content=null) and returns colored div wrapping content -> Option A

4. Quick Check:

   Shortcode with content needs $content param [OK]

Hint: Use ($atts, $content=null) to access content inside shortcode [OK]

Common Mistakes:

• Swapping $atts and $content parameters
• Not setting default null for $content
• Ignoring content parameter and hardcoding output