A few simple shortcodes to style or add classes to content in a way that won't be broken by the visual editor.
Shortcodes are a handy way to insert content into a WordPress page or post in a way that it won’t be broken by the visual editor.
I frequently use shortcodes to insert iframe links, blockquote tags or to temporarily hide content.
The shortcodes in the plugin below do not add any styling – that is up to the theme developer.
The code demonstrates how to use the $atts, $content and $code parameters that are passed to the shortcode function. For some of the shortcodes these parameters are not required. Also, the shortcodes are all handled one function with a ‘case‘ statement – this is why the $code parameter is needed.
clear: Returns a ‘p’ tag with a class of ‘clear’. Themes often use this class for float clearing so you may not need any additional CSS.
hide: This returns an empty string as it is used to hide content. I have used to this add comments to pages to help other maintainers.
code: This returns the content in ‘pre‘ tag. Useful for presenting code (though I use gist and embed a link).
blockquote: Returns the content in a ‘blockquote‘ tag. The ‘id‘ and ‘class‘ can be specified e.g. [ blockquote id=”bq_id” class=”big left top”]This will be in the blockquote[/blockquote]
iframe: Returns the content in a ‘iframe‘ tag. The ‘src‘, ‘height‘, ‘width‘ and ‘frameborder‘ can be specified as attributes to the shortcode, though defaults are provided for for height/width/frameborder.
todo: Return the shortcode content in a ‘div‘ with a class matching the shortcode used e.g. <div class=”success”>This is the shortcode content</div>.
todo-span: Similar to the error/notice/etc shortcode but returns the content in a ‘span‘ e.g. <span class=”success-span”>This is the shortcode content</div>.
private-info: Returns the shortcode content if the user is logged in, otherwise returns an empty string. This is a very simple way to hide content from users until they are logged in.
Here is the code: