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 a freelance WordPress developer and a contributing developer to the Genesis framework. For the past 14 years he has worked with attorneys, publishers, corporations, and non-profits, building custom websites tailored to their needs and goals.

Ready to upgrade your website?

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

Let's Talk