How are you sending the output of your shortcode?
One thing that most people (me included) get wrong when they start off with shortcodes is just echo‘ing out the content, and that’s not the way to do it.
All content form a shortcode msut be returned at the end of the shortcode, and then the content will be in the right place. If you use echo it will putput the shortcodes content before any content in the page.
As an example…
function shortcode_example ($atts = array (), $content = '') {
$html = '<p>This is my shortcode content.</p>';
return $html;
}
AH HAH!
So essentially, a shortcode is considered a function with a return value. As you correctly guessed, I assumed it simply jumped into my code when it encountered the shortcode and started spewing out whatever it found.
Actually, this works great as I was planning on templating the output. Having it in one concise location for the return value will make that much easier.
Thanks for the quick reply!
Welcome to coding WP 😀 I think everyone who’s ever tried to create a shortcode has made the same error. You’re in good company. The results of that mistake are really mystifying unless you know what’s going on. And if knew what’s going on, you wouldn’t make that mistake!
This next bit is horribly pedantic, but I think accurate understanding is important. A “shortcode” is actually the part in post content delimited by [square-brackets]. When you create a shortcode, you write a handler or callback function. So in a way a shortcode is a function, not just considered one. But technically, the actual shortcode is not anything as far as PHP is concerned, it’s the callback related to a shortcode that’s a function, not the shortcode itself.
If that makes no sense, no matter, it’s just terminology, don’t worry about it. What’s useful to know is what is actually going on. When a template calls the_content() or one of its close relatives to output post content, part of what happens is a line similar to:
apply_filters('the_content', $post->post_content );
WP automatically hooks do_shortcode() into this filter hook by default. What do_shortcode() does is go through all registered shortcodes and attempts to match each one to something inside [square-brackets] that occurs in post content. preg_match_all() is used to do this. Anytime a match is found, the callback function associated with that particular shortcode is called. Whatever the callback function returns is then used to replace the shortcode tag that was found in the post content.
When you mistakenly echo out content from a shortcode handler, this occurs when do_shortcode() is processing the content, which is somewhat before the final, fully processed content is output. The result is the mistakenly echoed content ends up occurring before the post content in the visitor’s browser instead of within the content like it is supposed to be.
None of this is anything you really need to know, but if you’re like me, understanding what’s going on is very helpful.
