How to fix WordPress Shortcode Output Before Content or Widget

If you are new to creating WordPress shortcodes, then you may have found this issue. In my early days, I got the same issue and after spending a lot of time on this, I found the solution.

Fix Shortcode Output Before Content or Widget Title

The only reason behind shortcode output before content or widget title is your shortcode callback function “echo-ing” output instead of “return-ing”.

To fix this, all you need to do is, Just check the callback function for your shortcode and use “return” to output instead of “echo”.

To understand better, Let’s see the examples below:


function diwp_our_twitter_link(){

	$output = '<a href="https://twitter.com/myuser">Follow us on Twitter</a>';

	echo  $output;

}

add_shortcode('twitter_link', 'diwp_our_twitter_link');

This will output the result above the page content or widget title, cause I am using echo to display the output.

So to fix this, Instead of using “echo”, I will use “return” to output like in the below code.


function diwp_our_twitter_link(){
	
	$output = '<a href="https://twitter.com/myuser">Follow us on Twitter</a>';	
	
	return $output;

}

add_shortcode('twitter_link', 'diwp_our_twitter_link');

Isn’t it super easy?… Obviously Yes.

Share it to the Community!

You May Also Like These shortcode Posts:

Leave a Reply

Your email address will not be published. Required fields are marked *