Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

WordPress

Liam Maclachlan
Liam Maclachlan
22,805 Points
Posted by Liam Maclachlan
Liam Maclachlan
22,805 Points

Why does this shortcode not return the alterd margin top and bottom $atts?

So, the colour and background variables both return with no problem at all, no matter how they are presented. Below is the shortcode:

<?php
    // Parent template container
    function sliced_parent($atts, $content) { 
        extract( shortcode_atts( array(
            'colour' => 'black',
            'background' => 'white',
            'marginTop' => '0',
            'marginBottom' => '0'
        ), $atts ) );
        ob_start(); 
        $return  = '<div class="max-width-parent cf" style="';
        $return .= ' color:' . $colour .  ';';
        $return .= ' background:' . $background . ';';
        $return .= ' margin-top: ' . $marginTop . ';';
        $return .= ' margin-bottom: ' . $marginBottom . ';';
        $return .='"><div class="solution__container--child">' . do_shortcode($content) .  '</div></div>';
        ob_end_clean();
        return $return;
    }
    add_shortcode( 'Sliced-Parent', 'sliced_parent' );

    // 100% width conent container
    function sliced_c($atts, $content) { 
        ob_start(); 
        $content  = '<div class="solution__inner--c max-width">' . $content .  '</div>';
        ob_end_clean();
        return $content;
    }
    add_shortcode( 'Sliced-C', 'sliced_c' );
?>

and this is how it is called in the WP WYSIWYG editor:

[Sliced-Parent marginTop="3em" marginBottom="1em" background="black" colour="#ffb900"]
[Sliced-C]Here![/Sliced-C]
[/Sliced-Parent]

The margins are not passed to the shortcode. If I remove the colour and background vars, still nothing. If I change the default $att value in the shortcode, it works (as in the fixed $atts value is what is passed)! What is going on!?

Here is the DOM output, too. The 'margin-top' and '-bottom' attributes ARE being populated by the variable :/

<div class="max-width-parent cf" style=" color:#ffb900; background:black; margin-top: 0; margin-bottom: 0;">
    <div class="solution__container--child">
        <div class="solution__inner--c" style="float:none;">Here!</div>
    </div>
</div>
Craig Watson
Craig Watson
27,930 Points

Hi Liam,

Have you tried this without ob_start(); / end ?

I also use return force_balance_tags( $result );

There is a few very small difference in a shortcode I have set up that you may want to try below is one of the function with multiple params to reference :)

<?php

//Creat Shortcode Button and Variables
function bf_button_shortcode_button( $params, $content=null ) {
    extract(shortcode_atts(array(

        'size'     => 'default',
        'color'    => 'default',
        'link'     => "#",
        'id'       => ''

    ), $params ) );
    $content = preg_replace( '/<br class="nc".\/>/', '', $content );
    $result = '<a class="btn btn-' . $size . ' btn-' . $color . '" href="' . $link . '" id="' . $id . '">';
    $result .= do_shortcode( $content );
    $result .= '</a>';

    return force_balance_tags( $result );

}
add_shortcode( 'bfb_btn', 'bf_button_shortcode_button' );

?>

Hope this points to a solution in some way Liam, it feels like its going to be a bit( lot ) of trial and error.

Craig

1 Answer

Stanley Thijssen
Stanley Thijssen
22,831 Points
Stanley Thijssen
Stanley Thijssen
22,831 Points

Hey Liam,

If you use marginbottom and margintop instead of the uppercase Top and Bottom it works fine. Im not sure why this is happening because the code should still work with uppercase Top and Bottom.

So change both the variable and key inside the array

Craig Watson
Craig Watson
27,930 Points

Stanley that is awesome!

Googled a little and got this on codex

Apparently its an important tip!

Noted...

Liam Maclachlan
Liam Maclachlan
22,805 Points
Liam Maclachlan
Liam Maclachlan
22,805 Points

Awesome. Thanks for the tip! That sounded familliar when I was reading it. I think that this may have been mentioned in the 'create a shortcode' module on here.

Anyway, thanks for curing the headache :)

Yup. here is is! Straight from the codex

"IMPORTANT TIP - Don't use camelCase or UPPER-CASE for your $atts attribute names $atts values are lower-cased during shortcode_atts( array( 'attr_1' => 'attr_1 default', // ...etc ), $atts ) processing, so you might want to just use lower-case."