@salcode

Create Your First Shortcode

Sal Ferrarello / @salcode

WordPress Editor showing the letter of the day is N

WordPress Editor showing the letter of the day is O

DRY

  • Don't
  • Repeat
  • Yourself
Chart of How Much Time You Spend Over 5 years on routine tasks

Daily Website Update

5 minutes once per day

amount of time over 5 years

= 6 days

WordPress Editor showing the letter of the day shortcode

Define [letter_of_the_day]

add_shortcode(
	'letter_of_the_day',
	'fe_letter_of_the_day' );

function fe_letter_of_the_day() {
	return 'Q';
}

Rendered page showing Today's letter of the day is Q

Where Do I Put My Code?

  • functions.php
  • a custom plugin you write
  • mu-plugins directory

mu-plugins ?

/wp-content/mu-plugins/

Example

/wp-content/mu-plugins/letter-day.php

wp-content/mu-plugins/letter-day.php

add_shortcode(
	'letter_of_the_day',
	'fe_letter_of_the_day' );

function fe_letter_of_the_day() {
	return 'Q';
}

add_shortcode()

add_shortcode(
	$tag, // Name of the shortcode.
	$func // Function to generate shortcode output.
);

Never echo, always return

wp-content/mu-plugins/letter-day.php

add_shortcode(
	'letter_of_the_day',      // Tag
	'fe_letter_of_the_day' ); // Function

function fe_letter_of_the_day() {
	return 'Q';
}

Naming Shortcode Tips

  • lowercase-letters
  • No spaces
  • Use underscores instead of dashes
[btn_link]

wp-content/mu-plugins/btn-link.php

add_shortcode( 'btn_link', 'fe_btn_link');

function fe_btn_link() {
	return '<a href="https://salcode.com/"
        class="btn btn-primary">salcode</a>';
}
Rendered shortcode [btn_link]. A link that looks like a button.

Puzzle with a single missing piece

sprintf()

$result = sprintf(
	'Hello %s, have a great day.',

	'friend'
);

Value in $result

Hello friend, have a great day.

[btn_link]

sprintf(
	'<a href="https://salcode.com"
		class="btn btn-primary">%s</a>',

	'salcode'
);

[btn_link]

wp-content/mu-plugins/btn-link.php

add_shortcode( 'btn_link', 'fe_btn_link');

function fe_btn_link() {
	return sprintf(
		'<a href="https://salcode.com"
			class="btn btn-primary">%s</a>',

		'salcode'
	);
}
Rendered shortcode [btn_link]. A link that looks like a button.

Shortcode Function Parameters

  • $atts
  • $content
  • $tag
[btn_link]

wp-content/mu-plugins/btn-link.php

add_shortcode( 'btn_link', 'fe_btn_link');

function fe_btn_link($atts, $content = '', $tag) {
	return sprintf(
		'<a href="https://salcode.com"
			class="btn btn-primary">%s</a>',

		'salcode'
	);
}
Rendered shortcode [btn_link]. A link that looks like a button. 
[btn_link]Click me![/btn_link]

wp-content/mu-plugins/btn-link.php

add_shortcode( 'btn_link', 'fe_btn_link');

function fe_btn_link($atts, $content = '', $tag) {
	return sprintf(
		'<a href="https://salcode.com"
			class="btn btn-primary">%s</a>',

		$content
	);
}
Rendered shortcode [btn_link]. A link that looks like a button. 
[boot_alert]Great job![/boot_alert]

wp-content/mu-plugins/boot-alert.php

add_shortcode( 'boot_alert', 'fe_boot_alert' );
function fe_boot_alert($atts, $content='', $tag) {
  return sprintf(
    '<div class="alert alert-info"
      role="alert">%s</div>',

    $content
  );
}
Rendered shortcode [boot_alert]. A blue info alert box with the content from between our shortcodes. 
[anchor id="jump-to-middle"]

