Shortcodes are commonplace in WordPress themes, plugins and even WordPress core. Whether you are a new developer looking to implement a shortcode for the first time, or are a seasoned pro; come join us as we delve into the pros, cons, gotchas, best practices and creative approaches to shortcodes.

1. Shortcodes In-Depth
Micah Wood
@wpscholarhttps://wpscholar.com/wcn2016

2. What is a shortcode?

3. Text

4. A text shortcut

5. A text shortcut
dynamically replaced

6. A text shortcut
dynamically replaced
with content

7. A text shortcut
dynamically replaced
with content
on render.

8. Built-In WordPress Shortcodes
• [embed] – Allows you to embed various types of content into your posts
and pages.
• [caption] – Allows you to wrap captions around content (like images).
• [gallery] – Allows you to add one or more image galleries.
• [audio] – Allows you to embed audio files within an HTML5 audio player.
• [video] – Allows you to embed video files within an HTML 5 video player.

9. WordPress.com / JetPack
https://en.support.wordpress.com/shortcodes/

10. Shortcode Syntax

11. Basic Shortcode
[shortcode]

12. Shortcode with Attributes
[shortcode attribute=“value”]

13. Shortcode with Content
[shortcode]content[/shortcode]

14. Compound Shortcode
[shortcode attribute=“value”]content[/shortcode]

15. Escaped Shortcode
[[shortcode]]

16. When should I use shortcodes?

17. When Embedding
Objects or iFrames

18. When Code is Required

19. Complex HTML Markup

20. Shortcode Example Use Cases
• Inject AdWords conversion tracking code on a page
• Insert a Google Map
• Insert a widget into the content of a page
• Create a footnote
• Display a random image

21. Where can I use shortcodes?

22. Content Editor
[shortcode]

23. Theme Templates
<?php echo do_shortcode(‘[shortcode]’); ?>

24. Excerpts
<?php add_filter( 'the_excerpt', 'do_shortcode'); ?>

25. Text Widgets
<?php add_filter( ‘widget_text', 'do_shortcode'); ?>

26. Comments
<?php add_filter( ‘comment_text', 'do_shortcode'); ?>

27. Anywhere They Are Enabled
<?php echo do_shortcode($content); ?>

28. How do I create a shortcode?

29. Register the Shortcode
<?php add_shortcode(‘shortcode’, ‘callback’); ?>

30. Create the Callback
<?php
function callback( $atts = [], $content = null, $tag = '' ) {
return $content;
}
add_shortcode( 'shortcode', 'callback' );
?>

31. Setup Attributes
<?php
function callback( $atts = [], $content = null, $tag = '' ) {
$defaults = array( 'id' => 0 );
$atts = shortcode_atts( $defaults, $atts, $tag );
return $content;
}
add_shortcode( 'shortcode', 'callback' );
?>

32. Ensure Attributes are Lowercase
<?php
function callback( $atts = [], $content = null, $tag = '' ) {
$defaults = array( 'id' => 0 );
$atts = array_change_key_case( $atts, CASE_LOWER );
$atts = shortcode_atts( $defaults, $atts, $tag );
return $content;
}
add_shortcode( 'shortcode', 'callback' );
?>

33. Do Custom Stuff
<?php
function callback( $atts = [], $content = null, $tag = '' ) {
$defaults = array( 'id' => 0 );
$atts = array_change_key_case( $atts, CASE_LOWER );
$atts = shortcode_atts( $defaults, $atts, $tag );
if ( $atts['id'] ) {
$post = get_post( $atts['id'] );
if ( $post ) {
$content = '<a href="' . esc_url( get_permalink( $post->ID ) ) . '">' . $content . '</a>';
}
}
return $content;
}
add_shortcode( 'shortcode', 'callback' );
?>

34. Allow for Nested Shortcodes
<?php
function callback( $atts = [], $content = null, $tag = '' ) {
$defaults = array( 'id' => 0 );
$atts = array_change_key_case( $atts, CASE_LOWER );
$atts = shortcode_atts( $defaults, $atts, $tag );
if ( $atts['id'] ) {
$post = get_post( $atts['id'] );
if ( $post ) {
$content = '<a href="' . esc_url( get_permalink( $post->ID ) ) . '">' . $content . '</a>';
}
}
$content = do_shortcode( $content );
return $content;
}
add_shortcode( 'shortcode', 'callback' );
?>

35. Why doesn’t my shortcode work?

36. Return, Don’t Echo

37. Shortcode Names Can’t Use
Reserved Characters:
& / < > [ ] =

38. Shortcode Nesting is up to the Author

39. Can’t Nest Shortcodes with the Same Name

40. Can’t Mix Enclosing and Non-Enclosing
Shortcodes with the Same Name

41. Best Practices

42. Provide Detailed Documentation

43. Display Helpful Messages

44. Prefix Shortcode Names

45. Sanitize Input, Escape Output

46. Avoid Side Effects

47. Shortcode API

48. add_shortcode()
Registers a new shortcode

49. do_shortcode()
Processes all shortcodes in the content

50. remove_shortcode()
Disables a specific shortcode

51. remove_all_shortcodes()
Disables all shortcodes

52. has_shortcode()
Checks if a shortcode exists in the content

53. shortcode_exists()
Checks if a specific shortcode has been registered

54. shortcode_atts()
Combines default and provided shortcode attributes

55. Advanced Topics

56. Shortcodes in Plugins vs. Themes

57. What is Wrong with This?
<?php echo do_shortcode(‘[shortcode]’); ?>

58. What is Wrong with This?
<?php shortcode_callback( $atts, $content ); ?>

59. The Traditional Approach
<?php
if( function_exists( 'shortcode_callback' ) ) {
shortcode_callback( $atts, $content );
}
?>

60. The Modern Approach
<?php do_action( 'shortcode', $atts, $content ); ?>

61. Implementing the Modern Approach
<?php
add_shortcode('shortcode', 'shortcode_callback');
function shortcode_render( $atts = array(), $content = '' ) {
echo shortcode_callback( $atts, $content );
}
add_action( 'shortcode', 'shortcode_render', 10, 2 );
?>

62. Shortcode Resources
• Plugin Handbook - Shortcodes
• WordPress Codex – Shortcodes
• WordPress Codex – Shortcode API
• Smashing Magazine – WordPress Shortcodes: A Complete Guide
• Generate WP – Shortcode Generator
• Shortcake Plugin (Shortcode UI)
• Digging into WordPress – Call a Widget with a Shortcode

63. Questions?

64. Shortcodes In-Depth
Micah Wood
@wpscholarhttps://wpscholar.com/wcn2016