Widget content turns up before title

Question

I've recently been trying to create a 'Popular Products' widget for for WP e-Commerce. Since there isn't built-in functionality, I referred to Dave Mackintosh's post here and gave it a shot.

Still no success. But since there's a shortcode, I decided to use the 'Shortcodes in Widgets' plugin and place the shortcode in a text widget. It works now, but the issue now is the product list appears outside the widget area, just floating in the sidebar.

Have a look at http://goo.gl/ENuW3 and you will notice that 'Test Product 1' appears above the 'Top Downloads' widget when it should be within.

Anyway, if anyone has any idea how I can fix this, I'd appreciate it very much. Thanks!

p.s. Sorry for using a link shortener. Apparently I can't use a numeric domain. My test server is on EC2 (free tier with elastic IP). I'm a cheapskate :)

Answer 1

This behavior is being caused most likely because something in the shortcode function that is causing unstable behavior. I recently just had the same issue with something I was working on.

From the WordPress Codex for "Add ShortCode" there's a note tucked down near the bottom of the page:

Note that the function called by the shortcode should never produce output of any kind. Shortcode functions should return the text that is to be used to replace the shortcode. Producing the output directly will lead to unexpected results. This is similar to the way filter functions should behave, in that they should not produce expected side effects from the call, since you cannot control when and where they are called from.

From the example hack that you referenced there are echo calls within the shortcode function. Basically what's happening is that those echo commands are being called before the Widget header script.

The way to fix this is to pass all echo calls in the function to a variable and then add a return statement at the very end of the function.

return $html;