At times you may need to wrap items within the WordPress text editor with multiple div tags in order to achieve some type of styling effect. Adding these additional div tags to the text editor can make things difficult for a client to maintain. One option is to wrap items with enclosing shortcodes that will supply the necessary div tags. Enclosing shortcodes have an opening and closing shortcode that accepts content between the shortcodes.
A Working Example of Enclosing Shortcodes
The following is an example of using enclosing shortcodes to wrap a Vimeo video iframe embed code with some necessary div tags in order to style the videos to be responsive.
The name of the short code is responsive-video. The width is an attribute that controls the size of the video in pixels; if no width is supplied, the video size will default to 500px. Below is an example of the shortcodes that would be placed in the text editor.
[responsive-video width=”500″]Embed Code Here[/responsive-video]