Code Embed

IMPORTANT: If updating from an earlier version of the plugin, please check the section named “Plugin Behaviour Changes”, below, for anything which could impact your existing set-up

Code Embed allows you to embed code (JavaScript, CSS and HTML – it can’t be used for server-side code, such as PHP) in a post, without the content being changed by the editor. This is incredibly useful for embedding third-party scripts, etc. The plugin is used by many large sites, including Mozilla.

Key features include…

• Add HTML or JavaScript to posts or pages – particularly useful for embedding videos!
• Embed in widgets using the Widget Logic plugin.
• Global embedding allows you to set up some code in one post or page and then access it from another.
• Modify the keywords or identifiers used for embedding the code to your own choice.
• Search for embedding code via a simple search option.
• Add a simple suffix to the embed code to convert videos to responsive output.
• Embed an external script directly using just the URL.
• Conforms to WCAG 2.1 AA standards.
• And much, much more!

Iconography is courtesy of the very talented Janki Rathod.

Please visit the Github page for the latest code development, planned enhancements and known issues.

Getting Started

To use this plugin, you need to have custom fields enabled on your site. If you’re using the block editor, you may need to switch this on first – please scroll down to the next section to learn how to do this. If you’re using the classic editor, then you’ll find the custom fields at the bottom of the editor screen.

Although this plugin works for both posts and pages, for simplicity I will simply refer to posts – bear in mind that pages work in the same way.

Once you have custom fields switched on, here’s how easy it is to use…

1. Once you have the plugin installed, start a new post.
2. Scroll down to the bottom of the screen and look for the “Custom Fields” section.
3. Under “Add New Custom Field”, enter a name of CODE1 and your embed code as the value.
4. In your post content, add {{CODE1}} where you wish the embed code to appear.

And that’s it – when the post is viewed or previewed, {{CODE1}} will be replaced with the code that you asked to be embedded.

This should get you started – for more information and advanced options, please see below. Alternatively, there’s a fantastic guide at Elftronix which I would recommend.

Using this plugin with the block editor (aka Gutenberg)

By default, custom fields are hidden inside the block editor but can be revealed.

1. Edit or create a post.
2. Click the settings button (three dots) in the top right-hand corner.
3. Go to Preferences.
4. Click the Panels tab.
5. You will find a button to toggle the ‘Custom Fields’ meta box – make sure this is toggled to “on”.
6. A button should appear titled “Enable & Reload” – you’ll need to click on that and wait for the page to reload before the custom fields will appear.

Read the full description on the official page →