The fourth part of our seven-part series on WordPress shortcodes features the ‘[ embed ]’ shortcode (you can read Part 1 – Introduction to Shortcodes, 2 – Audio Shortcode and 3 – Caption Shortcode). This is a relatively easy shortcode to use for the purposes of embedding objects in a page or post at a fixed position. The advantage of embedding is that the chosen object remains unaffected – at least in terms of position – by web browsers that may not handle responsive design very well.
For example, you might want to embed an image that is unique to the text that surrounds it. The effect of that image may be lost if a mobile web browser places it at the end of the text rather than where you intended it to be. Embedding solves that problem. Using this shortcode fixes your object in place and, if necessary, wraps around it to account for differences in browsers and screen sizes.
Using the Code
Among all of the shortcodes we have discussed thus far, [ embed ] is the simplest to use. The best way to insert the code is to do so in text mode. So open your page or post in the editor, then click the ‘Text’ tab in the right corner to reveal the post’s underlying code. Decide where you want your embedded object and insert your shortcode. Below is an example taken from the WordPress documentation to illustrate setting height and width with ‘[ embed ]’:
[ embed width="123" height="456" ]your_embedded_media[ /embed ]
If you don’t want to set any parameters, you can simply enter the [ embed ] and [ /embed ] shortcodes on either side of your embedded object. For instance, let us assume that you inserted an image using the WYSIWYG editor. That image shows up as code in the Text editor. You should be able to find it by looking for the ‘image src’ tag relating to your image.
Just place the [ embed ] shortcode on either side of that line and your image will be locked in that position.
‘[ embed ]’ shortcode Parameters
As always, the [ embed ] shortcode supports different parameters. In this case, there are only two:
- width – establishes the width of the embedded media; the default is set to none
- height – establishes the height of the embedded media; the default is also set
It is not necessary to use either one of these parameters just to use the ‘[ embed ]’ shortcode. The only time this would be helpful is a situation in which the default size of your embedded object is too large or small for your liking. If you do not have a second copy in the correct size, you can use these parameters to scale the object up or down as needed.
There is no need to modify the default code associated with [ embed ] either. But if you want to do so, or you are just curious about how it’s built, you can find it in the wp-includes/class-wp-embed.php file. Just remember to make a backup copy of this file before you start poking around. That way you’ll be able to restore the original file if any damage is done.