Creating shortcodes in Wordpress - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to register a shortcode named 'hello'.

Wordpress

<?php
function hello_shortcode() {
    return 'Hello, world!';
}
add_shortcode('[1]', 'hello_shortcode');

Drag options to blanks, or click blank then click option'

Ahello

Bgreet

Cworld

Dshortcode

Attempts:

3 left

💡 Hint

Common Mistakes

Using the function name instead of the shortcode name.

Forgetting to put the shortcode name as a string.

The add_shortcode function registers a shortcode with the given name. Here, the shortcode name is 'hello'.

2fill in blank

medium

Complete the code to return a dynamic message with the user's name passed as an attribute.

Wordpress

<?php
function greet_user_shortcode($atts) {
    $atts = shortcode_atts(['name' => 'Guest'], $atts);
    return 'Hello, ' . [1] . '!';
}
add_shortcode('greet_user', 'greet_user_shortcode');

Drag options to blanks, or click blank then click option'

A$atts['username']

B$atts['guest']

C$atts['name']

D$atts['user']

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong attribute key that does not exist.

Forgetting to use the $atts array.

The attribute array $atts contains the shortcode attributes. We use $atts['name'] to get the user's name or default to 'Guest'.

3fill in blank

hard

Fix the error in the shortcode function to properly handle attributes and return a message.

Wordpress

<?php
function welcome_shortcode([1]) {
    $atts = shortcode_atts(['user' => 'Visitor'], $atts);
    return 'Welcome, ' . $atts['user'] . '!';
}
add_shortcode('welcome', 'welcome_shortcode');

Drag options to blanks, or click blank then click option'

A$params

B$atts

C$args

D$attributes

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different parameter name but still referencing $atts inside.

Not defining any parameter to receive attributes.

The function parameter must be named $atts to match the variable used inside the function for attributes.

4fill in blank

hard

Fill both blanks to create a shortcode that outputs the current year dynamically.

Wordpress

<?php
function current_year_shortcode() {
    return date([1]);
}
add_shortcode([2], 'current_year_shortcode');

Drag options to blanks, or click blank then click option'

A'Y'

B'year'

C'current_year'

D'y'

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'y' which returns two-digit year.

Using a shortcode name that is not descriptive.

The PHP date function uses 'Y' to get the full year. The shortcode name is 'current_year' to be used in posts.

5fill in blank

hard

Fill all three blanks to create a shortcode that accepts a 'color' attribute and returns a colored text span.

Wordpress

<?php
function colored_text_shortcode([1]) {
    $atts = shortcode_atts(['color' => 'black', [2]], $atts);
    return '<span style="color: ' . $atts['color'] . ';">' . [3] . '</span>';
}
add_shortcode('colored_text', 'colored_text_shortcode');

Drag options to blanks, or click blank then click option'

A$atts

B'text' => 'Sample Text'

C$atts['text']

D'color' => 'blue'

Attempts:

3 left

💡 Hint

Common Mistakes

Not setting default text attribute.

Using wrong variable names inside the return statement.

The function receives $atts. The default attribute 'text' is set to 'Sample Text'. The returned span uses $atts['text'] to show the colored text.

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