2

Reading the codex, I have:

function btn_shortcode( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'class' => 'button',
    ), $atts );

    return '<a class="' . esc_attr($a['class']) . '">' . $content . '</a>';
}
add_shortcode( 'button', 'btn_shortcode' );

In the WYSIWIG I put [button class="btn btn-lg btn-default"]Learn More[/button] and it outputs as I want it to, but I want to write my shortcode to do this:

[button href="foo" class="btn btn-lg btn-default"]Learn More[/button]

How would I modify my function to allow this?

3

You just have to add another element to the array (and then output it):

function btn_shortcode( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'class' => 'button',
        'href'  =>  '#'
    ), $atts );

    return '<a class="' . esc_attr($a['class']) . '" href="' . esc_attr($a['href']) . '">' . $content . '</a>';
}
add_shortcode( 'button', 'btn_shortcode' );

//EDIT:

In order to add user-defined styles you also just have to add another element to the array:

function btn_shortcode( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'class' => 'button',
        'href'  =>  '#',
        'style' =>  ''
    ), $atts );

    return '<a class="' . esc_attr($a['class']) . '" href="' . esc_attr($a['href']) . '" style="' . esc_attr($a['style']) . '">' . $content . '</a>';
}
add_shortcode( 'button', 'btn_shortcode' );

Here's a usage example:

[button href="foo" class="btn btn-lg btn-default" style="font-weight:bold; margin-top:50px; background-color: #999"]Learn More[/button]

//EDIT2:

You can add different style attributes to the shortcode and then output them all inside the style attribute of the HTML tag, but this will limit the custom CSS only to these predefined attributes and you also must have some predefined values for each of them in case the user leaves them empty. If some of them are left empty and you have no predefined values you might end up with something like this - <a href="#foo" class="button" style="font-weight:; margin-top: 20px; background-color:;"

function btn_shortcode( $atts, $content = null ) {
    $a = shortcode_atts( array(
        'class' => 'button',
        'href'  =>  '#',
        'background-color' =>  '#999',
        'font-weight' => 'normal',
        'margin-top' => '10px'

    ), $atts );

    return '<a class="' . esc_attr($a['class']) . '" href="' . esc_attr($a['href']) . '" style="font-weight:' . esc_attr($a['font-weight']) . '; background-color' . esc_attr($a['background-color']). '; margin-top:' . esc_attr($a['margin-top']) . ';">' . $content . '</a>';
}

Here's a usage example:

[button href="foo" class="btn btn-lg btn-default" font-weight="bold" margin-top="50px" background-color="#999"]Learn More[/button]

  • How would you do styles though? – Darren Bachan Jul 13 '16 at 18:58
  • By styles you mean something like [button href="foo" class="btn btn-lg btn-default" style="font-weight:bold"]Learn More[/button] or something else (if something else, please provide an example)? – Sledge Hammer Jul 13 '16 at 19:08
  • Yeah, like let's say we had font-weight, margin-top, background-color as examples. – Darren Bachan Jul 13 '16 at 19:20
  • Take a look at my edited answer. For each new attribute you require you just have to add another element to the array (and use it later of course). – Sledge Hammer Jul 13 '16 at 19:54
  • so in the array I add 'background-color' => 'whatever' but how do I add that into the style? Idk I'm a bit confused still. – Darren Bachan Jul 13 '16 at 20:59

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.