Create a Simple Shortcode with Attributes in WordPress

Create a reusable shortcode that accepts attributes. This pattern is the foundation for any custom shortcode in WordPress. For more on WordPress hooks.

function savvy_button_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'url'   => '#',
        'text'  => 'Click Here',
        'color' => 'blue',
    ), $atts, 'savvy_button' );

    return sprintf(
        '<a href="%s" class="savvy-btn savvy-btn-%s">%s</a>',
        esc_url( $atts['url'] ),
        esc_attr( $atts['color'] ),
        esc_html( $atts['text'] )
    );
}

add_shortcode( 'savvy_button', 'savvy_button_shortcode' );

Add to functions.php. Usage: [savvy_button url="/contact/" text="Contact Us" color="gold"].

Discussion
[  0 Comments  ]

Leave a Comment

To add code, use the buttons below. For instance, click the PHP button to insert PHP code within the shortcode. If you notice any typos, please let us know!