While browsing WordPress support forums, I often see threads where users are asking the question ‘Why my shortcode output jumps to the top of the page content?’. Users asking this question are using a shortcode which outputs something and instead of appearing at the exact position where shortcode is placed, their shortcode output appears above rest of the post content.
The problem is actually very simple. The function executed by shortcode should return the output instead of echoing it.
Example of a shortcode using echo to display output:
[php]
function bad_shortcode_function($atts, $content = null) {
echo ‘<p>This is the output of shortcode</p>’;
}
add_shortcode(‘bad-shortcode’, ‘bad_shortcode_function’);
[/php]
The code displayed above would echo the given output but when you add more content to the post or page where shortcode is placed this echo will not appear where the shortcode is placed. The correct way to use shortcodes is to use return. Like this:
[php]
function good_shortcode_function($atts, $content = null) {
$string = ‘<p>This is the output of shortcode</p>’;
return $string;
}
add_shortcode(‘good-shortcode’, ‘good_shortcode_function’);
[/php]
Now if you want to output multiple lines of HTML you can add multiple lines to your output string like this:
[php]
function good_shortcode_function($atts, $content = null) {
$string = ‘<p>This is the output of shortcode</p>’;
$string .= ‘<p>This is the second line of output appended to the first string</p>’;
$string .= ‘<p>And the third line</p>’;
return $string;
}
add_shortcode(‘good-shortcode’, ‘good_shortcode_function’);
[/php]
Hopefully this will help some new plugin developers and WordPress users who are trying their hands on shortcode for the first time. PS: if you recently worked on some awesome shortcode, please feel free to share the snippet below.
There are many echos in my code. How to find the correct one. I am confused.
Thanks for this. Rookie error that can consume hours of troubleshooting time, and it did!
I have learned something today.
Dude, I love you. Thank you!
Helps me a lot! The ob_start trick is awesome!
but how a return multiple values from loop in wordpress or php. if we concatinate all values in a string and return it outside the loop it only shows the last result instead of showing all results.
Hey, hoping for a little help. Very new to this stuff. I am using a shortcode that I want to embed into a wordpress page from the “email newsletter” plugin. I understand that I need to use the return function to keep the shortcode from appearing at the top of the page, but I have no idea how to actually do that.
This is the shortcode I am working with. – [email-newsletter-plugin]
It seems I need to include the output of the code and such, but once again I’m not sure where to find that or how to do it.
Any help would be greatly appreciated!!!
Landon, to fix this you will need to edit the plugin. Editing the plugin is not recommended. Because when you update the plugin, it will override your changes. You need to contact the plugin author and tell them that their shortcode has this problem that needs to be fixed. You can locate the problem in the plugin file
email-newsletter.phplook for the shortcodeemail-newsletter-pluginin the source.Nice tip, I ran into this as well the first time I wrote a shortcode! Here’s a quick way to capture HTML output in a variable so you don’t have to worry about escaping quotes in your HTML code:
Output any of your code here, including
<?php
// Capture the output in a variable
$output = ob_get_clean();
I find this a bit easier when printing a lot of HTML output.
The code code a bit mangled in the comments, so let’s try that again:
<?php
ob_start();
?>
<h1>Output any of your code here, including <?php echo $variables; ?></h1>
<?php
// Capture the output in a variable
$output = ob_get_clean();
Thanks Nate for adding this, it is very useful.
The ob_start() trick works like a charm. Thank you very much.
I am a beginner at wordpress and this saved tons of my time. Thanks a lot!!!