Creating a simple shortcode button
In this tutorial I create simple button shortcode with three attributes:
- url
- target
- background
Put this code in your functions.php file
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
function btn_big_shortcode( $atts, $content = null ){ $args = shortcode_atts( array( 'url' => '', 'target' => 'self', 'background' => '#F39D77', ), $atts ); $out = '<div class="btn-big"> <a style="background:'. esc_attr( $args['background'] ) .'" target='. esc_attr( $args['target'] ) .' href='. esc_attr( $args['url'] ) .'> '. do_shortcode( wp_kses_post( $content ) ) .' </a> </div>'; return $out; } add_shortcode('btn_big', 'btn_big_shortcode'); |
By the same principle, you can add attributes to an array and display them in a shortcode.
Now set the CSS styles for the button
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
.btn-big a { display: inline-block; font: bold 20px sans-serif; color: #fff; border-radius: 3px; padding: 10px 40px; margin-bottom: 15px; text-align: center; text-decoration: none; } .btn-big a:hover{ text-decoration: none; } |
The button is ready, to output it add this shortcode in text editor:
[btn_big url="http://keksus.com/"]Sample button[/btn_big]
Only change the link to the one you need.
If you want open link in a new window, add the attribute target="_blank" to shortcode:
[btn_big url="http://keksus.com/" target="_blank"]Sample button[/btn_big]
If you want change button background color, add the attribute background="#000" to shortcode:
[btn_big url="http://keksus.com/" target="_blank" background="#000"]Sample button[/btn_big]
Demo
