How to Add User-Friendly Shortcode UIs in WordPress Using Shortcake

As an experienced WordPress developer, I've often seen clients struggle with complex shortcodes that require multiple parameters. Shortcake, a powerful plugin, solves this by adding intuitive visual interfaces. In this step-by-step guide, we'll show you how to implement Shortcode UI in WordPress with Shortcake, making it accessible even for beginners.

What is Shortcake?

WordPress shortcodes let users embed dynamic functionality into posts and pages effortlessly. Themes and plugins often provide shortcodes for buttons, galleries, and more. However, parameters can make them tricky, like this button example:

[themebutton url="https://example.com" title="Download Now" color="purple" target="newwindow"]

Shortcake is a plugin (and proposed core feature) that provides a graphical UI for entering these values, simplifying usage dramatically.

Getting Started

This tutorial is ideal for developers new to WordPress customization or theme modification. Let's dive in.

First, install and activate the Shortcake (Shortcode UI) plugin from the WordPress repository.

Next, create a sample shortcode that accepts parameters. Add this to your theme's functions.php or a custom plugin:

add_shortcode( 'cta-button', 'cta_button_shortcode' );
function cta_button_shortcode( $atts ) {
    extract( shortcode_atts( array(
        'title' => 'Title',
        'url'   => '',
    ), $atts ) );
    return '<a href="' . esc_url( $url ) . '" class="cta-button">' . esc_html( $title ) . '</a>';
}

Add this CSS to your theme's stylesheet for styling:

.cta-button {
    padding: 10px;
    font-size: 18px;
    border: 1px solid #FFF;
    border-radius: 7px;
    color: #FFF;
    background-color: #50A7EC;
    display: inline-block;
    text-decoration: none;
}

Users would normally insert it like: [cta-button url="https://example.com"]

Now, let's add a UI for it.

Register Your Shortcode UI with Shortcake

Shortcake's API lets you define attributes, input types, and post types for your shortcode's UI. Add this code to your functions.php:

shortcode_ui_register_for_shortcode(
    'cta-button',
    array(
        'label'         => 'Add Button',
        'listItemImage' => 'dashicons-lightbulb',
        'attrs'         => array(
            array(
                'label'  => 'Title',
                'attr'   => 'title',
                'type'   => 'text',
                'description'  => 'Enter button text',
            ),
            array(
                'label'  => 'URL',
                'attr'   => 'url',
                'type'   => 'url',
                'description'  => 'Full URL',
            ),
        ),
        'post_type' => array( 'post', 'page' ),
    )
);

Edit a post, click "Add Media," and look for "Insert Post Element" in the sidebar. Select your button to see the UI in action.

Handling Shortcodes with Multiple Inputs

Let's enhance it with a color selector. Update the shortcode:

add_shortcode( 'mybutton', 'my_button_shortcode' );
function my_button_shortcode( $atts ) {
    extract( shortcode_atts( array(
        'color' => 'blue',
        'title' => 'Title',
        'url'   => '',
    ), $atts ) );
    return '<a href="' . esc_url( $url ) . '" class="mybutton ' . esc_attr( $color ) . '-button">' . esc_html( $title ) . '</a>';
}

Update CSS:

.mybutton {
    padding: 10px;
    font-size: 18px;
    border: 1px solid #FFF;
    border-radius: 7px;
    color: #FFF;
    display: inline-block;
    text-decoration: none;
}
.blue-button { background-color: #50A7EC; }
.orange-button { background-color: #FF7B00; }
.green-button { background-color: #29B577; }

Register the enhanced UI:

shortcode_ui_register_for_shortcode(
    'mybutton',
    array(
        'label'         => 'Add Colorful Button',
        'listItemImage' => 'dashicons-flag',
        'attrs'         => array(
            array(
                'label'       => 'Title',
                'attr'        => 'title',
                'type'        => 'text',
                'description' => 'Enter button text',
            ),
            array(
                'label'       => 'URL',
                'attr'        => 'url',
                'type'        => 'url',
                'description' => 'Full URL',
            ),
            array(
                'label'   => 'Color',
                'attr'    => 'color',
                'type'    => 'select',
                'options' => array(
                    'blue'   => 'Blue',
                    'orange' => 'Orange',
                    'green'  => 'Green',
                ),
            ),
        ),
        'post_type' => array( 'post', 'page' ),
    )
);

Test it in the post editor:

Download the full code as a plugin: wpb-shortcake-tutorial. It includes CSS—feel free to tweak fonts or colors.

We hope this guide empowers you to create seamless shortcode experiences. Check our 7 essential tips for using shortcodes in WordPress next.