Wordpress shortcode issues with output - wordpress

Question

Hi I am trying to workout how to use shortcodes on a plugin but I am stuck with this .. Its a plugin I found on http://www.wpbeginner.com/wp-tutorials/how-to-add-rotating-testimonials-in-wordpress/
It is working a little but not outputting the code correctly and not sure why this is happening.
I Have upgraded the code and removed the css and jquery code as I will add this separate files..
Any help will be great!
<?php
/*
Plugin Name: Shortcode test
Version: 0.1
Plugin URI: http://www.websiteplugin.com/
Description: Adding theatre edits to the resume page
Author: Auther name
Author URI: http://www.websiteauther.com/
*/
add_action( 'init', 'wpb_register_cpt_testimonial' );
function wpb_register_cpt_testimonial() {
$labels = array(
'name' => _x( 'Testimonials', 'testimonial' ),
'singular_name' => _x( 'testimonial', 'testimonial' ),
'add_new' => _x( 'Add New', 'testimonial' ),
'add_new_item' => _x( 'Add New testimonial', 'testimonial' ),
'edit_item' => _x( 'Edit testimonial', 'testimonial' ),
'new_item' => _x( 'New testimonial', 'testimonial' ),
'view_item' => _x( 'View testimonial', 'testimonial' ),
'search_items' => _x( 'Search Testimonials', 'testimonial' ),
'not_found' => _x( 'No testimonials found', 'testimonial' ),
'not_found_in_trash' => _x( 'No testimonials found in Trash', 'testimonial' ),
'parent_item_colon' => _x( 'Parent testimonial:', 'testimonial' ),
'menu_name' => _x( 'Testimonials', 'testimonial' ),
);
$args = array(
'labels' => $labels,
'hierarchical' => false,
'supports' => array( 'title', 'editor', 'excerpt', 'author', 'thumbnail', 'custom-fields', 'revisions' ),
'public' => true,
'show_ui' => true,
'show_in_menu' => true,
'show_in_nav_menus' => true,
'publicly_queryable' => true,
'exclude_from_search' => false,
'has_archive' => true,
'query_var' => true,
'can_export' => true,
'rewrite' => true,
'capability_type' => 'post'
);
register_post_type( 'testimonial', $args );
}
$key = "testimonial";
$meta_boxes = array(
"person-name" => array(
"name" => "person-name",
"title" => "Person's Name",
"description" => "Enter the name of the person who gave you the testimonial."),
"position" => array(
"name" => "position",
"title" => "Position in Company",
"description" => "Enter their position in their specific company."),
"company" => array(
"name" => "company",
"title" => "Company Name",
"description" => "Enter the client Company Name"),
"link" => array(
"name" => "link",
"title" => "Client Link",
"description" => "Enter the link to client's site, or you can enter the link to your portfolio page where you have the client displayed.")
);
function wpb_create_meta_box() {
global $key;
if( function_exists( 'add_meta_box' ) ) {
add_meta_box( 'new-meta-boxes', ucfirst( $key ) . ' Information', 'display_meta_box', 'testimonial', 'normal', 'high' );
}
}
function display_meta_box() {
global $post, $meta_boxes, $key;
?>
<div class="form-wrap">
<?php
wp_nonce_field( plugin_basename( __FILE__ ), $key . '_wpnonce', false, true );
foreach($meta_boxes as $meta_box) {
$data = get_post_meta($post->ID, $key, true);
?>
<div class="form-field form-required">
<label for="<?php echo $meta_box[ 'name' ]; ?>"><?php echo $meta_box[ 'title' ]; ?></label>
<input type="text" name="<?php echo $meta_box[ 'name' ]; ?>" value="<?php echo (isset($data[ $meta_box[ 'name' ] ]) ? htmlspecialchars( $data[ $meta_box[ 'name' ] ] ) : ''); ?>" />
<p><?php echo $meta_box[ 'description' ]; ?></p>
</div>
<?php } ?>
</div>
<?php
}
function wpb_save_meta_box( $post_id ) {
global $post, $meta_boxes, $key;
foreach( $meta_boxes as $meta_box ) {
if (isset($_POST[ $meta_box[ 'name' ] ])) {
$data[ $meta_box[ 'name' ] ] = $_POST[ $meta_box[ 'name' ] ];
}
}
if (!isset($_POST[ $key . '_wpnonce' ]))
return $post_id;
if ( !wp_verify_nonce( $_POST[ $key . '_wpnonce' ], plugin_basename(__FILE__) ) )
return $post_id;
if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;
update_post_meta( $post_id, $key, $data );
}
add_action( 'admin_menu', 'wpb_create_meta_box' );
add_action( 'save_post', 'wpb_save_meta_box' );
function wpb_display_testimonials() {
$return_string .= "<div id=\"testimonials\">";
$args = array( 'post_type' => 'testimonial', 'posts_per_page' => 100, 'orderby' => 'menu_order', 'order' => 'ASC' );
$loop = new WP_Query( $args );
if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
$data = get_post_meta( $loop->post->ID, 'testimonial', true );
static $count = 0;
if ($count == "1") {
$pn_data = $data[ 'person-name' ];
$p_data = $data[ 'position' ];
$l_data = $data[ 'link' ];
$c_data = $data[ 'company' ];
$con_the = get_the_content( $more_link_text, $stripteaser );
$return_string .= '<div class="slide" style="display: none">
<div class="client-contact-info">'; $return_string .= $pn_data; $return_string .=', '; $return_string .= $p_data; $return_string .=', '; $return_string .= $c_data ; $return_string .='</div>';
$return_string .= '<div class="clear"></div>
<div class="testimonial-quote">'; $return_string .= $con_the; $return_string .='</div>
</div>';
}
else {
$pn_data = $data[ 'person-name' ];
$p_data = $data[ 'position' ];
$l_data = $data[ 'link' ];
$c_data = $data[ 'company' ];
$con_the = get_the_content( $more_link_text, $stripteaser );
$return_string .= '<div class="slide" >
<div class="client-contact-info">';
$return_string .= $pn_data;
$return_string .=', ';
$return_string .= $p_data;
$return_string .=', <a href="';
$return_string .= $l_data;
$return_string .='" title="';
$return_string .= $c_data ; $return_string .= '">';
$return_string .= $c_data ; $return_string .='</a></div>';
$return_string .= '<div class="clear"></div><div class="testimonial-quote">';
$return_string .= $con_the;
$return_string .='</div></div>';
$count++;
}
endwhile;
endif;
$return_string .='</div>';
return $return_string;
}
function register_shortcodes(){
add_shortcode('testme', 'wpb_display_testimonials');
}
add_action( 'init', 'register_shortcodes');
?>

Answer 1

If you look at the Shortcode API "Shortcode handlers ... they accept parameters (attributes) and return a result (the shortcode output)." in your function wpb_display_testimonials() EVERYTHING you want to return should be inside the value of $return_string .. the echo statements and the inline JS can't be used as you have it.
So instead of
?> <div> misc html </div> <?
you want to do something more like:
$return_string += '<div> misc html </div>';
you could also use output buffering though given you are already assembling $return_string best to use that and get it working then you can refactor later.