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.