Enclosing shortcodes in Wordpress - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to define an enclosing shortcode function in WordPress.

Wordpress

function my_shortcode_function($atts, $content = [1]) {
    return '<div>' . do_shortcode($content) . '</div>';
}

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

A''

Bfalse

Ctrue

Dnull

Attempts:

3 left

💡 Hint

Common Mistakes

Using null or false as default for content causes errors.

Omitting the content parameter disables enclosing shortcode functionality.

The content parameter for enclosing shortcodes should default to an empty string '' to capture the enclosed content.

2fill in blank

medium

Complete the code to register the enclosing shortcode named 'box'.

Wordpress

add_shortcode('[1]', 'my_shortcode_function');

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

Awrap

Bbox

Ccontainer

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different shortcode name than intended.

Forgetting to register the shortcode.

The shortcode tag name is 'box' as specified for the enclosing shortcode.

3fill in blank

hard

Fix the error in the shortcode function to correctly handle enclosed content.

Wordpress

function my_shortcode_function($atts, $content = '') {
    return '<p>' . [1]($content) . '</p>';
}

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

Ado_shortcode

Btrim

Chtmlspecialchars

Dstrip_tags

Attempts:

3 left

💡 Hint

Common Mistakes

Using strip_tags removes HTML but does not process shortcodes.

Using htmlspecialchars escapes HTML entities incorrectly.

Use do_shortcode to process any nested shortcodes inside the enclosed content.

4fill in blank

hard

Fill both blanks to create an enclosing shortcode that wraps content in a div with a class.

Wordpress

function my_shortcode_function($atts, $content = '') {
    $atts = shortcode_atts(array('class' => '[1]'), $atts);
    return '<div class="' . $atts['class'] . '">' . [2]($content) . '</div>';
}

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

Amy-box

Bdo_shortcode

Cstrip_tags

Dcontent-box

Attempts:

3 left

💡 Hint

Common Mistakes

Using strip_tags instead of do_shortcode.

Using an empty or incorrect default class.

The default class is 'my-box' and do_shortcode processes the enclosed content.

5fill in blank

hard

Fill all three blanks to create a shortcode that wraps content in a section with a dynamic id and processes nested shortcodes.

Wordpress

function my_shortcode_function($atts, $content = '') {
    $atts = shortcode_atts(array('id' => '[1]'), $atts);
    $id = sanitize_html_class($atts['id']);
    return '<section id="' . $id . '">' . [2]([3]) . '</section>';
}

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

A$content

Bdo_shortcode

Cstrip_tags

Ddefault-section

Attempts:

3 left

💡 Hint

Common Mistakes

Not sanitizing the id attribute.

Using strip_tags instead of do_shortcode.

Using wrong variable names.

The default id is 'default-section', do_shortcode processes the content, and the content variable is $content.

Practice

1. What is the main purpose of enclosing shortcodes in WordPress?

easy

A. To wrap content between opening and closing tags for styling or features

B. To insert images directly without any content

C. To create standalone buttons without content

D. To add metadata to posts without visible output

Solution

1. Step 1: Understand shortcode types

   Enclosing shortcodes wrap content between opening and closing tags, unlike self-closing shortcodes.

2. Step 2: Identify purpose of enclosing shortcodes

   They add styles or features around the wrapped content, enhancing appearance or functionality.

3. Final Answer:

   To wrap content between opening and closing tags for styling or features -> Option A

4. Quick Check:

   Enclosing shortcodes wrap content = D [OK]

Hint: Enclosing shortcodes always have opening and closing tags [OK]

Common Mistakes:

• Confusing enclosing with self-closing shortcodes
• Thinking shortcodes only insert images or buttons
• Ignoring the content wrapped inside shortcodes

2. Which of the following is the correct syntax for an enclosing shortcode named box with content inside?

easy

A. [box]Content here[/box]

B. [box /]

C. [box]Content here

D. box[Content here]box

Solution

1. Step 1: Recall enclosing shortcode syntax

   Enclosing shortcodes use opening and closing tags with square brackets, e.g., [box]...[/box].

2. Step 2: Match syntax with options

   [box]Content here[/box] correctly shows [box]Content here[/box]. Other options are either self-closing or invalid.

3. Final Answer:

   [box]Content here[/box] -> Option A

4. Quick Check:

   Enclosing shortcode syntax = A [OK]

Hint: Enclosing shortcodes always have matching opening and closing tags [OK]

Common Mistakes:

• Using self-closing syntax for enclosing shortcodes
• Omitting closing tag
• Incorrect bracket placement

3. Given the shortcode [highlight color="yellow"]Important text[/highlight], what will be the expected behavior?

medium

A. The text will be bold but not colored

B. The shortcode will display as plain text on the page

C. The text 'Important text' will be highlighted in yellow

D. An error will occur because attributes are not allowed

Solution

1. Step 1: Analyze shortcode with attribute

   The shortcode uses an attribute color="yellow" to customize appearance.

2. Step 2: Understand enclosing shortcode effect

   The content inside is wrapped and styled according to the attribute, so text is highlighted yellow.

3. Final Answer:

   The text 'Important text' will be highlighted in yellow -> Option C

4. Quick Check:

   Attributes customize enclosing shortcode output = C [OK]

Hint: Attributes inside shortcodes customize their behavior [OK]

Common Mistakes:

• Assuming attributes cause errors
• Thinking shortcode outputs raw text
• Ignoring the effect of attributes on content

4. Identify the error in this shortcode usage: [frame]Content here[frame]

medium

A. Attributes are missing in the shortcode

B. Missing closing tag should be [/frame]

C. Shortcode name should be capitalized

D. Content cannot be inside enclosing shortcodes

Solution

1. Step 1: Check shortcode closing tag

   The closing tag must have a slash: [/frame], not [frame].

2. Step 2: Confirm correct syntax

   Without the slash, WordPress treats it as an opening tag, causing errors or unexpected output.

3. Final Answer:

   Missing closing tag should be [/frame] -> Option B

4. Quick Check:

   Closing tag requires slash = B [OK]

Hint: Closing shortcode tags always start with a slash [/tag] [OK]

Common Mistakes:

• Omitting the slash in closing tag
• Thinking attributes are mandatory
• Assuming shortcode names must be capitalized

5. You want to create a shortcode [alert type="error"] that wraps content and shows it with a red background. Which is the best way to write the enclosing shortcode usage?

hard

A. [alert type="error"]Warning!

B. [alert type="error" /]Warning!

C. [alert]Warning![/alert type="error"]

D. [alert type="error"]Warning![/alert]

Solution

1. Step 1: Confirm enclosing shortcode syntax with attributes

   The opening tag includes attributes inside square brackets, e.g., [alert type="error"].

2. Step 2: Verify matching closing tag

   The closing tag must be [/alert] exactly, no attributes allowed there.

3. Step 3: Evaluate options

   [alert type="error"]Warning![/alert] correctly uses [alert type="error"]Warning![/alert]. [alert type="error" /]Warning! is self-closing and incorrect for enclosing content. [alert]Warning![/alert type="error"] misplaces attribute in closing tag. [alert type="error"]Warning! has incorrect closing tag syntax.

4. Final Answer:

   [alert type="error"]Warning![/alert] -> Option D

5. Quick Check:

   Attributes in opening tag, proper closing tag = A [OK]

Hint: Attributes go in opening tag; closing tag has no attributes [OK]

Common Mistakes:

• Using self-closing syntax for enclosing shortcodes
• Placing attributes in closing tag
• Incorrect closing tag format