Shortcode UI Button Example

shortcode_ui.php

<?php

/**
 * If Shortcake isn't active, then add an administration notice.
 */
add_action('init', function () {
    if (! function_exists('shortcode_ui_register_for_shortcode')) {
        add_action('admin_notices', 'shortcake_notices');
    }
});

/**
 * Display an administration notice if the user can activate plugins.
 */
function shortcake_notices()
{
    if (current_user_can('activate_plugins')) {
        ?>
        <div class="error message">
            <p><?php esc_html_e('Shortcode UI plugin must be active.', 'sage'); ?></p>
        </div>
        <?php
    }
}

/*
 * 1. Register the shortcodes.
 */
add_action('init', function () {
    add_shortcode('button', 'btn_shortcode');
});

/*
 * 2. Register the Shortcode UI setup for the shortcodes.
 */
add_action('register_shortcode_ui', function () {
    $fields = array(
        array(
            'label' => esc_html__('Button text', 'sage'),
            'attr'  => 'text',
            'type'  => 'text',
            'meta'  => array(
                'placeholder' => esc_html__('Button text', 'sage'),
            ),
        ),
        array(
            'label'    => esc_html__('Page link', 'sage'),
            'description' => esc_html__('Use for links on this website.', 'sage'),
            'attr'     => 'int_link',
            'type'     => 'post_select',
            'query'    => array('post_type' => array('page', 'post')),
            'multiple' => false,
        ),
        array(
            'label'  => esc_html__('External link', 'sage'),
            'description' => esc_html__('Use for external links. (No page link must be set)', 'sage'),
            'attr'   => 'ext_link',
            'type'   => 'url',
            'encode' => false,
            'meta'   => array(
                'placeholder' => 'https://',
                'data-test'   => 1,
            ),
        ),
        array(
            'label'   => esc_html__('Alignment', 'sage'),
            'attr'    => 'alignment',
            'type'    => 'select',
            'options' => array(
                array('value' => 'd-inline-block', 'label' => esc_html__('Left', 'sage')),
                array('value' => 'd-table mx-auto', 'label' => esc_html__('Center', 'sage')),
                array('value' => 'd-table ml-auto', 'label' => esc_html__('Right', 'sage')),
                array('value' => 'btn-block', 'label' => esc_html__('Block', 'sage')),
            ),
        ),
        array(
            'label'   => esc_html__('Size', 'sage'),
            'attr'    => 'size',
            'type'    => 'select',
            'options' => array(
                array('value' => 'btn-sm', 'label' => esc_html__('Small', 'sage')),
                array('value' => '', 'label' => esc_html__('Normal', 'sage')),
                array('value' => 'btn-lg', 'label' => esc_html__('Large', 'sage')),
            ),
        ),
        array(
            'label'   => esc_html__('Color', 'sage'),
            'attr'    => 'color',
            'type'    => 'select',
            'options' => array(
                array('value' => 'btn-primary', 'label' => esc_html__('Color 1', 'sage')),
                array('value' => 'btn-outline-primary', 'label' => esc_html__('Color 1 outline', 'sage')),
                array('value' => 'btn-secondary', 'label' => esc_html__('Color 2', 'sage')),
                array('value' => 'btn-outline-secondary', 'label' => esc_html__('Color 2 outline', 'sage')),
                array('value' => 'btn-light', 'label' => esc_html__('Light', 'sage')),
                array('value' => 'btn-outline-light', 'label' => esc_html__('Light outline', 'sage')),
                array('value' => 'btn-link', 'label' => esc_html__('Link', 'sage')),
            ),
        ),
        array(
            'label'       => esc_html__('Open in a new tab', 'sage'),
            'description' => esc_html__('Useful for external links', 'sage'),
            'attr'        => 'target',
            'type'        => 'checkbox',
            'options'     => array(
                array('value' => '_blank', 'label' => esc_html__('Open in a new tab', 'sage')),
            ),
        ),
    );

    /*
    * Define the Shortcode UI arguments.
    */
    $shortcode_ui_args = array(
        'label' => esc_html__('Button', 'sage'),
        'listItemImage' => 'dashicons-editor-removeformatting',
        'attrs' => $fields,
    );
    shortcode_ui_register_for_shortcode('button', $shortcode_ui_args);
});

/*
 * 3. Define the callback for the button shortcodes.
 */
function btn_shortcode($attr, $content, $shortcode_tag)
{
    $attr = shortcode_atts(
        array(
            'text'      => '',
            'int_link'  => '',
            'ext_link'  => '',
            'alignment' => '',
            'size'      => '',
            'color'     => '',
            'target'    => '',
        ),
        $attr,
        $shortcode_tag
    );
    
    $text      = (!empty($attr['text'])) ? $attr['text'] : '';
    $alignment = (!empty($attr['alignment'])) ? ' ' . $attr['alignment'] : '';
    $int_link  = (!empty($attr['int_link'])) ? $attr['int_link'] : '';
    $ext_link  = (!empty($attr['ext_link'])) ? $attr['ext_link'] : '';
    $link      = (!empty($int_link)) ? get_permalink($int_link) : $ext_link;
    $size      = (!empty($attr['size'])) ? ' ' . $attr['size'] : '';
    $color     = (!empty($attr['color'])) ? ' ' . $attr['color'] : 'btn-primary';
    $target    = (!empty($attr['target'])) ? ' target="_blank"' : '';

    ob_start();
    ?>
    <a href="<?= $link ?>" class="btn<?= $color . $size . $alignment ?>"<?= $target ?>><?= $text ?></a>
    <?php
    return ob_get_clean();
}