Examples – Simple Embeds

At the most basic level, an embed simply replaces a short tag (called a shortcode in WordPress) with a string of text or HTML. For example, if you want to define your own set of cool emoticons to use in your blog, you can use embeds to avoid all that cutting and pasting of <img> HTML tags you would normally have to do.

On this page I have defined the following custom fields:

 Name: [smile]
Value: <img style="width:16px;height:16px;vertical-align:text-bottom;"
            src="//moztools.com/wp-content/uploads/sites/4
            /2010/11/em-smile.png"/>

 Name: [sad]
Value: <img style="width:16px;height:16px;vertical-align:text-bottom;"
            src="//moztools.com/wp-content/uploads
            /sites/4/2010/11/em-sad.png"/>

 Name: [blush]
Value: <img style="width:16px;height:16px;vertical-align:text-bottom;"
            src="//moztools.com/wp-content/uploads
            /sites/4/2010/11/em-smile.png"/>

(Note, the square brackets [] around each name must be included when adding a local embed to a post’s custom field, and the CSS style attributes are there to ensure the icons show up aligned with the text at the desired size.)

Now I can use the embeds in the post merely by using the tags or shortcodes I defined, like this:

Winning makes me happy [smile], but losing makes me sad [sad], and
I am not embarrassed to say it (well maybe just a little bit [blush]).

And the result when I publish my post is as follows:

Winning makes me happy , but losing makes me sad , and I am not embarrassed to say it (well maybe just a little bit ).

If I want to use these embeds in any post or page on the blog, I would create them as global embeds on the Embeds settings page. The names and values would be identical (except that you do not need the square brackets around the names).