What is a WordPress shortcode?
A shortcode is a bracketed tag such as [acme_button url="/pricing"] that editors place in post content, widgets or the Shortcode block. When the page renders, WordPress finds the tag and replaces it with the HTML returned by a PHP callback registered with add_shortcode(). Shortcodes come in two forms: self-closing ([tag attr="value"]) and enclosing ([tag]content[/tag]), where the callback also receives the wrapped content.
A good shortcode callback does four things: merges the user’s attributes with defaults through shortcode_atts() (passing the tag as the third argument so other code can filter them with shortcode_atts_{$tag}), sanitises each value according to its type, escapes everything at output, and returns the HTML. Echoing inside a shortcode prints the markup at the top of the content instead of where the tag was placed — one of the most common shortcode bugs.
This generator writes that boilerplate for you. Define attributes with a type, write the HTML template with placeholders, and it outputs WordPress-Coding-Standards PHP with the right escaping function for each placeholder’s context — esc_url() inside href/src, esc_attr() in other attributes, esc_html() in text and wp_kses_post() for enclosed content.
How to use the WordPress Shortcode Generator
- Start from a preset or enter a prefixed tag (e.g.
acme_alert), your function prefix and text domain, then choose self-closing or enclosing. - Add attributes with a default value and a type. The type decides sanitisation: text, URL, integer, boolean or a single CSS class.
- Write the HTML template using
{name}placeholders,{content}for enclosed content and{name?html}for markup that should appear only when an attribute is set. - Pick functions.php or a standalone plugin file, then copy or download the PHP. Use the generated examples to place the shortcode in a post or call it from a template.
Example
A self-closing button shortcode with a conditional attribute:
[acme_button url="https://example.com/pricing" label="See pricing" new_tab="true"]
// Template
<a class="acme-button" href="{url}"{new_tab? target="_blank" rel="noopener noreferrer"}>{label}</a>
// Generated return value
return '<a class="acme-button" href="' . esc_url( $atts['url'] ) . '"' . ( $atts['new_tab'] ? ' target="_blank" rel="noopener noreferrer"' : '' ) . '>' . esc_html( $atts['label'] ) . '</a>';Shortcode best practices
- Prefix the tag and function names (
acme_) — a plugin registering the same tag later silently replaces yours. - Avoid hyphens in tags. When one tag is the beginning of another (
[box]and[box-title]) the parser can match the wrong one; underscores are safe. - Attribute names are lowercased by WordPress, so
[acme_box Title="x"]arrives astitle. Keep names lowercase. - Boolean attributes arrive as strings:
"false"is truthy in PHP.filter_var( $value, FILTER_VALIDATE_BOOLEAN )turns"false","0"and"no"intofalse. - Load CSS or JavaScript only when the shortcode is used by calling
wp_enqueue_style()/wp_enqueue_script()inside the callback on a pre-registered handle. - For content you want in the block editor, consider a block (or block pattern) instead — shortcodes are still fully supported and are ideal for reusable snippets inside classic content, widgets and page builders.
Frequently Asked Questions
Why does my shortcode output appear at the top of the post?
The callback is echoing instead of returning. Shortcode callbacks must return a string. If you prefer writing HTML with inline PHP, wrap it in ob_start() and return ob_get_clean(); — enable Use output buffering to generate that pattern.
How do I use a shortcode in a theme template?
Use echo do_shortcode( '[acme_alert]' );. It is faster and clearer to call the render function directly with an array of attributes, which the generator also shows.
Can shortcodes be nested?
Yes, if the outer shortcode runs do_shortcode() on its $content. Nesting the same tag inside itself is not supported by the WordPress parser — use a different tag for the inner shortcode.
Where should I put the shortcode code?
In a small site-specific plugin if the shortcode is used in content — content outlives themes, and a shortcode registered in a theme stops working (showing the raw tag) after a theme switch. Use the child theme’s functions.php only for theme-specific output. The functions.php snippet generator can build a site plugin with other useful snippets.
Why are stray <p> and <br> tags added around my enclosing shortcode?
In classic content wpautop runs at priority 10 and shortcodes at priority 11, so line breaks between [tag] and [/tag] are turned into paragraphs first. Keep short content on one line, or strip the orphaned tags in the callback, e.g. $content = preg_replace( '#^</p>|<p>$#', '', trim( $content ) );.