Enclosing shortcodes in Wordpress - Step-by-Step Execution

Concept Flow - Enclosing shortcodes

Start parsing shortcode

↓

Detect opening shortcode

↓

Check if shortcode is enclosing

↓

Parse content

↓

Detect closing shortcode

↓

Return combined output

↓

End

The parser detects an opening shortcode, checks if it encloses content, processes the content if yes, then finds the closing shortcode before returning the full output.

Execution Sample

Wordpress

[box]Hello World[/box]

This shortcode encloses the text 'Hello World' inside a box shortcode.

Execution Table

Step	Action	Detected Text	State	Output
1	Start parsing		Waiting for shortcode
2	Detect opening shortcode	[box]	Opening shortcode found
3	Check if enclosing	No self-closing slash	Enclosing shortcode confirmed
4	Parse content	Hello World	Content captured
5	Detect closing shortcode	[/box]	Closing shortcode found
6	Combine output	Wrap content in box HTML	Output ready	<div class="box">Hello World</div>
7	End parsing		Parsing complete	<div class="box">Hello World</div>

💡 Parsing ends after closing shortcode is found and output is combined.

Variable Tracker

Variable	Start	After Step 2	After Step 4	After Step 6	Final
shortcode_tag		box	box	box	box
content			Hello World	Hello World	Hello World
output				<div class="box">Hello World</div>	<div class="box">Hello World</div>

Key Moments - 2 Insights

Why do we need to detect a closing shortcode?

Because enclosing shortcodes wrap content, the parser must find the closing shortcode (see Step 5) to know where the content ends and to combine the output correctly.

What happens if the shortcode is self-closing?

If the shortcode has a self-closing slash (like [box /]), the parser treats it as a single tag without content and skips content parsing (see Step 3).

Visual Quiz - 3 Questions

Look at the execution table, what is the 'content' variable after Step 4?

A "[/box]"

B "[box]"

C "Hello World"

D "<div class=\"box\">Hello World</div>"

💡 Hint

Check the 'content' variable in variable_tracker after Step 4.

At which step does the parser confirm the shortcode is enclosing?

A Step 3

B Step 2

C Step 5

D Step 6

💡 Hint

Look at the 'State' column in execution_table for the step confirming enclosing shortcode.

If the shortcode was self-closing, which step would be skipped?

A Step 2

B Step 4

C Step 3

D Step 5

💡 Hint

Refer to the key moment about self-closing shortcodes and Step 3 in execution_table.

Concept Snapshot

Enclosing shortcodes wrap content between opening and closing tags.
Syntax: [shortcode]content[/shortcode]
Parser detects opening tag, captures content, then finds closing tag.
Output combines content wrapped in HTML.
Self-closing shortcodes skip content parsing.

Full Transcript

Enclosing shortcodes in WordPress start with an opening tag like [box] and end with a closing tag like [/box]. The parser first detects the opening shortcode, then checks if it encloses content by looking for a closing tag. If it does, it captures all content between the tags. Once the closing shortcode is found, the parser combines the content wrapped in the appropriate HTML output. If the shortcode is self-closing, it does not enclose content and is processed immediately. This process ensures that content inside shortcodes is handled correctly and displayed as intended.