Creating shortcodes in Wordpress - Visual Walkthrough

Concept Flow - Creating shortcodes

Define shortcode function

↓

Register shortcode with WordPress

↓

User adds shortcode in post/page

↓

WordPress finds shortcode

↓

Call shortcode function

↓

Return HTML output

↓

Display output in content

This flow shows how WordPress processes a shortcode: you define a function, register it, then WordPress replaces shortcode tags in content with your function's output.

Execution Sample

Wordpress

<?php
function greet_shortcode() {
  return "<p>Hello, friend!</p>";
}
add_shortcode('greet', 'greet_shortcode');
?>

Defines a shortcode [greet] that outputs a greeting paragraph when used in content.

Execution Table

Step	Action	Input	Output	Notes
1	Define function greet_shortcode	None	Function created	Function ready to return greeting HTML
2	Register shortcode 'greet'	Shortcode tag 'greet', function name	Shortcode registered	WordPress knows to call greet_shortcode for [greet]
3	User adds [greet] in post content	Content with [greet]	Content with shortcode tag	Shortcode tag present in content
4	WordPress parses content	Content with [greet]	Detect shortcode [greet]	Shortcode found in content
5	Call greet_shortcode()	No parameters	<p>Hello, friend!</p>	Function returns HTML string
6	Replace [greet] with output	Content with [greet]	Content with <p>Hello, friend!</p>	Shortcode replaced by HTML
7	Render final content	Content with HTML	Page shows greeting paragraph	User sees greeting on page

💡 Execution stops after shortcode is replaced and content is rendered.

Variable Tracker

Variable	Start	After Step 1	After Step 5	Final
greet_shortcode	undefined	function defined	function called	function remains defined
content	User post content	User post content	User post content	Content with <p>Hello, friend!</p> instead of [greet]

Key Moments - 2 Insights

Why does the shortcode function return a string instead of printing?

The shortcode function must return the output string so WordPress can insert it into the content. Printing would send output immediately and break content flow. See execution_table step 5.

What happens if the shortcode is not registered?

WordPress will leave the shortcode tag as plain text in the content because it doesn't know which function to call. See execution_table step 4 where shortcode detection fails.

Visual Quiz - 3 Questions

Look at the execution table, what is the output of greet_shortcode() at step 5?

A "[greet]"

B Nothing, it prints directly

C "<p>Hello, friend!</p>"

D An error message

💡 Hint

Check the Output column at step 5 in the execution_table.

At which step does WordPress replace the shortcode tag with HTML?

A Step 6

B Step 5

C Step 3

D Step 7

💡 Hint

Look for the step where content changes from having [greet] to having

Hello, friend!

.

If the shortcode function printed output instead of returning it, what would happen?

A The shortcode would still work fine

B Output might appear in wrong place breaking content layout

C WordPress would automatically fix it

D Shortcode tag would be removed but no output shown

💡 Hint

Refer to key_moments about why returning output is important.

Concept Snapshot

Creating shortcodes in WordPress:
- Define a PHP function that returns HTML as a string.
- Register it with add_shortcode('tag', 'function').
- Use [tag] in post/page content.
- WordPress replaces [tag] with function output when rendering.
- Always return output, do not print inside shortcode function.

Full Transcript

Creating shortcodes in WordPress involves defining a PHP function that returns the HTML you want to show. Then you register this function with WordPress using add_shortcode and a shortcode tag name. When a user adds this shortcode tag in a post or page, WordPress finds it during content rendering, calls your function, and replaces the shortcode tag with the returned HTML. This process ensures your custom content appears exactly where the shortcode is placed. Remember, the shortcode function must return the output string, not print it, so WordPress can insert it properly. If the shortcode is not registered, WordPress will leave the shortcode tag as plain text. This step-by-step flow helps beginners see how shortcodes work behind the scenes.