wp-content/mu-plugins/anchor.php

add_shortcode( 'anchor', 'fe_anchor' );
function fe_anchor($atts, $content='', $tag) {

	return sprintf( '<span id="%s"></span>',
		$atts['id']
	);
}

output

<span id="jump-to-middle"></span>

[anchor id="jump-to-middle"]

wp-content/mu-plugins/anchor.php

add_shortcode( 'anchor', 'fe_anchor' );
function fe_anchor($atts, $content='', $tag) {

	return sprintf( '<span id="%s"></span>',
		esc_attr( $atts['id'] )
	);
}

output

<span id="jump-to-middle"></span>

[anchor]

wp-content/mu-plugins/anchor.php

add_shortcode( 'anchor', 'fe_anchor' );
function fe_anchor($atts, $content='', $tag) {

	return sprintf( '<span id="%s"></span>',
		esc_attr( $atts['id'] )
	);
}

output

<span id=""></span>

shortcode_atts()

shortcode_atts(
	$defaults, // key/value array
	$atts,     // the $atts parameter
	$tag       // the shortcode name
);

# returns the $defaults and $atts merged together

[anchor]

wp-content/mu-plugins/anchor.php

function fe_anchor($atts, $content='', $tag) {

	$atts = shortcode_atts( array(
		'id' => 'fe-anchor-default-id',
	), $atts, $tag );

	return sprintf( '<span id="%s"></span>',
		esc_attr( $atts['id'] )
	);
}

[indexable]

function fe_indexable($atts, $content, $tag) {




    if ( get_option( 'blog_public' ) ) {
        return 'Indexable';
    }
    return 'Robots blocked';
}

[indexable yes="Green light" no="Red light"]

function fe_indexable($atts, $content, $tag) {




    if ( get_option( 'blog_public' ) ) {
        return esc_html( $atts['yes'] );
    }
    return esc_html( $atts['no'] );
}

[indexable]

function fe_indexable($atts, $content, $tag) {
    $atts = shortcode_atts( array(
        'yes' => 'Indexable',
        'no'  => 'Robots blocked',
    ), $atts, $tag);
    if ( get_option( 'blog_public' ) ) {
        return esc_html( $atts['yes'] );
    }
    return esc_html( $atts['no'] );
}

[indexable]

function fe_indexable($atts, $content, $tag) {
    $atts = shortcode_atts( array(
        'yes'=> __('Indexable', 'indexable'),
        'no' => __('Robots blocked', 'indexable'),
    ), $atts, $tag);
    if ( get_option( 'blog_public' ) ) {
        return esc_html( $atts['yes'] );
    }
    return esc_html( $atts['no'] );
}

Gutenberg

The new Gutenberg editor supports shortcodes

Shortcode in a Shortcode

[btn_link] [message] [/btn_link]

[btn_link] [message] [/btn_link]
Rendered shortcode [btn_link] with '[message]' as the content (i.e. the inner shortcode was NOT rendered).

wp-content/mu-plugins/btn-link.php

add_shortcode( 'btn_link', 'fe_btn_link');

function fe_btn_link($atts, $content = '', $tag) {
	return sprintf(
		'<a href="https://salcode.com"
			class="btn btn-primary">%s</a>',

		$content
	);
}

[btn_link] [message] [/btn_link]
Rendered shortcode [btn_link] with 'Please click' as the content (i.e. the inner shortcode WAS rendered).

wp-content/mu-plugins/btn-link.php

add_shortcode( 'btn_link', 'fe_btn_link');

function fe_btn_link($atts, $content = '', $tag) {
	return sprintf(
		'<a href="https://salcode.com"
			class="btn btn-primary">%s</a>',

		do_shortcode( $content )
	);
}

[letter_of_the_day]

[btn_link]Click me![/btn_link]

[anchor id="dicussion-details"]

Iron Code Studio

Sal Ferrarello

salcode.com/shortcode

@salcode

Credits