Shortcode UI Examples

Shortcode UI provides a visual interface for creating and editing shortcodes in your content area. It also renders the shortcode output in the content area.

I don’t use shortcodes much anymore now that WordPress 5.0 is out with the new block-based content editor. Instead, I build custom blocks using Advanced Custom Fields.

But if you are working on an older site built with shortcodes and decide to disable the block editor, Shortcode UI is a great tool to make the classic editor more block-based and easier to manage.

Here are some shortcodes I built for a site recently, along with their Shortcode UI registration code. For more information, see the documentation and this sample dev plugin.

/**
 * Video Player Shortcode
 *
 */
function ea_video_player_shortcode( $atts = array() ) {

	$atts = shortcode_atts( array(
		'title' => false,
		'url'   => false,
	), $atts, 'video_player' );

	$video = wp_oembed_get( esc_url_raw( $atts['url'] ) );

	$output = '<div class="video-player" id="video-player" itemprop="video" itemscope itemtype="http://schema.org/VideoObject">';
	if( !empty( $atts['title'] ) )
		$output .= '<h3>' . esc_html( $atts['title'] ) . '</h3>';
	if( ! is_admin() )
		$output .= $video;
	$output .= '</div>';

	return $output;
}
add_shortcode( 'video_player', 'ea_video_player_shortcode' );

/**
 * Video Player Shortcode UI
 *
 */
function ea_video_player_shortcode_ui() {

	$fields = array(
		array(
			'label' => 'Title',
			'attr'  => 'title',
			'type'  => 'text',
		),
		array(
			'label' => 'Video URL',
			'attr'  => 'url',
			'type'  => 'url',
		)
	);

	$shortcode_ui_args = array(
		'label' => 'Video Player',
		'listItemImage' => 'dashicons-video-alt3',
		'attrs' => $fields,
	);

	shortcode_ui_register_for_shortcode( 'video_player', $shortcode_ui_args );
}
add_action( 'register_shortcode_ui', 'ea_video_player_shortcode_ui' );

/**
 * Subscribe Shortcode
 *
 */
function ea_subscribe_shortcode( $atts = array() ) {

	if( ! defined( 'EA_SUBSCRIBE_FORM' ) || ! function_exists( 'wpforms_display' ) )
		return;

	// Don't display to logged in users on frontend - show in backend editor
	if( is_user_logged_in() && ! is_admin() )
		return;

	ob_start();
	wpforms_display( EA_SUBSCRIBE_FORM, true, true );
	$form = ob_get_clean();

	if( is_admin() ) {
		$output = '<div class="subscribe-box admin"><h3>Subscribe</h3></div>';
	} else {
		$output = '<div class="subscribe-box">' . $form . '</div>';
	}

	return $output;
}
add_shortcode( 'subscribe', 'ea_subscribe_shortcode' );

/**
 * Subscribe Shortcode UI
 *
 */
function ea_subscribe_shortcode_ui() {

	$shortcode_ui_args = array(
		'label' => 'Subscribe',
		'listItemImage' => 'dashicons-email',
		'attrs' => array(),
	);

	shortcode_ui_register_for_shortcode( 'subscribe', $shortcode_ui_args );

}
add_action( 'register_shortcode_ui', 'ea_subscribe_shortcode_ui' );

/**
 * Pin This shortcode
 *
 */
function ea_pin_this_shortcode( $atts = array() ) {

	if( ! function_exists( 'shared_counts' ) )
		return;

	$output = '<div class="pin-this">';
	$output .= '<h3 class="section-title">Pin This</h3>';
	$output .= '<p class="description">Like this recipe? Save it to your Pinterest board now!</p>';
	if( ! is_admin() )
		$output .= shared_counts()->front->link( 'pinterest', $id = get_the_ID(), $echo = false, $style = 'big' );
	$output .= '</div>';
	return $output;
}
add_shortcode( 'pin_this', 'ea_pin_this_shortcode' );

/**
 * Pin This Shortcode UI
 *
 */
function ea_pin_this_shortcode_ui() {

	$shortcode_ui_args = array(
		'label' => 'Pin This',
		'listItemImage' => 'dashicons-admin-post',
		'attrs' => array(),
	);

	shortcode_ui_register_for_shortcode( 'pin_this', $shortcode_ui_args );

}
add_action( 'register_shortcode_ui', 'ea_pin_this_shortcode_ui' );

/**
 * Like This shortcode
 *
 */
function ea_like_this_shortcode( $atts = array() ) {

	if( ! function_exists( 'shared_counts' ) )
		return;

	$output = '<div class="like-this">';
	$output .= '<h3 class="section-title">Like This</h3>';
	$output .= '<p class="description">Like this recipe? Then Like us on Facebook!</p>';
	if( ! is_admin() )
		//$output .= shared_counts()->front->link( 'facebook_likes', 'https://www.facebook.com/DinnerthenDessert', $echo = false, $style = 'big' );
		$output .= '<div class="fb-like" data-href="https://www.facebook.com/DinnerthenDessert" data-layout="button" data-action="like" data-size="large" data-show-faces="true" data-share="false"></div>';
	$output .= '</div>';
	return $output;
}
add_shortcode( 'like_this', 'ea_like_this_shortcode' );

