David Artiss

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…
<ul>
<li>Add HTML or JavaScript to posts or pages – particularly useful for embedding videos!</li>
<li>Embed in widgets using the <a href="https://wordpress.org/extend/plugins/widget-logic/" title="Widget Logic" rel="ugc">Widget Logic</a> plugin</li>
<li>Global embedding allows you set up some code in one post or page and then access it from another</li>
<li>Modify the keywords or identifiers used for embedding the code to your own choice</li>
<li>Search for embedding code via a simple search option</li>
<li>Add a simple suffix to the embed code to convert videos to responsive output</li>
<li>Embed an external script directly using just the URL</li>
<li>And much, much more!</li>
</ul>
Iconography is courtesy of the very talented <a href="https://www.fiverr.com/jankirathore" rel="nofollow ugc">Janki Rathod</a>.
Please visit the <a href="https://github.com/dartiss/code-embed" title="Github" rel="nofollow ugc">Github page</a> for the latest code development, planned enhancements and known issues
<h3>Getting Started</h3>
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…
<ol>
<li>Once you have the plugin installed start a new post.</li>
<li>Scroll down to the bottom of the screen and look for the “Custom Fields” section.</li>
<li>Under “Add New Custom Field” enter a name of <code>CODE1</code> and your embed code as the value</li>
<li>In your post content add <code>{{CODE1}}</code> where you wish the embed code to appear.</li>
</ol>
And that’s it – when the post viewed or previewed <code>{{CODE1}}</code> 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 <a href="http://www.elftronix.com/free-easy-plugin-add-javascript-to-wordpress-posts-pages/" title="Free Easy Plugin! Add Javascript to WordPress Posts & Pages" rel="nofollow ugc">Elftronix</a> which I would recommend.
<h3>Using this plugin with the block editor (aka Gutenberg)</h3>
By default, custom fields are hidden inside the block editor but can be revealed.
<ol>
<li>Edit or create a post</li>
<li>Click the settings button (three dots) in the top, right-hand corner</li>
<li>Go to Preferences</li>
<li>Click the Panels tab</li>
<li>You will find a button to toggle the ‘Custom Fields’ meta box – make sure this is toggled to “on”</li>
<li>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</li>
</ol>
Check out the screenshots for how the custom fields should look.
<h3>I can’t find the custom fields</h3>
For block editor users, I’m assuming you’ve done the above. For classic editor users, the custom fields should be present by default. In all cases they should appear at the bottom of the editor screen.
From version 2.4, anyone without the “unfiltered HTML” capability won’t be able to see custom fields, for added security. Please see the section “Custom Field Security”, below, for more details.
If none of the above applies then you may have a theme or plugin that removes this or may have a problem with your WordPress installation – you will need to try the usual diagnostics to try and resolve this, including requesting help on <a href="https://wordpress.org/support/forum/how-to-and-troubleshooting/" title="Fixing WordPress Forum" rel="ugc">the WordPress support forum</a>.
Please bear in mind that the custom fields functionality is part of WordPress so it would be greatly appreciated if you don’t give me poor reviews in this situation as, I say, this component is not part of this plugin but, by using it, keeps this plugin simple to use and bloat-free 🙂
<h3>The Code Embed Options Screen</h3>
Whilst in WP Admin, if you go to Settings -> Code Embed, you’ll be able to access the options that are available for this plugin.
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>CODE</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.
<h3>How to Embed Code</h3>
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>CODE</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>{{CODE}}</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 <code>CODE1</code> and <code>CODE2</code>. Then in our post we would specify either <code>{{CODE1}}</code> or <code>{{CODE2}}</code> 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.
<h3>How to Embed Code from an External URL</h3>
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…
<pre><code>{{http://www.example.com/code.php}}
</code></pre>
or
<pre><code>{{https://www.example.com/code.html}}<h3>How to Use Global Embedding</h3>
</code></pre>
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 <code>CODE1</code>. You can, if you wish, place <code>{{CODE1}}</code> 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.
<h3>Embedding in Widgets</h3>
Natively you cannot use the embed facilities within sidebar widgets. However, if you install the plugin <a href="https://wordpress.org/extend/plugins/widget-logic/" title="Widget Logic" rel="ugc">Widget Logic</a> then Code Embed has been set up to make use of this and add the ability.
<ul>
<li>Install <a href="https://wordpress.org/extend/plugins/widget-logic/" title="Widget Logic" rel="ugc">Widget Logic</a> and activate.</li>
<li>In Administration, select the Widgets page from the Appearance menu. At the bottom there will be a set of Widget Logic options.</li>
<li>Ensure Use ‘widget_content’ filter is ticked and press Save.</li>
</ul>
Although you cannot set up embed code within a widget you can make reference to it, for example by writing <code>{{CODE1}}</code> in the widget.
<h3>Responsive Output Conversion</h3>
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 <code>_RES</code> to the end, before the final identifier. For example, <code>{{CODE1_RES}}</code>. The <code>_RES</code> 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 additional <code>_x</code> on the end, where <code>x</code> is the required width in pixels. For example, <code>{{CODE1_RES_500}}</code> this will output <code>CODE1</code> 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.
<h3>Embedding in excerpts</h3>
By default embed code will not appear in excerpts. However, you can switch this ability on via the Code Embed options screen. If you do this then the standard rules of excerpts will still apply, but now once the code embed has applied – for example, excerpts are just text, a specific length, etc.
<h3>Filtering of code</h3>
By default, WordPress allows unfiltered HTML to be used by users in post custom fields, even if their role it set up otherwise. This opens up the possibility of leaving a site vulnerable, if any plugins that uses this data doesn’t check it appropriately.
“Out of the box”, neither the contributor and author roles have unfiltered HTML capabilities but can access custom post fields.
As this plugin requires the use unfiltered HTML, we need to ensure that the only users who use it, should be using it. From version 2.5, any users without this permission that update a post containing embeds from this plugin will cause the code to be filtered.
<h3>Reviews & Mentions</h3>
“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.
<a href="http://wsdblog.westbrook.k12.me.us/blog/2009/12/24/embedding-content/" title="Embedding content" rel="nofollow ugc">Embedding content</a> – WSD Blogging Server.
<a href="http://comohago.conectandonos.gov.ar/2009/08/05/animando-imagenes-con-photopeach/" title="Animando imágenes con PhotoPeach" rel="nofollow ugc">Animating images with PhotoPeach</a> – Cómo hago.

Code Embed

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

Space X-Chimp

An easy to use, with intuitive interface, WordPress plugin that gives you the ability to easily and safely add your custom code (PHP, HTML, CSS, JavaScript, etc.) to your WordPress website, directly out of the WordPress Admin Area, without the need to have an external editor.
This is a simple and perfect tool to use as your website’s functionality plugin. This is a must have tool for authors and website’s owners. Its purpose is to provide a familiar experience to WordPress users. There is no need for any more editing of the files of your theme or plugins for to add custom code (PHP, HTML, CSS, JavaScript, etc.). Just add your custom code in the field on the plugin page and this plugin will do the rest for you. It will automatically add your custom code to the desired section of your website, without changing any of your theme files and without slowing down your website.
The plugin works completely independently of the theme, so you can use it with any theme. The code you place on the plugin page will be entirely unaffected if you edit the contents of the theme’s files, or even completely change the theme. This is really useful in case of updating theme or plugins, because your custom code would never be overwritten. Your custom code will keep on working, no matter how many times you upgrade or switch your theme and plugins.
On the plugin page you find the code editor powered by CodeMirror. This code editor has options such as syntax highlighting, line numbering, and more. And if you want more options, let us know and we will be happy to add them.
Features
<ul>
<li>Lightweight and fast</li>
<li>Secure code with using clear coding standards</li>
<li>Intuitive interface</li>
<li>Cross browser compatible (work smooth in any modern browser)</li>
<li>Compatible with all WordPress themes</li>
<li>RTL compatible (right to left)</li>
<li>Translation ready</li>
</ul>
Key features include
<ul>
<li>Insert custom PHP/HTML/CSS/JS code into the site</li>
<li>Checks the entered code for fatal errors</li>
<li>Easy disable option for WSOD</li>
<li>Ability to temporarily disable all custom PHP/CSS code</li>
<li>Code syntax highlighting</li>
<li>Line numbering</li>
<li>Active line highlighting</li>
<li>Editor allow for Tab indentation</li>
<li>And much, much more!</li>
</ul>
PRO features include
<ul>
<li>CSS minifier</li>
<li>Manage which HTML/CSS/JS code load on HEAD or FOOTER</li>
<li>Controlling the priority of loading HTML/CSS/JS code</li>
<li>Ability to easily customize the code editor by selecting the desired settings</li>
<li>64 themes for syntax highlighting</li>
<li>Toolbar with useful buttons, such as Undo, Redo, etc.</li>
<li>Ability to use shortcut keys (both Mac and PC) for Search, Replace, etc.</li>
<li>Unlimited number of fields for snippets</li>
<li>Automatic backup of all snippets to a downloadable text file</li>
<li>Separate activation and deactivation of snippets</li>
<li>No ads on the settings page</li>
<li>Well documented</li>
</ul>
<a href="https://www.spacexchimp.com/plugins/custom-code-manager-pro.html" rel="nofollow ugc">Get the PRO version now!</a>
Supported languages
<ul>
<li>PHP</li>
<li>HTML</li>
<li>CSS</li>
<li>JavaScript</li>
</ul>
Translation
This plugin is ready for translation and has already been translated into several languages. But If your language is not available then you can make one. It is also possible that not all existing translations are up-to-date or correct, so you are welcome to make corrections. Many of plugin users would be delighted if you share your translation with the community. Thanks for your contribution!
<ul>
<li>English (default)</li>
<li>Russian (translation by <a href="https://www.instagram.com/milava_kiseleva/" rel="nofollow ugc">Milena Kiseleva</a>)</li>
<li>German (translation by Michael)</li>
<li>Polish (translation by Paweł K.)</li>
<li>Chinese-Taiwan (translation by Gordon Yu)</li>
<li>Spanish (translation by Ramiro Garcés and Patricio Toledo)</li>
<li>Dutch (translation by Peter Leenders)</li>
<li>French (translation by Jean-Michel, Theophil Bethel and Hervé Bouzin)</li>
</ul>
If you want to help translate this plugin, please visit the <a href="https://translate.wordpress.org/projects/wp-plugins/custom-code-manager" rel="nofollow ugc">translation page</a>.
Minimum system requirements:
<ul>
<li><a href="https://wordpress.org">WordPress</a> version 4.9 or higher.</li>
<li><a href="https://secure.php.net" rel="nofollow ugc">PHP</a> version 5.6 or higher.</li>
<li><a href="https://www.mysql.com" rel="nofollow ugc">MySQL</a> version 5.0 or higher.</li>
</ul>
Recommended system requirements:
<ul>
<li><a href="https://wordpress.org">WordPress</a> version 5.0 or higher.</li>
<li><a href="https://secure.php.net" rel="nofollow ugc">PHP</a> version 7.0 or higher.</li>
<li><a href="https://www.mysql.com" rel="nofollow ugc">MySQL</a> version 5.6 or higher.</li>
</ul>
Contribution
Developing plugins is long and tedious work. If you benefit or enjoy this plugin please take the time to:
<ul>
<li><a href="https://www.spacexchimp.com/donate.html" rel="nofollow ugc">Donate</a> to support ongoing development. Your contribution would be greatly appreciated.</li>
<li><a href="https://wordpress.org/support/plugin/custom-code-manager/reviews/#new-post">Rate and Review</a> this plugin.</li>
<li><a href="https://www.spacexchimp.com/contact.html" rel="nofollow ugc">Share with us</a> or view the <a href="https://github.com/ArthurGareginyan/custom-code-manager" rel="nofollow ugc">GitHub Repo</a> if you have any ideas or suggestions to make this plugin better.</li>
</ul>
“Custom Code Manager” is one of the own software projects of <a href="https://www.spacexchimp.com" rel="nofollow ugc">Space X-Chimp</a>.
License
This plugin is licensed under the <a href="http://www.gnu.org/licenses/gpl-3.0.html" rel="nofollow ugc">GNU General Public License, version 3 (GPLv3)</a> and is distributed free of charge. 
Commercial licensing (e.g. for projects that can’t use an open-source license) is available upon request.
Credits
<ul>
<li>The icon of this plugin is a copyrighted image created by the <a href="https://www.spacexchimp.com" rel="nofollow ugc">Space X-Chimp</a> team. (C) All rights reserved.</li>
<li>The banner of this plugin is a copyrighted image created by the <a href="https://www.spacexchimp.com" rel="nofollow ugc">Space X-Chimp</a> team. (C) All rights reserved.</li>
<li>Unless otherwise stated, all images are created by the <a href="https://www.spacexchimp.com" rel="nofollow ugc">Space X-Chimp</a> team and are copyrighted. (C) All rights reserved.</li>
<li><a href="https://codemirror.net/" rel="nofollow ugc">CodeMirror</a> is an open-source project shared under the <a href="https://codemirror.net/LICENSE" rel="nofollow ugc">MIT license</a>.</li>
<li><a href="http://getbootstrap.com" rel="nofollow ugc">Bootstrap</a> by Twitter, Inc. released under the <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" rel="nofollow ugc">MIT license</a>.</li>
<li><a href="https://github.com/vsn4ik/bootstrap-checkbox" rel="nofollow ugc">Bootstrap-checkbox</a> is a project of <a href="https://github.com/vsn4ik" rel="nofollow ugc">Vasily A.</a>, shared under the <a href="https://github.com/vsn4ik/bootstrap-checkbox/blob/master/LICENSE" rel="nofollow ugc">MIT license</a>.</li>
<li><a href="https://fontawesome.com" rel="nofollow ugc">Font Awesome</a> is an open source-project created by Dave Gandy. Font released under the <a href="http://scripts.sil.org/OFL" rel="nofollow ugc">SIL OFL 1.1 license</a>. Code released under the <a href="http://opensource.org/licenses/mit-license.html" rel="nofollow ugc">MIT License</a>.</li>
</ul>
Links
<ul>
<li><a href="https://www.spacexchimp.com" rel="nofollow ugc">Developer website</a></li>
<li><a href="https://github.com/ArthurGareginyan/custom-code-manager" rel="nofollow ugc">Dedicated plugin page on GitHub</a></li>
<li><a href="https://wordpress.org/plugins/custom-code-manager/">Dedicated plugin page on WordPress.org</a></li>
<li><a href="https://www.spacexchimp.com/plugins/custom-code-manager-pro.html" rel="nofollow ugc">Premium Version</a></li>
</ul>

Custom Code Manager

Easily and safely add your custom code (PHP, HTML, CSS, JavaScript, etc.) to your WordPress website, directly out of the WordPress Admin Area, without …

Code Embed vs Custom Code Manager