In this tutorial I create simple button shortcode with\u00a0three attributes:<\/p>\n
Put this code in your functions.php file
\n
function btn_big_shortcode( $atts, $content = null ){\r\n\t$args = shortcode_atts( array(\r\n\t\t'url' => '',\r\n\t\t'target' => 'self',\r\n\t\t'background' => '#F39D77',\r\n\t), $atts );\r\n\t$out = '<div class=\"btn-big\">\r\n\t\t\t\t<a style=\"background:'. esc_attr( $args['background'] ) .'\" target='. esc_attr( $args['target'] ) .' href='. esc_attr( $args['url'] ) .'>\r\n\t\t\t\t'. do_shortcode( wp_kses_post( $content ) ) .'\r\n\t\t\t\t<\/a>\r\n\t\t\t<\/div>';\r\n\treturn $out;\r\n}\r\nadd_shortcode('btn_big', 'btn_big_shortcode');<\/pre>\nBy the same principle, you can add attributes to an array and display them in a shortcode.<\/p>\n
Now set the CSS styles for the button
\n
\n\t\t\t\tCSS<\/strong>\n\t\t\t<\/div><\/p>\n.btn-big a {\r\n display: inline-block;\r\n font: bold 20px sans-serif;\r\n color: #fff;\r\n border-radius: 3px;\r\n padding: 10px 40px;\r\n margin-bottom: 15px;\r\n text-align: center;\r\n text-decoration: none;\r\n}\r\n.btn-big a:hover{\r\n text-decoration: none;\r\n}<\/pre>\nThe button is ready, to output it add this shortcode in text editor:<\/p>\n
[btn_big url=\"http:\/\/keksus.com\/\"]Sample button[\/btn_big]<\/p><\/blockquote>\n
Only change the link to the one you need.
\nIf you want open link in a new window, add the attribute target=\"_blank\" to shortcode:<\/p>\n
[btn_big url=\"http:\/\/keksus.com\/\" target=\"_blank\"]Sample button[\/btn_big]<\/p><\/blockquote>\n
If you want change button background color, add the attribute background=\"#000\" to shortcode:<\/p>\n
[btn_big url=\"http:\/\/keksus.com\/\" target=\"_blank\" background=\"#000\"]Sample button[\/btn_big]<\/p><\/blockquote>\n
Demo<\/h2>\n