WordPress.org

Plugin Directory

Code Embed

Code Embed provides a very easy and efficient way to embed code (JavaScript and HTML) in your posts and pages.

Options Screen

In the administration menu there is a new settings option named "Code Embed".

Code embedding is performed via a special keyword that you must use to uniquely identify where you wish the code to appear. This consist of an opening identifier (some that that goes at the beginning), a keyword and then a closing identifier. You may also add a suffix to the end of the keyword if you wish to embed multiple pieces of code within the same post.

From this options screen you can specify the above identifier that you wish to use. By default the opening and closing identifiers are percentage signs and the keyword is CODE. During these instructions these will be used in all examples.

The options screen is only available to those that with a capability of able to manage options or greater. All the other Code Embed menu options are available to users with a capability to edit posts or greater.

Embedding

To embed in a post you need to find the meta box under the post named "Custom Fields". If this is missing you may need to add it by clicking on the "Screen Options" tab at the top of the new post screen.

Now create a new custom field with the name of your keyword - e.g. CODE. The value of this field will be the code that you wish to embed. Save this custom field.

Now, wherever you wish the code to appear in your post, simply put the full identifier (opening, keyword and closing characters). For example, %CODE%.

If you wish to embed multiple pieces of code within a post you can add a suffix to the keyword. So we may set up 2 custom fields named CODE1 and CODE2. Then in our post we would specify either %CODE1% or %CODE2% depending on which you wish to display.

Don't forget - via the options screen you can change any part of this identifier to your own taste.

URL Embedding

If you specify a URL within your post, surrounded by your choice of identifiers, then the contents of the URL will be embedded within your post.

Obviously, be careful when embedding a URL that you have no control over, as this may be used to hijack your post by injecting, for example, dangerous JavaScript.

For example, using the default options you could embed the contents of a URL using the following method...

%http://www.example.com/code.php%

or

%https://www.example.com/code.html%

Global Embedding

You can also create global embeds - that is creating one piece of embed code and using it in multiple posts or pages.

To do this simply make reference to an already defined (but unique) piece of embed code from another post or page.

So, let's say in one post you define a custom field named CODE1. You can, if you wish, place %CODE1% not just in that post but also in another and it will work.

However, bear in mind that the embed code name must be unique - you can't have defined it in multiple posts otherwise the plugin won't know which one you're referring to (although it will report this and list the posts that it has been used in).

In the administration menu there is a sidebar menu named "Tools". Under this is a sub-menu named "Code Search". Use this to search for specific embed names and it will list all the posts/pages that they're used on, along with the code for each.

Embedding in Widgets

Natively you cannot use the embed facilities within sidebar widgets. However, if you install the plugin Widget Logic then Code Embed has been set up to make use of this and add the ability.

  • Install Widget Logic and activate.
  • In Administration, select the Widgets page from the Appearance menu. At the bottom there will be a set of Widget Logic options.
  • Ensure Use 'widget_content' filter is ticked and press Save.

Although you cannot set up embed code within a widget you can make reference to it, for example by writing %CODE1% in the widget.

Responsive Output Conversion

Responsive output is where an element on a web page dynamically resizes depending upon the current available size. Most video embeds, for instance, will be a fixed size. This is fine if your website is also of a fixed size, however if you have a responsive site then this is not suitable.

Code Embed provides a simple suffix that can be added to an embed code and will convert the output to being responsive. This works best with videos.

To use, when adding the embed code onto the page, simply add _RES to the end, before the final identifier. For example, %CODE1_RES%. The _RES should not be added to the custom fields definition.

This will now output the embedded code full width, but a width that is dynamic and will resize when required.

If you don't wish the output to be full width you can specify a maximum width by adding an additonal _x on the end, where x is the required width in pixels. For example, %CODE1_RES_500% this will output CODE1 as responsive but with a maximum width of 500 pixels.

It should be noted that this is an experimental addition and will not work in all circumstances.

Licence

This WordPress plugin is licensed under the GPLv2 (or later).

Reviews & Mentions

"Works like a dream. Fantastic!" - Anita.

"Thank you for this plugin. I tried numerous other iframe plugins and none of them would work for me! This plugin worked like a charm the FIRST time." - KerryAnn May.

Embedding content - WSD Blogging Server.

Animating images with PhotoPeach - Cómo hago.

Requires: 3.3 or higher
Compatible up to: 4.2.3
Last Updated: 2015-6-8
Active Installs: 10,000+

Ratings

5 out of 5 stars

Support

3 of 3 support threads in the last two months have been resolved.

Got something to say? Need help?

Compatibility

+
=
Not enough data

0 people say it works.
0 people say it's broken.

100,1,1
100,1,1
100,1,1
100,2,2 100,1,1 100,1,1
100,1,1
100,1,1
100,1,1
50,2,1
100,1,1
100,1,1
100,1,1 100,1,1
100,2,2 100,1,1
100,1,1
0,1,0
0,1,0
100,1,1