/**
 * Facebook SDK for Like This
 *
 */
function ea_facebook_sdk_for_like_this() {
	global $post;
	if( apply_filters( 'ea_add_facebook_sdk', true ) && is_single() && has_shortcode( $post->post_content, 'like_this' ) ) {
		?>
<div id="fb-root"></div>
<script>(function(d, s, id) {
  var js, fjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  js = d.createElement(s); js.id = id;
  js.src = 'https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.0&appId=117708458321419';
  fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
		<?php
	}
}
add_action( 'tha_body_top', 'ea_facebook_sdk_for_like_this' );

/**
 * Like This Shortcode UI
 *
 */
function ea_like_this_shortcode_ui() {

	$shortcode_ui_args = array(
		'label' => 'Like This',
		'listItemImage' => 'dashicons-thumbs-up',
		'attrs' => array(),
	);

	shortcode_ui_register_for_shortcode( 'like_this', $shortcode_ui_args );

}
add_action( 'register_shortcode_ui', 'ea_like_this_shortcode_ui' );

/**
 * Read More Shortcode
 *
 */
function ea_read_more_shortcode( $atts = array() ) {
	$output = '<div class="read-more">';
	$output .= '<h3 class="section-title">Read More</h3>';
	$output .= '<p>Like this recipe? You’ll like these, too!</p>';

	$total_posts = ea_read_more_shortcode_post_count();
	$posts = array();
	for( $i = 1; $i <= $total_posts; $i++ ) {
		$title = !empty( $atts['post_' . $i . '_title'] ) ? esc_html( $atts['post_' . $i . '_title'] ) : '';
		$url = !empty( $atts['post_' . $i . '_url'] ) ? esc_url_raw( $atts['post_' . $i . '_url'] ) : '';
		if( $title && $url )
			$posts[] = '<li><a href="' . $url . '">' . $title . '</a></li>';
	}

	if( !empty( $posts ) )
		$output .= '<ul>' . join( PHP_EOL, $posts ) . '</ul>';

	$output .= '</div>';
	return $output;
}
add_shortcode( 'read_more', 'ea_read_more_shortcode' );

/**
 * Read More, post count
 *
 */
function ea_read_more_shortcode_post_count() {
	return 5;
}

/**
 * Read More Shortcode UI
 *
 */
function ea_read_more_shortcode_ui() {

	$total_posts = ea_read_more_shortcode_post_count();
	$fields = array();

	for( $i = 1; $i <= $total_posts; $i++ ) {

		$fields[] = array(
			'label' => 'Post ' . $i . ' Title',
			'attr'  => 'post_' . $i . '_title',
			'type'  => 'text',
		);

		$fields[] = array(
			'label' => 'Post ' . $i . ' URL',
			'attr'  => 'post_' . $i . '_url',
			'type'  => 'text',
		);
	}

	$shortcode_ui_args = array(
		'label' => 'Read More',
		'listItemImage' => 'dashicons-networking',
		'attrs' => $fields,
	);

	shortcode_ui_register_for_shortcode( 'read_more', $shortcode_ui_args );

}
add_action( 'register_shortcode_ui', 'ea_read_more_shortcode_ui' );

/**
 * Save Recipes Shortcode
 *
 */
function ea_save_recipes_shortcode() {

	// Don't display to logged in users on frontend - show in backend editor
	if( is_user_logged_in() && ! is_admin() )
		return;

	// Don't show if save recipes form not defined in theme
	if( ! defined( 'EA_SAVE_RECIPES_FORM' ) )
		return;

	ob_start();
	wpforms_display( EA_SAVE_RECIPES_FORM, true, true );
	$form = ob_get_clean();

	if( is_admin() ) {
		$output = '<div class="save-recipes admin"><h3>Save Recipes</h3></div>';
	} else {
		$output = '<div class="save-recipes">' . $form . '</div>';
	}

	return $output;

}
add_shortcode( 'save_recipes', 'ea_save_recipes_shortcode' );

/**
 * Save Recipes Shortcode UI
 *
 */
function ea_save_recipes_shortcode_ui() {

	$shortcode_ui_args = array(
		'label' => 'Save Recipes',
		'listItemImage' => 'dashicons-carrot',
		'attrs' => array(),
	);

	shortcode_ui_register_for_shortcode( 'save_recipes', $shortcode_ui_args );

}
add_action( 'register_shortcode_ui', 'ea_save_recipes_shortcode_ui' );

Bill Erickson

Bill Erickson is the co-founder and lead developer at CultivateWP, a WordPress agency focusing on high performance sites for web publishers.

About Me
Ready to upgrade your website?

I build custom WordPress websites that look great and are easy to manage.

Let's Talk