WordPress Shortcode and Shortcode API

A shortcode is a small tag in square brackets, like , which WordPress replaces with some content when the page is shown. Plugins use shortcodes to add forms, sliders and buttons into a post. You can make your own with the Shortcode API.

Write your first shortcode

Use add_shortcode(). The function must return the output, not echo it:

function tc_year_shortcode() {
	return gmdate( 'Y' );
}
add_shortcode( 'year', 'tc_year_shortcode' );

echo do_shortcode( 'Copyright [year] Tutorials Class' );

Shortcode with attributes

Use shortcode_atts() to set default values for the attributes:

function tc_button_shortcode( $atts ) {
	$a = shortcode_atts( array(
		'url'   => '#',
		'label' => 'Click here',
		'color' => 'blue',
	), $atts, 'button' );

	return '<a class="btn btn-' . esc_attr( $a['color'] ) . '" href="' . esc_url( $a['url'] ) . '">' . esc_html( $a['label'] ) . '</a>';
}
add_shortcode( 'button', 'tc_button_shortcode' );

echo do_shortcode( '[button]' ) . "\n";
echo do_shortcode( '[button url="https://example.com/buy" label="Buy now" color="green"]' );

Shortcode with enclosed content

A shortcode can have an opening and a closing tag. The text between them comes as the second parameter:

function tc_box_shortcode( $atts, $content = null ) {
	$a = shortcode_atts( array( 'title' => 'Note' ), $atts );
	return '<div class="box"><strong>' . esc_html( $a['title'] ) . '</strong><p>' . do_shortcode( $content ) . '</p></div>';
}
add_shortcode( 'box', 'tc_box_shortcode' );
add_shortcode( 'year', function () { return gmdate( 'Y' ); } );

echo do_shortcode( '[box title="Tip"]Save your work often. This year is [year].[/box]' );

Notice that we call do_shortcode( $content ) inside, to allow other shortcodes in the content (the [year] inside the box works because we added that shortcode too).

Rules of a good shortcode

• Return the HTML, never echo it. An echo prints at the wrong place on the page.
• If you need a lot of HTML, use output buffering: ob_start(); … return ob_get_clean();.
• Escape every attribute you print (esc_attr, esc_url, esc_html), because editors can type anything.
• Attribute names are always small letters.
• Use a prefix for the name (like tc_button) so you do not clash with plugins.

Use a shortcode on a page

Write the shortcode in a paragraph or in the Shortcode block of the editor. In a theme file you can call it with do_shortcode():

<?php echo do_shortcode( '[button url="/contact/" label="Contact us"]' ); ?>

Block editor note

In the block editor, shortcodes still work. For new work you can also build a custom block, but the Shortcode API is simpler and is used by thousands of plugins. Remember that a plugin which is deactivated leaves the raw [tag] text in your posts.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.