search ]

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"].

Join the 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!

Savvy WordPress Development official logo