As the subject states… why is this happening? I have the following shortcodes registered so that the user can easily create a slideshow within their content and widgets.

functions.php

function u3_uk_slideshow( $atts , $content = null ) {
    $atts = shortcode_atts(
        array(
            'animation' => 'slide',
            'autoplay' => 'true',
            'autoplay-interval' => '3000',
            'finite' => 'true',
            'id' => 'slideshow',
            'height-viewport' => 'false',
        ),
        $atts,
        'uk-slideshow'
    );
     $output = printf( __( '<div class="uk-slideshow" id="%s" data-uk-slideshow="animation: %s; autoplay: %s; autoplay-interval: %s; finite: %s;">', '' ), $atts['id'], $atts['animation'], $atts['autoplay'], $atts['autoplay-interval'], $atts['finite']);
    $output .= do_shortcode($content);
    return $output;
}
add_shortcode( 'uk-slideshow', 'u3_uk_slideshow' );

function u3_uk_slides( $atts , $content = null ) {
    $atts = shortcode_atts(
        array(
            'id' => 'slideshow',
        ),
        $atts,
        'uk-slides'
    );
    $output = '<ul class="uk-slideshow-items">';
    $output .= do_shortcode($content);
    return $output;
}
add_shortcode( 'uk-slides', 'u3_uk_slides' );

function u3_uk_slide( $atts , $content = null ) {
    $atts = shortcode_atts(
        array(
            'id' => 'slide',
        ),
        $atts,
        'uk-slide'
    );
    $output = '<li>';
    $output .= do_shortcode($content);
    return $output;
}
add_shortcode( 'uk-slide', 'u3_uk_slide' );

The output is as expected but “134” is randomly added, see below HTML from the front-end when using the shortcodes. Note, I added the html comment to point out the line.

Widget with the shortcodes in it:

[uk-slideshow]
[uk-slides]
[uk-slide]
<img class="alignnone size-medium wp-image-511" src="#" alt="" width="600" height="338" />
[/uk-slide]

[uk-slide]
<img class="alignnone size-medium wp-image-456" src="#" alt="" width="600" height="338" />
[/uk-slide]

[uk-slide]
<img class="alignnone size-medium wp-image-122" src="#" alt="The Fresh Prince of Bel-Air" width="600" height="450" />
[/uk-slide]
[/uk-slides]
[/uk-slideshow]

FRONT-END OUTPUT

<div class="uk-slideshow" id="slideshow" data-uk-slideshow="animation: slide; autoplay: true; autoplay-interval: 3000; finite: true;"><div class="uk-card"><div class="uk-card-body uk-margin widget text-7 widget_text">           <div class="textwidget"><p>134</p> <!-- THIS LINE, IS ADDED RANDOMLY BEFORE THE SLIDESHOW DIV.... WHY? -->
<ul class="uk-slideshow-items" style="min-height: 720px;">
<li class="" style="">
<img class="alignnone size-medium wp-image-511" src="#" alt="" width="600" height="338"><p></p>
</li><li class="" style="">
<img class="alignnone size-medium wp-image-456" src="#" alt="" width="600" height="338"><p></p>
</li><li class="uk-active uk-transition-active" style="">
<img class="alignnone size-medium wp-image-122" src="#" alt="The Fresh Prince of Bel-Air" width="600" height="450"><p></p>
</li></ul></div>
        </div></div>        </div>

If I change the first line in my functions shortcode to be written out “the messy way” such like this:

$output = '<div class="uk-slideshow id=" ' . $atts['id'] . ' " data-uk-slideshow="animation: ' . $atts['animation'] . '; autoplay: ' . $atts['autoplay'] . '; autoplay-interval: ' . $atts['autoplay-interval'] . '; finite: ' . $atts['finite'] . ';">';

Everything works fine, but for learning purposes I would like to know why I can’t do the former or what I need to do to get it to work? Especially since it doesn’t match the rest of my template this way where I’m trying to make things neat. Any help would be greatly appreciated.