Shortcode

How Does Shortcode Work?

Shortcodes were introduced in WordPress 2.5 as a way for plugin and theme developers to let users embed complex content without writing HTML. When WordPress processes post content, it parses the text for registered shortcodes using the do_shortcode() function. When a match is found, it calls the associated PHP callback function, which returns an HTML string that replaces the shortcode in the output.

A shortcode can be self-closing ([widget]) or wrap content ([widget]...some content...[/widget]). It can accept attributes ([widget id="123" color="blue"]) that the callback function receives as an associative array. The returned HTML is inserted directly into the page output, inheriting the page's CSS cascade.

Outside WordPress, the term "shortcode" is sometimes used loosely to mean any brief embed placeholder — Squarespace, Webflow, and other CMSs have their own equivalents (often called "embed blocks" or "custom code blocks"). The concept is the same: a simple text token that expands into rich content at render time.

<?php
// Registering a custom shortcode in WordPress (functions.php or plugin)
function widgetjar_shortcode($atts) {
  $attrs = shortcode_atts([
    'id'    => '',
    'width' => '100%',
  ], $atts);

  if (empty($attrs['id'])) {
    return '<!-- WidgetJar: missing id attribute -->';
  }

  $workspace_id = esc_attr($attrs['id']);
  $width        = esc_attr($attrs['width']);

  return sprintf(
    '<div style="width:%s"><script src="https://cdn.widgetjar.com/embed.js" data-w-id="%s" defer></script></div>',
    $width,
    $workspace_id
  );
}
add_shortcode('widgetjar', 'widgetjar_shortcode');

// Usage in WordPress post content:
// [widgetjar id="wsp_abc123" width="100%"]

Why Use Shortcode?

Why shortcodes are popular: Shortcodes provide non-technical users a simple interface for embedding complex content. A content editor can type [video id="xyz"] without knowing any HTML. They are especially powerful when combined with attributes for customization and when the shortcode dynamically fetches current data at render time.

Drawbacks of shortcodes: Shortcodes are platform-specific — a WordPress shortcode does not work on Webflow or Squarespace. They create content lock-in: if you deactivate the shortcode plugin, your posts display the raw [shortcode] text. They are server-rendered, making them harder to update in real time without a page refresh. For performance, shortcodes that make database queries on every page load can also slow your site.

Related Terms