You’re returning each line individually. It’s only going to output the first line since return
stops execution of the function. Instead, add each line to a string by concatenating with .=
:
function wpse_276152_image_shortcode( $atts ) {
$atts = shortcode_atts( array(
'to' => 'https://pics.wikifeet.com/Melania-Trump-Feet-720891.jpg'
), $atts );
$output="<div class="class1">";
$output .= '<img class="class2" src="' . $atts['to'] . '" alt="The First Caption" width="100%" height="auto">';
$output .= '<i class="fa fa-expand" aria-hidden="true"></i>';
$output .= '</div>';
return $output;
}
add_shortcode( 'the_image', 'wpse_276152_image_shortcode' );
.=
is the same as saying $output = $output . ' string to add'
.
Also note some other changes I made:
the_image
is too generic a name for a function. You’re increasing your chances of running into conflict issues. Note that the function name and shortcode don’t need to be the same.- Don’t use
extract()
. As your code gets more complex it can make maintenance needlessly difficult.