Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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 }
share|improve this question
add comment

1 Answer

up vote 1 down vote accepted

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');
?>
share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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