Search code examples
wordpressfunctionshortcode

Wordpress Shortcode: Causing page editor to autoload preview

Very odd issue I am having. I add the following code to just add a test shortcode to my Wordpress functions.php.

//TEST SHORTCODE
add_shortcode( 'sc_brandon_test', 'brandon_test' );
function brandon_test(){
echo 'Brandon\'s Test Shortcode file works correctly!';
}

When using the shortcode [sc_brandon_test] in the editor the page will auto-redirect to a broken preview of the page I am trying to edit.

Any thoughts would be very appreciated.

Solution

  • Usually you don't echo your shortcode output directly but use a return. echo would output your content immediately.

    The desired behaviour is to parse the shortcode output within your main content loop e.g calling the_content() or
    apply_filters('the_content', get_post_field('post_content', $post_id));

    add_shortcode( 'sc_brandon_test', 'brandon_test' );
function brandon_test(){
   $output = 'Brandon\'s Test Shortcode file works correctly!';
   return $output;
}

    I recommend these guides
    WordPress Scholar: WordPress Shortcodes
    smashing magazine: WordPress Shortcodes: A Complete Guide