Create Shortcodes for Color Buttons With Links

Bootstrap buttons are great, but for some reasons they don’t accept links. This is how I create color buttons with link using shortcodes.

  • Create the color button in css.

bblack,bblue,bgreen,bred, a {text-style:italic;font-size:17px;font-weight:500;color:#fff}bblack span,bblue span,bgreen span,bred span{padding:5px 13px;border-radius:5px}bblack span{background-color:#080808}bblue span{background-color:#1A447A}bred span{background-color:#930700}bgreen span{background-color:#004928}

  • Shortcodes by create btn_shortcodes.php.

<?php
add_shortcode( ‘blue’, ‘title_s’ );
function title_s($atts, $content = null) {
extract(shortcode_atts(array(
‘blue’ => ”,
), $atts));

return ‘<bblue><span>’.$content.'</span></bblue>’ ; }

add_shortcode( ‘red’, ‘title_r’ );
function title_r($atts, $content = null) {
extract(shortcode_atts(array(
‘red’ => ”,
), $atts));

return ‘<bred><span>’.$content.'</span></bred>’ ; }

add_shortcode( ‘green’, ‘title_g’ );
function title_g($atts, $content = null) {
extract(shortcode_atts(array(
‘green’ => ”,
), $atts));

return ‘<bgreen><span>’.$content.'</span></bgreen>’ ; }

add_shortcode( ‘black’, ‘title_b’ );
function title_b($atts, $content = null) {
extract(shortcode_atts(array(
‘black’ => ”,
), $atts));

return ‘<bblack><span>’.$content.'</span></bblack>’ ; }

  • Add btn_shortcodes.php to function.php, make sure the path is correct.

include ‘iphp/btn_shortcodes.php’;

green button shortcode usage

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.