Function output not appearing in div - php

Question

This is my first try at php.
Trying to create a custom shortcode in wordpress to call custom metadata and put it inside a page content. It worked fine without the
function wpsl_staff() {
echo '<div class="staff">' .wpsl_get_staff(). '</div>';
function wpsl_get_staff() {
and with the shortcode being
add_shortcode( 'wpsl_staff', 'wpsl_get_staff' );
The output was correct but the output appeared at the top of the page above all other content and when I inspected in the browser it had no div or class id and just appeared as text. How do I wrap this in a div and give id so it sits properly on the content page (It should display between 2 images and under another shortcode) I have managed to give it a class id previously and get it to appear in a div but the output still appears at the top of the page above the images and other shortcode.
<?php
function wpsl_get_staff() {
global $post;
$queried_object = get_queried_object();{
$Manager = get_post_meta( $queried_object->ID, 'wpsl_Manager', true );
if (!empty( $Manager )) return 'Manager : ' .$Manager . "<br>";
else {}
$Assitant = get_post_meta( $queried_object->ID, 'wpsl_Assistant_Manager', true );
if (!empty( $Assistant )) return 'Assistant Manager : ' .$assistant . "<br>";
else {}
$Agent = get_post_meta( $queried_object->ID, 'wpsl_Agent', true );
if (!empty( $Agent )) return 'Agent : ' .$Agent . "<br>";
else {}
}
}
function wpsl_staff() {
echo '<div class="staff">' .wpsl_get_staff(). '</div>';
}
add_shortcode( 'wpsl_staff', 'wpsl_dio_staff' );
Thanks
Toca

Answer 1

Shortcode functions are supposed to return the result, not directly output it.
function wpsl_staff() {
return '<div class="staff">' .wpsl_get_staff(). '</div>';
}
Edit: You can only return one value from a function - so if your wpsl_get_staff is supposed to return data for all three types, then you need to assemble that data into a string variable first, and then return that at the end of the function - something like this:
function wpsl_get_staff() {
global $post;
$queried_object = get_queried_object();
$output = '';
$Manager = get_post_meta( $queried_object->ID, 'wpsl_Manager', true );
if (!empty( $Manager )) {
$output .= 'Manager : ' .$Manager . "<br>";
}
$Assitant = get_post_meta( $queried_object->ID, 'wpsl_Assistant_Manager', true );
if (!empty( $Assistant )) {
$output .= 'Assistant Manager : ' .$assistant . "<br>";
}
$Agent = get_post_meta( $queried_object->ID, 'wpsl_Agent', true );
if (!empty( $Agent )) {
$output .= 'Agent : ' .$Agent . "<br>";
}
return $output;
}