WordPress Shortcode Generator

Generate secure WordPress shortcode PHP with typed attributes, automatic escaping, enclosing content and usage examples.

Runs in your browser

Shortcode

Presets:

Lowercase letters, digits and underscores. Prefix it to avoid clashes with plugins.

Prefixes the PHP function names.

Shortcode type

Attributes

Text → sanitize_text_field + esc_html/esc_attr · URL → esc_url · Integer → absint · Boolean → FILTER_VALIDATE_BOOLEAN · CSS class → sanitize_html_class (one class).

Output template

Use {name} for an attribute, {content} for the enclosed content and {name?html} to output HTML only when an attribute is set or true. Escaping is chosen automatically: esc_url in href/src, esc_attr in other attributes, esc_html in text, wp_kses_post for content.

Keeps the template as readable HTML with inline PHP. Best for long markup.

Allows other shortcodes inside this one, e.g. a button inside an alert.

Wraps text default values in __() with your text domain.

Output format

Where will the code go?

Untick when pasting below existing code in functions.php.

PHP code

<?php
/**
 * [acme_alert] shortcode — paste into your (child) theme's functions.php.
 */

/**
 * Registers the [acme_alert] shortcode.
 */
function acme_register_alert_shortcode() {
	add_shortcode( 'acme_alert', 'acme_alert_shortcode' );
}
add_action( 'init', 'acme_register_alert_shortcode' );

/**
 * Renders the [acme_alert] shortcode.
 *
 * Usage: [acme_alert type="info" title="Heads up"]Your content[/acme_alert]
 *
 * @param array|string $atts    Shortcode attributes, or an empty string when none are used.
 * @param string|null  $content Content between the opening and closing tags.
 * @param string       $tag     The shortcode tag, passed to shortcode_atts() for filtering.
 * @return string Shortcode HTML. Shortcodes must return output, never echo it.
 */
function acme_alert_shortcode( $atts, $content = null, $tag = 'acme_alert' ) {
	$atts = shortcode_atts(
		array(
			'type'  => 'info',
			'title' => __( 'Heads up', 'acme' ),
		),
		$atts,
		$tag
	);

	$atts['type']  = sanitize_html_class( $atts['type'] );
	$atts['title'] = sanitize_text_field( $atts['title'] );

	$content = do_shortcode( (string) $content );

	$html  = '<div class="acme-alert acme-alert--' . esc_attr( $atts['type'] ) . '" role="note">';
	$html .= '<strong class="acme-alert__title">' . esc_html( $atts['title'] ) . '</strong>';
	$html .= '<div class="acme-alert__body">' . wp_kses_post( $content ) . '</div>';
	$html .= '</div>';

	return $html;
}

Use it in a post or block

[acme_alert type="info" title="Heads up"]Your content[/acme_alert]

Use it in a theme template

<?php
// In a theme template: run the shortcode through the parser.
echo do_shortcode( '[acme_alert type="info" title="Heads up"]Your content[/acme_alert]' );

// Faster alternative: call the render function directly (no regex parsing).
echo acme_alert_shortcode( array( 'type' => 'info', 'title' => 'Heads up' ), 'Your content' );
?>

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

  1. 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.
  2. Add attributes with a default value and a type. The type decides sanitisation: text, URL, integer, boolean or a single CSS class.
  3. 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.
  4. 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 as title. Keep names lowercase.
  • Boolean attributes arrive as strings: "false" is truthy in PHP. filter_var( $value, FILTER_VALIDATE_BOOLEAN ) turns "false", "0" and "no" into false.
  • 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 ) );.