WP shortcode output always at top of page - wordpress

Question

When placing a shortcode on a custom WordPress page the output is always displayed at the top of my page content.
I found out that the problem can be fixed by either using return instead of echo, or by using output buffering: (ob_start() / ob_get_contents())
Unfortunately my coding skills are not what I would like them to be.. And I don't know exactly where to implement these fixes.
Can someone help me out please? The plugin developer is not responding to my mails and I need to get this to work a.s.a.p.
I assume this needs to be implemented in the faulty plugin's functions file so I added it below.
<?php
/**
* Woocommerce Category Accordion Functions
*
* #author TechieResource
* #category Shortcode
* #package woocommerce-category-accordion/inc
* #version 1.2.1
*/
/**
/* Clean variables
*
* #param string $var
* #return string
*/
if ( ! defined( 'ABSPATH' ) ) {
exit;
} // Exit if accessed directly
if ( in_array( 'woocommerce/woocommerce.php', apply_filters( 'active_plugins', get_option( 'active_plugins' ) ) ) ) {
class trwca_wc_category_accordion{
/**
* Constructor
*/
private $shortcode_tag = "WC-Category-Accordion";
public function __construct() {
add_action( 'woocommerce_category_accordion', array( $this, 'woocommerce_category_accordion_func' ), 10, 2 );
add_shortcode( $this->shortcode_tag, array( $this, 'wc_category_accordion_sc' ) );
if ( is_admin() ){
add_action('admin_head', array( $this, 'admin_head') );
add_action( 'admin_enqueue_scripts', array($this , 'admin_enqueue_scripts' ) );
}
}
/**
* Display the Woocommerce Category Accordion.
* #since 1.2.1
* #param array $instance Arguments.
* #param bool $echo Whether to display or return the output.
* #return string
*/
public function woocommerce_category_accordion_func( $instance, $echo = true ) {
extract( $instance, EXTR_SKIP );
global $wp_query;
global $post, $product;
$exclude_tree = esc_attr($exclude_tree );
$hide_empty = esc_attr($hide_empty );
$show_count = esc_attr($show_count );
$open_cat = esc_attr($open_cat );
$ac_speed = esc_attr($ac_speed );
$ac_type = esc_attr($ac_type );
$event_type = esc_attr($event_type );
$ac_icon = esc_attr($ac_icon );
$sortby = esc_attr($sortby );
$ac_theme = esc_attr($ac_theme );
$order = esc_attr($order );
$level = esc_attr($level );
$cats_id = esc_attr($ac_opencat);
$disable_parent = esc_attr($disable_parent);
$disable_aclink = esc_attr($disable_aclink);
if(!empty($instance['id'])){
$widgetid= $instance['id'];
}
else{
if($sh_id!=""){
$widgetid= "wc_category_accordion-".$sh_id;
}
else{
$widgetid= "wc_category_accordion-".$this->trwca_generate_random_code(3);
}
}
$instance_categories = get_terms( 'product_cat', '&parent=0&exclude='.$exclude_tree.'');
if (is_array($instance_categories)) {
foreach($instance_categories as $categories) {
$term_id[] = $categories->term_id;
$term_name = $categories->name;
}
}
if(!empty($post->ID)){
$terms =get_the_terms( $post->ID, 'product_cat' );
}
else {
$terms="";
}
if (is_array($terms )) {
foreach ( $terms as $term) {
$_cat=$term->term_id;
break;
}
}
/* For current category highlight */
if(is_product()){
$current_cat= array();
$cat = $wp_query->get_queried_object();
if (!empty($cat->term_id))
{
$current_cat = $cat->term_id;
}
else{
$_cat_id="1";
if (isset($term->term_id))
{
$_cat=$term->term_id;
$_cat_id = !empty($_cat) ? $_cat_id=$_cat : $_cat_id=1 ;
}
if (is_shop())
{
$_cat_id="1";
}
if (!is_shop()){
if (is_array($terms )) {
foreach($terms as $term){
$myterms[]= $term->term_id;
}
$cats_id=end($myterms);
?>
<script type="text/javascript">
var cats_id= <?php return end($myterms); ?>;
</script>
<style type="text/css">
<?php foreach((get_the_terms($post->ID, 'product_cat')) as $term) {
$myterms= $term->term_id;
return 'ul.'.$widgetid.' li.cat-item-'.$myterms.' > a{font-weight:bold;}';
}
}
}
?>
</style>
<?php
}
}
$cat = $wp_query->get_queried_object();
if (!empty($cat->term_id) && !is_product() ){
$cats_id = $cat->term_id;
return '<script type="text/javascript">
var cats_id= '.$cats_id.';
</script>';
}
else if(!is_product_category() && !is_product()){
$cats_id=$ac_opencat;
}
$ac_type = $ac_type=="toggle" ? $ac_type= "true" : $ac_type= "false";
$open_cat = $open_cat== true || $open_cat =='on' ? $open_cat=true : $open_cat=false;
/* Icon Selection */
switch ($ac_icon) {
case 'angle' :
$open_icon="angle-down";
$close_icon="angle-right";
break;
case 'doubleangle' :
$open_icon="angle-double-down";
$close_icon="angle-double-right";
break;
case 'arrow-circle1' :
$open_icon="arrow-circle-down";
$close_icon="arrow-circle-right";
break;
case 'arrow-circle2' :
$open_icon="arrow-circle-o-down";
$close_icon="arrow-circle-o-right";
break;
case 'arrow-right' :
$open_icon="arrow-down";
$close_icon="arrow-right";
break;
case 'caret' :
$open_icon="caret-down";
$close_icon="caret-right";
break;
case 'caret-square' :
$open_icon="caret-square-o-down";
$close_icon="caret-square-o-right";
break;
case 'chevron' :
$open_icon="chevron-down";
$close_icon="chevron-right";
break;
case 'chevron-circle' :
$open_icon="chevron-circle-down";
$close_icon="chevron-circle-right";
break;
case 'hand' :
$open_icon="hand-o-down";
$close_icon="hand-o-right";
break;
case 'plus' :
$open_icon="minus";
$close_icon="plus";
break;
case 'plus-circle' :
$open_icon="minus-circle";
$close_icon="plus-circle";
break;
case 'plus-square1' :
$open_icon="minus-square";
$close_icon="plus-square";
break;
case 'plus-square2' :
$open_icon="minus-square-o";
$close_icon="plus-square-o";
break;
}
if($disable_aclink==true){
$disable_aclink='true';
}
else if($disable_aclink==""){
$disable_aclink= 'false';
}
if($disable_parent==true){
$disable_parent='true';
}
else if($disable_parent==""){
$disable_parent='false';
}
$cats_id= empty($cats_id) ? 1 : $cats_id;
?>
<script type="text/javascript">
var $=jQuery.noConflict();
$(document).ready(function($){
$('.<?php echo $widgetid; ?>').trwcAccordion({
classParent : 'trwca-parent',
classActive : 'active',
classArrow : 'trwca-icon',
classCount : 'trwca-count',
classExpand : 'trwca-current-parent',
eventType : '<?php echo $event_type; ?>',
hoverDelay : 100,
menuClose : true,
cats_id: <?php echo $cats_id; ?>,
ac_type : <?php echo $ac_type; ?>,
autoExpand : true,
speed : '<?php echo $ac_speed ?>',
saveState : '<?php echo $open_cat; ?>',
disableLink : <?php echo $disable_aclink; ?>,
disableparentLink : <?php echo $disable_parent; ?>,
auto_open: 1,
showCount : true,
widget_id : "<?php echo $widgetid; ?>",
openIcon : '<?php echo $open_icon; ?>',
closeIcon : '<?php echo $close_icon; ?>',
});
});
</script>
<div class="block-content trwca-actheme <?php echo $ac_theme; ?>">
<div class="trwca-loader"></div>
<ul class="<?php echo $widgetid; ?> accordion" id="outer_ul">
<?php
$subcat_args = array(
'taxonomy' => 'product_cat',
'title_li' => '',
'orderby' => $sortby,
'order' => $order,
'depth' => $level,
'show_count' => $show_count,
'hide_empty' => $hide_empty,
'use_desc_for_title' => 1,
'echo' => false,
'exclude' => $exclude_tree,
'hierarchical' => true ,
'show_option_none' => __('No Categories Found','trwca'),
'link_after' => '',
'walker'=> new trwca_walker
);
?>
<?php $subcategories = wp_list_categories( $subcat_args );
$subcategories=preg_replace_callback(
'/<\/a> \(([0-9]+)\)/',
function ($matches) {
return ' <span class="count">('.($matches[1]).')</span></a>';
},$subcategories
);
?>
<?php if ( $subcategories ) {
echo $subcategories;
}
?>
</ul>
</div>
<?php
}
public function trwca_generate_random_code($length=3) {
$string = '';
$characters = "123456789";
for ($p = 0; $p < $length; $p++) {
$string .= $characters[mt_rand(0, strlen($characters)-1)];
}
return $string;
}
/**
* admin_head
* calls your functions into the correct filters
* #return void
*/
function admin_head() {
// check user permissions
if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
return;
}
// check if WYSIWYG is enabled
if ( 'true' == get_user_option( 'rich_editing' ) ) {
add_filter( 'mce_external_plugins', array( $this ,'mce_external_plugins' ) );
add_filter( 'mce_buttons', array($this, 'mce_buttons' ) );
}
}
/**
* mce_external_plugins
* Adds our tinymce plugin
* #param array $plugin_array
* #return array
*/
function mce_external_plugins( $plugin_array ) {
$plugin_array['WC_Category_Accordion'] = plugins_url( 'admin/js/mce-button.js' , __FILE__ );
return $plugin_array;
}
/**
* mce_buttons
* Adds our tinymce button
* #param array $buttons
* #return array
*/
function mce_buttons( $buttons ) {
array_push( $buttons, 'WC_Category_Accordion' );
return $buttons;
}
/**
* admin_enqueue_scripts
* Used to enqueue custom styles
* #return void
*/
function admin_enqueue_scripts(){
wp_enqueue_style('WC-Category-Accordion-sh', plugins_url( 'admin/css/mce-button.css' , __FILE__ ) );
}
public function wc_category_accordion_sc( $atts, $content = null ) {
$defaults = array(
'show_count' => 0,
'ac_speed' => 'fast',
'exclude_tree' =>'',
'hide_empty' => 0,
'sortby' =>'name',
'order' =>'ASC',
'level' => 0,
'event_type' => 'click',
'ac_type' => 'toggle',
'open_cat' => 0,
'ac_opencat' => 1,
'ac_icon' =>'plus',
'disable_parent' => 0,
'disable_aclink' => 0,
'ac_theme' => '',
'sh_id'=> '' );
$settings = shortcode_atts( $defaults, $atts );
return $this->woocommerce_category_accordion_func( $settings, false );
}
}
new trwca_wc_category_accordion();
function trwca_clean( $var ) {
return sanitize_text_field( $var );
}
}
?>
Thank you guys!

