A Shortcode Tester

“Show Rendered” shows more than the shortcode HTML elements.

“The Shortcode Tester” tries to hide HTML elements that are not part of the shortcode. It assumes that the current theme uses the standard WordPress framework for emitting the header, the content, sidebars and the footer ( actions/filters such as ‘the_content’, ‘get_sidebar’, ‘get_footer’, … ). If the current theme deviates from this framework “The Shortcode Tester” will not be able to properly identify the header, sidebars and/or the footer.

“Show Rendered” shows less than the shortcode HTML elements.

In addition to the HTML elements emitted by the PHP code for the shortcode, the shortcode may have JavaScript code to dynamically emit additional HTML elements. The shortcode tester hides non shortcode HTML elements by setting the CSS display property to none and changing the element id. These changes may affect the execution of the shortcode’s JavaScript code.

“Show Rendered” vs “Alt Show Rendered”

“Show Rendered” allows all JavaScript code to execute. Unfortunately, the shortcode tester hides non shortcode HTML elements and this may cause some JavaScript code to abort which prevents the execution of the shortcode’s JavaScript code. “Alt Show Rendered” suppresses the execution of the theme’s JavaScript code and this may allow the shortcode’s JavaScript code to execute.

Does “Show Rendered” require that the shortcode have support for Gutenberg blocks?

No. “Show Rendered” does not use Gutenberg blocks. It uses the WordPress server to render the shortcode as it would when the page is requested from the browser and tries to skip rendering everything but the shortcode. In particular, it will work with old plugins that do not have support for Gutenberg blocks.