Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
  • #4322

    hi all

    i know that this may be a very simple question, but i can’t seem to find an example of a basic button shortcode for avisio

    i have also purchased and am using broadscope (another great theme!), and it has a very handy built in shortcode generator

    i tired [button]text here[/button]

    but it didn’t recognise it – please advise

    also, am i able to put shortcode buttons in the sidebar widgets as well?

    thank you :)



    currently Avisio doesn’t offer a button shortcode (only Broadscope, Brightbox and Upscale do). I’ll suggest it to Kriesi as a feature request.


    ok, thanks for the reply – both great themes! :)


    Thanks for the kind words :)


    hey! you can pste this funtion into your functions.php file to make the button shortcode work:

    function avia_sc_button($atts, $content = null) {
    extract(shortcode_atts(array( 'size' => '',
    'style' => '',
    'color' => '',
    'border' => '',
    'text' => '',
    'class' => '',
    'link' => '#',
    'window' => ''), $atts));

    // Set custom background and border color
    $color_output = '';
    if ( $color ) {

    if ( $color == "red" OR
    $color == "orange" OR
    $color == "green" OR
    $color == "aqua" OR
    $color == "teal" OR
    $color == "purple" OR
    $color == "pink" OR
    $color == "silver"
    ) {
    $class .= " ".$color;

    } else {
    if ( $border )
    $border_out = $border;
    $border_out = $color;

    $color_output = 'style="background-color:'.$color.';border-color:'.$border_out.'"';

    // add custom class
    $class .= " custom";

    $class_output = '';

    // Set text color
    if ( $text ) $class_output .= ' '.$text;

    // Set class
    if ( $class ) $class_output .= ' '.$class;

    // Set Size
    if ( $size ) $class_output .= ' '.$size;

    // Open in new window?
    if ( $window ) $window = 'target="_blank" ';

    $output = '<span class="avia-'.$style.'">' . avia_remove_autop($content) . '</span>';
    return $output;
    add_shortcode('button', 'avia_sc_button');

    now wordpress will recognize the shortcode the same way it does in broadscope (but without the visual user interface for shortcodes, thats unfortunatley too much to add)

    now add this to your css file and you should at least have default colored buttons to use:

    background-image: url("../images/icons/bg-button.png");
    background-repeat: repeat-x;
    background-position: 0 0;
    padding:0 10px;
    font-size: 12px;
    text-decoration: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    border-style: solid;
    border-width: 1px;
    margin:3px 0;
    line-height: 28px;
    border-color: #e1e1e1;
    background-color: #f8f8f8;
    position: relative;

    background-position: 0 -4px;
    text-decoration: none;

    .avia-button.dark , .avia-button.dark:hover{

    .avia-button.grey, .avia-button.grey:hover{
    }{background-color: #b00202; border-color: #b00202; }{background-color: #f6a240; border-color: #f6a240; }{background-color: #52851b; border-color: #52851b; }
    .avia-button.aqua{background-color: #58c4be; border-color: #58c4be; }
    .avia-button.teal{background-color: #1d9f9f; border-color: #1d9f9f; }
    .avia-button.purple{background-color: #a258c4; border-color: #a258c4; }{background-color: #f346b0; border-color: #f346b0; }
    .avia-button.silver{background-color: #d7d7d7; border-color: #d7d7d7; }

    padding:0 4px 0px 4px;
    font-size: 10px;
    line-height: 22px;

    padding:0 10px 0px 10px;
    font-size: 13px;
    line-height: 33px;

    padding:0 18px 0px 18px;
    font-size: 14px;
    line-height: 42px;

    .avia-button span{
    position: relative;


    hey Kriesi,

    could you create for Expose theme too, please?



    You can use the same code with expose too. Just paste it in functions.php and style.css.


    That is great Peter and I hope Kriesi shares another nice shortcodes ;)

    edit: How can I use shortcode?





    Try something like:

    [button link="" size="large" color="#000" border="#333" text="light" window="yes"]Test[/button]

    It’s the full configuration with link, size, bgcolor, border, text color and new window (_blank) and button caption (“test”). Please be aware that we can’t support this modification (so if some features don’t work out right I can’t dig around to find the problem).


    thanks dude, but shortcode does not work :(


    Try to replace following code line in Kriesi’s code:

    $output = '<span class="avia-'.$style.'">' . avia_remove_autop($content) . '</span>';


    $output = '<span class="avia-'.$style.'">' . $content . '</span>';

    I’d recommend to use a plugin like: though…

Viewing 12 posts - 1 through 12 (of 12 total)

The topic ‘Button shortcode’ is closed to new replies.