Answer 1

function your_shortcode_function(){
ob_start(); ?>
<div>
// all your stuffs here
</div>
<?php
$contents=ob_get_contents();
ob_end_clean();
return $contents;
}
add_shortcode('your_shortcode', 'your_shortcode_function');
You need ob_start and ob_end_clean() as said as above OUTPUT BUFFERING

Answer 2

You'll want to use ob_start() and return ob_get_clean() inside the shortcode function.
Likeso:
<?php
function my_shortcode(){ // The function that is our shortode output.
ob_start();?>
<div class="my-shortcode-output">
<em>I'm <strong>the best</strong></em>
</div>
<?php
return $ob_get_clean();
}
add_shortcode( 'my-shortcode', 'my_shortcode' );
I'd also consider not echoing js from your php, using wp_enque_script and wp_localize_script is much nicer.

Answer 3

This should work.
<?php
/**
* Woocommerce Category Accordion Functions
*
* #author TechieResource
* #category Shortcode
* #package woocommerce-category-accordion/inc
* #version 1.2.1
*/
/**
/* Clean variables
*
* #param string $var
* #return string
*/
if (!defined('ABSPATH')) {
exit;
} // Exit if accessed directly
if (in_array('woocommerce/woocommerce.php', apply_filters('active_plugins', get_option('active_plugins')))) {
class trwca_wc_category_accordion
{
/**
* Constructor
*/
private $shortcode_tag = "WC-Category-Accordion";
public function __construct()
{
add_action('woocommerce_category_accordion', array(
$this,
'woocommerce_category_accordion_func'
), 10, 2);
add_shortcode($this->shortcode_tag, array(
$this,
'wc_category_accordion_sc'
));
if (is_admin()) {
add_action('admin_head', array(
$this,
'admin_head'
));
add_action('admin_enqueue_scripts', array(
$this,
'admin_enqueue_scripts'
));
}
}
/**
* Display the Woocommerce Category Accordion.
* #since 1.2.1
* #param array $instance Arguments.
* #param bool $echo Whether to display or return the output.
* #return string
*/
public function woocommerce_category_accordion_func($instance, $echo = true)
{
ob_start();
extract($instance, EXTR_SKIP);
global $wp_query;
global $post, $product;
$exclude_tree = esc_attr($exclude_tree);
$hide_empty = esc_attr($hide_empty);
$show_count = esc_attr($show_count);
$open_cat = esc_attr($open_cat);
$ac_speed = esc_attr($ac_speed);
$ac_type = esc_attr($ac_type);
$event_type = esc_attr($event_type);
$ac_icon = esc_attr($ac_icon);
$sortby = esc_attr($sortby);
$ac_theme = esc_attr($ac_theme);
$order = esc_attr($order);
$level = esc_attr($level);
$cats_id = esc_attr($ac_opencat);
$disable_parent = esc_attr($disable_parent);
$disable_aclink = esc_attr($disable_aclink);
if (!empty($instance['id'])) {
$widgetid = $instance['id'];
} else {
if ($sh_id != "") {
$widgetid = "wc_category_accordion-" . $sh_id;
} else {
$widgetid = "wc_category_accordion-" . $this->trwca_generate_random_code(3);
}
}
$instance_categories = get_terms('product_cat', '&parent=0&exclude=' . $exclude_tree . '');
if (is_array($instance_categories)) {
foreach ($instance_categories as $categories) {
$term_id[] = $categories->term_id;
$term_name = $categories->name;
}
}
if (!empty($post->ID)) {
$terms = get_the_terms($post->ID, 'product_cat');
} else {
$terms = "";
}
if (is_array($terms)) {
foreach ($terms as $term) {
$_cat = $term->term_id;
break;
}
}
/* For current category highlight */
if (is_product()) {
$current_cat = array();
$cat = $wp_query->get_queried_object();
if (!empty($cat->term_id)) {
$current_cat = $cat->term_id;
} else {
$_cat_id = "1";
if (isset($term->term_id)) {
$_cat = $term->term_id;
$_cat_id = !empty($_cat) ? $_cat_id = $_cat : $_cat_id = 1;
}
if (is_shop()) {
$_cat_id = "1";
}
if (!is_shop()) {
if (is_array($terms)) {
foreach ($terms as $term) {
$myterms[] = $term->term_id;
}
$cats_id = end($myterms);
?>
<script type="text/javascript">
var cats_id= <?php
return end($myterms);
?>;
</script>
<style type="text/css">
<?php
foreach ((get_the_terms($post->ID, 'product_cat')) as $term) {
$myterms = $term->term_id;
return 'ul.' . $widgetid . ' li.cat-item-' . $myterms . ' > a{font-weight:bold;}';
}
}
}
?>
</style>
<?php
}
}
$cat = $wp_query->get_queried_object();
if (!empty($cat->term_id) && !is_product()) {
$cats_id = $cat->term_id;
return '<script type="text/javascript">
var cats_id= ' . $cats_id . ';
</script>';
} else if (!is_product_category() && !is_product()) {
$cats_id = $ac_opencat;
}
$ac_type = $ac_type == "toggle" ? $ac_type = "true" : $ac_type = "false";
$open_cat = $open_cat == true || $open_cat == 'on' ? $open_cat = true : $open_cat = false;
/* Icon Selection */
switch ($ac_icon) {
case 'angle':
$open_icon = "angle-down";
$close_icon = "angle-right";
break;
case 'doubleangle':
$open_icon = "angle-double-down";
$close_icon = "angle-double-right";
break;
case 'arrow-circle1':
$open_icon = "arrow-circle-down";
$close_icon = "arrow-circle-right";
break;
case 'arrow-circle2':
$open_icon = "arrow-circle-o-down";
$close_icon = "arrow-circle-o-right";
break;
case 'arrow-right':
$open_icon = "arrow-down";
$close_icon = "arrow-right";
break;
case 'caret':
$open_icon = "caret-down";
$close_icon = "caret-right";
break;
case 'caret-square':
$open_icon = "caret-square-o-down";
$close_icon = "caret-square-o-right";
break;
case 'chevron':
$open_icon = "chevron-down";
$close_icon = "chevron-right";
break;
case 'chevron-circle':
$open_icon = "chevron-circle-down";
$close_icon = "chevron-circle-right";
break;
case 'hand':
$open_icon = "hand-o-down";
$close_icon = "hand-o-right";
break;
case 'plus':
$open_icon = "minus";
$close_icon = "plus";
break;
case 'plus-circle':
$open_icon = "minus-circle";
$close_icon = "plus-circle";
break;
case 'plus-square1':
$open_icon = "minus-square";
$close_icon = "plus-square";
break;
case 'plus-square2':
$open_icon = "minus-square-o";
$close_icon = "plus-square-o";
break;
}
if ($disable_aclink == true) {
$disable_aclink = 'true';
} else if ($disable_aclink == "") {
$disable_aclink = 'false';
}
if ($disable_parent == true) {
$disable_parent = 'true';
} else if ($disable_parent == "") {
$disable_parent = 'false';
}
$cats_id = empty($cats_id) ? 1 : $cats_id;
?>
<script type="text/javascript">
var $=jQuery.noConflict();
$(document).ready(function($){
$('.<?php
echo $widgetid;
?>').trwcAccordion({
classParent : 'trwca-parent',
classActive : 'active',
classArrow : 'trwca-icon',
classCount : 'trwca-count',
classExpand : 'trwca-current-parent',
eventType : '<?php
echo $event_type;
?>',
hoverDelay : 100,
menuClose : true,
cats_id: <?php
echo $cats_id;
?>,
ac_type : <?php
echo $ac_type;
?>,
autoExpand : true,
speed : '<?php
echo $ac_speed;
?>',
saveState : '<?php
echo $open_cat;
?>',
disableLink : <?php
echo $disable_aclink;
?>,
disableparentLink : <?php
echo $disable_parent;
?>,
auto_open: 1,
showCount : true,
widget_id : "<?php
echo $widgetid;
?>",
openIcon : '<?php
echo $open_icon;
?>',
closeIcon : '<?php
echo $close_icon;
?>',
});
});
</script>
<div class="block-content trwca-actheme <?php
echo $ac_theme;
?>">
<div class="trwca-loader"></div>
<ul class="<?php
echo $widgetid;
?> accordion" id="outer_ul">
<?php
$subcat_args = array(
'taxonomy' => 'product_cat',
'title_li' => '',
'orderby' => $sortby,
'order' => $order,
'depth' => $level,
'show_count' => $show_count,
'hide_empty' => $hide_empty,
'use_desc_for_title' => 1,
'echo' => false,
'exclude' => $exclude_tree,
'hierarchical' => true,
'show_option_none' => __('No Categories Found', 'trwca'),
'link_after' => '',
'walker' => new trwca_walker
);
$subcategories = wp_list_categories($subcat_args);
$subcategories = preg_replace_callback('/<\/a> \(([0-9]+)\)/', function($matches)
{
return ' <span class="count">(' . ($matches[1]) . ')</span></a>';
}, $subcategories);
if ($subcategories) {
echo $subcategories;
}
?>
</ul>
</div>
<?php
$contents=ob_get_contents();
ob_end_clean();
return $contents;
}
public function trwca_generate_random_code($length = 3)
{
$string = '';
$characters = "123456789";
for ($p = 0; $p < $length; $p++) {
$string .= $characters[mt_rand(0, strlen($characters) - 1)];
}
return $string;
}
/**
* admin_head
* calls your functions into the correct filters
* #return void
*/
function admin_head()
{
// check user permissions
if (!current_user_can('edit_posts') && !current_user_can('edit_pages')) {
return;
}
// check if WYSIWYG is enabled
if ('true' == get_user_option('rich_editing')) {
add_filter('mce_external_plugins', array(
$this,
'mce_external_plugins'
));
add_filter('mce_buttons', array(
$this,
'mce_buttons'
));
}
}
/**
* mce_external_plugins
* Adds our tinymce plugin
* #param array $plugin_array
* #return array
*/
function mce_external_plugins($plugin_array)
{
$plugin_array['WC_Category_Accordion'] = plugins_url('admin/js/mce-button.js', __FILE__);
return $plugin_array;
}
/**
* mce_buttons
* Adds our tinymce button
* #param array $buttons
* #return array
*/
function mce_buttons($buttons)
{
array_push($buttons, 'WC_Category_Accordion');
return $buttons;
}
/**
* admin_enqueue_scripts
* Used to enqueue custom styles
* #return void
*/
function admin_enqueue_scripts()
{
wp_enqueue_style('WC-Category-Accordion-sh', plugins_url('admin/css/mce-button.css', __FILE__));
}
public function wc_category_accordion_sc($atts, $content = null)
{
$defaults = array(
'show_count' => 0,
'ac_speed' => 'fast',
'exclude_tree' => '',
'hide_empty' => 0,
'sortby' => 'name',
'order' => 'ASC',
'level' => 0,
'event_type' => 'click',
'ac_type' => 'toggle',
'open_cat' => 0,
'ac_opencat' => 1,
'ac_icon' => 'plus',
'disable_parent' => 0,
'disable_aclink' => 0,
'ac_theme' => '',
'sh_id' => ''
);
$settings = shortcode_atts($defaults, $atts);
return $this->woocommerce_category_accordion_func($settings, false);
}
}
new trwca_wc_category_accordion();
function trwca_clean($var)
{
return sanitize_text_field($var);
}
}
?>