Shortcodes

Barebones includes a shortcode functions file to store project-level shortcodes.

The default theme includes one shortcode: [button].

Shortcodes file

Shortcodes live in includes/shortcodes.php. The file is loaded from functions.php.

Add project-specific shortcodes here when they are genuinely needed.

PHP
require_once get_template_directory() . '/includes/shortcodes.php';

Button shortcode

The default button shortcode outputs a link styled with the .btn class.

PHP
add_shortcode( 'button', 'barebones_button_shortcode' );

Basic usage to output an anchor element using the default button class.

HTML
[button link="/contact/"]Contact us[/button]

Shortcode attributes

The button shortcode supports three values:

  • link: the link URL
  • class: optional CSS class; of no class is provided, it uses btn.
  • target: optional link target; if no target is provided, it uses _self.

Example using a btn--inverse class and target of _self.

HTML
[button link="/contact/" class="btn btn--inverse" target="_self"]Contact us[/button]

Current implementation

The shortcode callback reads attributes and returns an anchor tag.

PHP
function barebones_button_shortcode( $atts, $content = null ) {
    $atts['class'] = isset($atts['class']) ? $atts['class'] : 'btn';
    $atts['target'] = isset($atts['target']) ? $atts['target'] : '_self';

    return '<a class="' . $atts['class'] . '" href="' . $atts['link'] . '" target="'. $atts['target'] . '">' . $content . '</a>';
}

Adding shortcodes

Register new shortcodes with add_shortcode(). Prefix shortcode callback functions consistently to avoid collisions with plugins or WordPress core.

PHP
function barebones_example_shortcode( $atts, $content = null ) {
    return '<div class="example">' . esc_html( $content ) . '</div>';
}

add_shortcode( 'example', 'barebones_example_shortcode' );

When to use shortcodes

Shortcodes can be useful for small reusable snippets inside classic editor content, WYSIWYG fields, or legacy content.

For structured page sections, prefer custom blocks. Blocks provide a clearer editor interface, field definitions, previews, and better control over layout.