1

I am trying to create a custom button shortcode, with multiple color and size options. However, when I try to use the shortcode in my post it isn't showing up.

My Function

function btn($atts, $content = null) {
   extract(shortcode_atts(array('link' => '#', 'color' => 'teal' , 'size' => 'large'), $atts));
   return '<a class="btn '.$size.'" href="'.$link.'" style="background:'.$color.';"><span>' . do_shortcode($content) . '</span></a>';
}

How I am using the shortcode

[btn color="blue" size="large"]Button Text[/btn]

My CSS

/* Buttons */
.btn {background:#222 url(img/alert-overlay.png) repeat-x; display:inline-block; padding:5px 10px 6px; color:#fff!important; text-decoration:none; font-weight:bold; line-height:1; -moz-border-radius:5px; -webkit-border-radius:5px; position:relative; cursor:pointer; -moz-box-shadow:0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow:0 1px 3px rgba(0,0,0,0.5); text-shadow:0 -1px 1px rgba(0,0,0,0.25); border-bottom:1px solid rgba(0,0,0,0.25)}
.btn:active{-webkit-transform:translateY(1px); -moz-transform:translateY(1px)}

/* Sizes ---------- */
.small { font-size: 11px; margin:10px 0 }
.medium { font-size: 13px; margin:10px 0 }
.large { font-size: 14px; padding: 8px 14px 9px; margin:10px 0 }

/* Colors ---------- */
.blue { background-color: #2daebf }
.red { background-color: #e33100 }
.magenta { background-color: #a9014b }
.orange { background-color: #ff5c00 }
.yellow { background-color:#ffb515 }
1

How about this?

<?php
function btn($atts, $content = null) {
   extract(shortcode_atts(array('link' => '#', 'color' => 'teal' , 'size' => 'large'), $atts));
   return '<a class="btn '.$size.'" href="'.$link.'" style="background:'.$color.';"><span>' . $content . '</span></a>';
}

add_shortcode('btn', 'btn');
?>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.