miguelramosfdz / shortcake

Shortcake makes using WordPress shortcodes a piece of cake.

Shortcake

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:

• Usage
• Examples
• Screenshots
• Known Issues

Usage

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/>
			<cite><em><?php echo esc_html( $attr['source'] ); ?></em></cite>
		</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',
				),
			),
		)
	);

} );

Install the demo plugin using this snippet

Examples

• Per Søderlind @soderlind uses Shortcake to insert charts and tables. See the screencast

Screenshots

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":

Known issues

• 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.