Skip to content

Setup: shortcode

Justin Sternberg edited this page Mar 19, 2016 · 8 revisions

Your file must extend WDS_Shortcodes

The main shortcode file is what determines the output of your shortcode.

Required Items

Methods

  • shortcode() - Note: The html you return in shortcode() will be run through 'the_content' filter, so make sure you do not have any line breaks in your markup, or you may see additional paragraph tags around your shortcode markup.

Properties

  • $shortcode - A string, the shortcode tag.
  • $atts_defaults - A key/value paired array of defaults.

Basic Example

/**
 * The Shortcode Tag
 * @var string
 */
public $shortcode = 'yourshortcode';

/**
 * Default attributes applied to the shortcode.
 * @var array
 */
public $atts_defaults = array(
	'extra_class'      => 'large',
	'background_color' => '#bada55',
);

/**
 * Shortcode Output
 */
public function shortcode() {

	// Get our extra_class attribute
	$extra_class = sanitize_html_class( $this->att( 'extra_class' ) );
	$style = '';

	// Get/check our background_color attribute
	if ( $this->att( 'background_color' ) ) {
		$bg_color = sanitize_text_field( $this->att( 'background_color' ) );
		$style = ' style="background-color: ' . $bg_color . '"';
	}

	$output = '<div class="yourshortcode-test ' . $extra_class . '"' . $style . '>';
	// Uncomment if you have a closable shortcode (e.g. [yourshortcode]content[/yourshortcode])
	// $output .= $this->content();
	$output .= '</div>';

	return $output;
}

NOTE: This should be inside of your shortcode class.

There are plenty of methods you can override for this specific shortcode as well.

Clone this wiki locally