Wordpress shortcode is always at the top of the content

user2059376 :

This shortcode is always at the top of the content regardless of where it is placed in the page, how can I have it be displayed where it's placed?

I've attempted to replace the echo statements with return as described in previous posts but it breaks the script.

The shortcode pulls 1 product from each product attribute term then displays the product image and the attribute term name.

function navigationProdFromEachLimit() {
$factwpslug = "/charts/?fwp_chart_type=";
$number = '5'; //LIMIT THE NUMBER OF RETURNED CHART TYPES

$args = array(

'number'     => $number,
'orderby'    => 'count',
'order'      => 'DESC',
'hide_empty' => false,
'include'    => $ids,
);
$product_categories = get_terms( 'pa_chart-type', $args );
 $count = count($product_categories);
if ( $count > 0 ){
foreach ( $product_categories as $product_category ) {
    $args = array(
        'posts_per_page' => 1,
        'tax_query' => array(
            'relation' => 'AND',
            array(
                'taxonomy' => 'pa_chart-type',
                'field' => 'slug',
                'terms' => $product_category->slug
            )
        ),
        'post_type' => 'product',
        'orderby' => 'title,'
    );
    $products = new WP_Query( $args );
    while ( $products->have_posts() ) {
        $products->the_post();

        ?>
            <div class ="chart-type-nav <?php echo $product_category->slug ?>">

                <a class="nav-thumb" href="<?php echo $factwpslug  . $product_category->slug ?>">
                   <div class ="img-contain"> <?php the_post_thumbnail(); ?></div>
                </a>
                  <?php
             echo '<span class="nav-title"><a href="'.$factwpslug  . $product_category->slug . '">' . $product_category->name . '</a></span>';
 ?>
            </div>
        <?php

    }
}
}
}
add_shortcode('navprodealimit', 'navigationProdFromEachLimit');

Howard E :

You can't echo shortcode output without output buffering. You must RETURN shortcode output.

function navigationProdFromEachLimit() {
$factwpslug = "/charts/?fwp_chart_type=";
$number = '5'; //LIMIT THE NUMBER OF RETURNED CHART TYPES

$args = array(

'number'     => $number,
'orderby'    => 'count',
'order'      => 'DESC',
'hide_empty' => false,
'include'    => $ids,
);
$product_categories = get_terms( 'pa_chart-type', $args );
$count = count($product_categories);

ob_start(); // Use Output Buffering for your shortcode

if ( $count > 0 ){
foreach ( $product_categories as $product_category ) {
    $args = array(
        'posts_per_page' => 1,
        'tax_query' => array(
            'relation' => 'AND',
            array(
                'taxonomy' => 'pa_chart-type',
                'field' => 'slug',
                'terms' => $product_category->slug
            )
        ),
        'post_type' => 'product',
        'orderby' => 'title,'
    );
    $products = new WP_Query( $args );
    while ( $products->have_posts() ) {
        $products->the_post();
        ?>
            <div class ="chart-type-nav <?php echo $product_category->slug ?>">

                <a class="nav-thumb" href="<?php echo $factwpslug  . $product_category->slug ?>">
                   <div class ="img-contain"> <?php the_post_thumbnail(); ?></div>
                </a>
                  <?php
             echo '<span class="nav-title"><a href="'.$factwpslug  . $product_category->slug . '">' . $product_category->name . '</a></span>';
 ?>
            </div>
        <?php

            }
        }
    }
    return ob_get_clean(); // You have to return shortcode output.
}
add_shortcode('navprodealimit', 'navigationProdFromEachLimit');