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.

How do I add custom CSS buttons as a shortcode like this:

[button class="mybutton1" link="home"]

I have the CSS of the button from here

.myButton {

    -moz-box-shadow:inset 0px 1px 0px 0px #cf866c;
    -webkit-box-shadow:inset 0px 1px 0px 0px #cf866c;
    box-shadow:inset 0px 1px 0px 0px #cf866c;

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #d0451b), color-stop(1, #bc3315));
    background:-moz-linear-gradient(top, #d0451b 5%, #bc3315 100%);
    background:-webkit-linear-gradient(top, #d0451b 5%, #bc3315 100%);
    background:-o-linear-gradient(top, #d0451b 5%, #bc3315 100%);
    background:-ms-linear-gradient(top, #d0451b 5%, #bc3315 100%);
    background:linear-gradient(to bottom, #d0451b 5%, #bc3315 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#d0451b', endColorstr='#bc3315',GradientType=0);

    background-color:#d0451b;

    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;

    border:1px solid #942911;

    display:inline-block;
    color:#ffffff;
    font-family:arial;
    font-size:13px;
    font-weight:normal;
    padding:6px 24px;
    text-decoration:none;

    text-shadow:0px 1px 0px #854629;

}
.myButton:hover {

    background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #bc3315), color-stop(1, #d0451b));
    background:-moz-linear-gradient(top, #bc3315 5%, #d0451b 100%);
    background:-webkit-linear-gradient(top, #bc3315 5%, #d0451b 100%);
    background:-o-linear-gradient(top, #bc3315 5%, #d0451b 100%);
    background:-ms-linear-gradient(top, #bc3315 5%, #d0451b 100%);
    background:linear-gradient(to bottom, #bc3315 5%, #d0451b 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#bc3315', endColorstr='#d0451b',GradientType=0);

    background-color:#bc3315;
}
.myButton:active {
    position:relative;
    top:1px;
}

I wish to add this to my WordPress site as a shortcode. How do I do this?

Thanks!

share|improve this question
    
Anyone have an answer? –  DevAndy Jun 17 '13 at 18:41

1 Answer 1

up vote 1 down vote accepted
function myButton($atts, $content = ''){    

    extract(shortcode_atts(array(
        'text' => '',
        'link' => ''
    ), $atts)); 

    $html = '<a href="' . $link . '"><div class="myButton">' . $text . '</div></a>';
    return $html;    
}

add_shortcode('mybutton', 'myButton');

Add this to your functions.php and you will be able to call the button within wordpress using the shortcode you wanted.

As you can see the class and the link you set become the variables to be used in the shortcode.

If you want to add text to the button you could change the html to the following:

$html = '<a href="' . $link . '"><div class="' . $class . '" >' . $content . '</div></a>';

and use it like this

[button class='mybutton' link='home']mybuttonname[/button]

Hope this helps

share|improve this answer
    
Is it possible to make it so that the shortcode is: [mybutton link="home" content="text"] ? I'm new to WordPress so it'd be awesome if you could walk me through step by step. I looked around and couldn't find anything else on how to do this. :) –  DevAndy Jun 17 '13 at 22:42
    
use shortcode like [mybutton link='home' text='button text']. I updated the function for you. –  thirdOctet Jun 18 '13 at 5:49

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.