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.

https://d3vv6lp55qjaqc.cloudfront.net/items/2O3B451t2L1P0j1B2R22/Screen%20Recording%202018-12-21%20at%2009.18%20AM.mov
<?php
/**
* Shortcodes
*
* @package CoreFunctionality
* @author Bill Erickson
* @since 1.0.0
* @license GPL-2.0+
**/
/**
* 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' );
view raw shortcodes.php hosted with ❤ by GitHub

shortcake shortcode ui

Ready to upgrade your website?

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

Let's Talk