Title: Stop shortcodes loading first
Last modified: October 28, 2016

---

# Stop shortcodes loading first

 *  [datainterlock](https://wordpress.org/support/users/datainterlock/)
 * (@datainterlock)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/stop-shortcodes-loading-first/)
 * Working on a new plugin and ran into a problem.
 * I’m using a shortcode that displays some html. I inserted it into a page and 
   all works fine. Then, I tried to place an image above it. The shortcode html 
   loads before the image.
 * Is there any ‘sane’ way to stop this. I’ve seen one confusing method and heard
   about some god awful regex method.
    -  This topic was modified 9 years, 7 months ago by [datainterlock](https://wordpress.org/support/users/datainterlock/).

Viewing 3 replies - 1 through 3 (of 3 total)

 *  [catacaustic](https://wordpress.org/support/users/catacaustic/)
 * (@catacaustic)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/stop-shortcodes-loading-first/#post-8366073)
 * 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;
       }
       ```
   
 *  Thread Starter [datainterlock](https://wordpress.org/support/users/datainterlock/)
 * (@datainterlock)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/stop-shortcodes-loading-first/#post-8368074)
 * 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!
 *  Moderator [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * (@bcworkz)
 * [9 years, 7 months ago](https://wordpress.org/support/topic/stop-shortcodes-loading-first/#post-8368463)
 * 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.

Viewing 3 replies - 1 through 3 (of 3 total)

The topic ‘Stop shortcodes loading first’ is closed to new replies.

## Tags

 * [shortcode](https://wordpress.org/support/topic-tag/shortcode/)

 * In: [Hacks](https://wordpress.org/support/forum/plugins-and-hacks/hacks/)
 * 3 replies
 * 3 participants
 * Last reply from: [bcworkz](https://wordpress.org/support/users/bcworkz/)
 * Last activity: [9 years, 7 months ago](https://wordpress.org/support/topic/stop-shortcodes-loading-first/#post-8368463)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics