Widget content turns up before title

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;