Shortcake makes WordPress shortcodes a piece of cake.
Used alongside add_shortcode, Shortcake supplies a user-friendly interface for adding a shortcode to a post, and viewing and editing it from within the content editor.
See:
add_action( 'init', function() {
/**
* Register your shortcode as you would normally.
* This is a simple example for a pullquote with a citation.
*/
add_shortcode( 'pullquote', function( $attr, $content = '' ) {
$attr = wp_parse_args( $attr, array(
'source' => ''
) );
ob_start();
?>
<section class="pullquote">
<?php echo esc_html( $content ); ?><br/>
<?php if ( ! empty( $attr['source'] ) ) : ?>
<cite><em><?php echo esc_html( $attr['source'] ); ?></em></cite>
<?php endif; ?>
</section>
<?php
return ob_get_clean();
} );
/**
* Register a UI for the Shortcode.
* Pass the shortcode tag (string)
* and an array or args.
*/
shortcode_ui_register_for_shortcode(
'pullquote',
array(
// Display label. String. Required.
'label' => 'Pullquote',
// Icon/image for shortcode. Optional. src or dashicons-$icon. Defaults to carrot.
'listItemImage' => 'dashicons-editor-quote',
// Available shortcode attributes and default values. Required. Array.
// Attribute model expects 'attr', 'type' and 'label'
// Supported field types: text, checkbox, textarea, radio, select, email, url, number, and date.
'attrs' => array(
array(
'label' => 'Quote',
'attr' => 'content',
'type' => 'textarea',
),
array(
'label' => 'Cite',
'attr' => 'source',
'type' => 'text',
'placeholder' => 'Firstname Lastname',
'description' => 'Optional',
),
),
)
);
} );Install the demo plugin using this snippet
- Per Søderlind @soderlind uses Shortcake to insert charts and tables. See the screencast
Take a look at this demo of Fusion's pullquote shortcode.
Without Shortcake, shortcodes have a minimal UI:
But with Shortcake, TinyMCE will render the shortcode in a TinyMCE view:
And add a user-friendly UI to edit shortcode content and attributes:
Add new shortcodes to your post through "Add Media":
- You cannot use camelcase or hyphens in attribute names.
- If your shortcode output is not a block level element, it may display oddly in the TinyMCE editor.