Artiss Code Embed

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

Description

Artiss Code Embed (formally Simple Code Embed) allows you to embed code - JavaScript and HTML primarily - in a post. This is incredibly useful for embedding video, etc, when required and is used, amongst other, by Mozilla. It cannot be used for server side code, such as PHP.

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 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
  • Fully internationalized ready for translations. If you would like to add a translation to his plugin then please contact me.

Here's how easy it is...

  1. Once you have the plugin installed start a new post or page.
  2. In the Custom Fields meta box enter a name of CODE1 and your embed code as the value. Save this.
  3. In your post add %CODE1% where you wish the embed code to appear.

And that's it - when the post or page is viewed %CODE1% will be replaced with the code that you asked to be embedded.

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.

Options Screen

In the administration menu there is a new sidebar menu named "Code Embed". Under this is a sub-menu named "Options".

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 "Code Embed". Under this is a sub-menu named "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 Artiss 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.

Artiss 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.

Installation

  1. Upload the entire simple-code-embed folder to your wp-content/plugins/ directory.
  2. Activate the plugin through the 'Plugins' menu in WordPress.
  3. Under the Settings section of the administration menu there should now be a new option named "Code Embed". Select this option to set the default options.
  4. Add the identifier code to the appropriate posts and pages where you wish the code to be embedded.

Frequently Asked Questions

My code doesn't work

If your code contains the characters ]]> then you'll find that it doesn't - WordPress modifies this itself.

What's the maximum size of the embed code that I can save in a custom field?

WordPress stores the custom field contents in a MySQL table using the longtext format. This can hold over 4 billion characters.

Which version of PHP does this plugin work with?

It has been tested and been found valid from PHP 4 upwards.

Please note, however, that the minimum for WordPress is now PHP 5.2.4. Even though this plugin supports a lower version, I am not coding specifically to achieve this - therefore this minimum may change in the future.

Changelog

2.0.2

  • Enhancement: Fixed minor XSS vulnerability (kindly reported by Mozilla)
  • Enhancement: Shows README appropriate to the current installed version, instead of the latest

2.0.1

  • Enhancement: Removed restriction on embed code length

2.0

  • Maintenance: Removed dashboard widget
  • Maintenance: Further code tidying
  • Maintenance: Added new code for contextual help to use new WP 3.3 elements
  • Enhancement: New admin menu option, under which existing option screens now exist along with a support screen. If you have the README Parser plugin installed then it will also add a sub-menu displaying README instructions
  • Enhancement: Added internationalization to code
  • Enhancement: Will now work with widgets if you install the plugin Widget Logic
  • Enhancement: Added experimental ability to convert to responsive output
  • Enhancement: Added option to specify a URL instead of an embed code
  • Enhancement: Added feature pointer for when plugin is activated

1.6.1

  • Bug: Fixed bug where name of plugin folder was incorrect

1.6

  • Maintenance: Improved code further from 1.5, including seperating code into seperate includes
  • Enhancement: Added global embeds option
  • Enhancement: New tools option in the administration menu which allows you to search for code embeds

1.5.1

  • Enhancement: Added form security

1.5

  • Maintenance: Renamed plugin to bring in line with new plugin conventions
  • Maintenance: Plugin re-write to create more efficient code - can now also completely personalise the embed code used in the post
  • Maintenance: PHPDoc used throughout for documentation purposes, plus new coding standards
  • Maintenance: Instructions completely re-written
  • Enhancement: Support information improved, including contextual help on the settings screen (if supported) versions of this plugin

1.4.1

  • Bug: Version details as HTML comments were being output whether an embed existed or not - corrected

1.4

  • Enhancement: Option screen which allows you to specify the maximum number of possible embeds per post and the embed word

1.3

  • Enhancement: Increased limit of number of code embeds from 5 to 20

1.2

  • Maintenance: Simplification of code

1.1

  • Maintenance: The instructions have been corrected (thanks to John J. Camilleri for pointing it out!)
  • Maintenance: Plugin has been tested with version 2.8 of WordPress. No code changes have been made

1.0

  • Initial release

Links

Download the latest version (2.0.2)

Visit the official WordPress plugin page
View for WordPress forum for this plugin

[mantis]Artiss Code Embed[/mantis]
Loading Facebook Comments ...

33 Thoughts on “Artiss Code Embed”

  1. Federico on May 13, 2009 at 1:59 am said:

    Don’t work for me, I use WP 2.7.1, and put %CODEx% in the visual editor and nothing, try using HTML editor and nothing… :(

  2. Federico on May 13, 2009 at 7:36 pm said:

    Yes, I named it CODE1 with the “%” after and before, and nothing, then, when I see your reply without the %, I try again without them… but nothing, I see “CODE1″ in my entry, instead the iframe :(

  3. Anita on June 18, 2009 at 8:17 pm said:

    I’ve got the same problem – the page is just blank.

    :-(

  4. David on June 23, 2009 at 9:09 pm said:

    Ok, the issue has now been fixed – the code was working fine, it was my instructions that were wrong. I’ve now correct them, both above and in the README file that accompanies the plugin.

    In a nutshell, you should NOT put percentage signs around your custom field name – only when you specify it in your actual post should you do this.

  5. Anita on June 23, 2009 at 9:10 pm said:

    Works like a dream. Fantastic!

    Thank you, Anita

  6. Sean on August 8, 2009 at 3:57 am said:

    Is there a way to allow this to work with embedding code in the sidebar?

    Thanks in advance, Sean

    • David on August 11, 2009 at 9:57 pm said:

      Any code can be embedded in the sidebar by adding it into the appropriate theme file – usually sidebar.php. Because a blog post or page is dynamically generated from databases, this is why they need a special plugin to add such a facility.

  7. Pingback: Animando imágenes con PhotoPeach « Cómo hago

  8. Pingback: WSD Blogging Server » Blog Archive » Embedding content

  9. Bradley Brown on December 24, 2009 at 5:58 pm said:

    Thank you for this David. I was able to install the plug-in right from the built-in WordPress MU Plug-in system and activate it system-wide. I’ve tested it and posted the instructions for our users.

  10. Joe Siegler on January 23, 2010 at 4:26 pm said:

    This works on WP 2.91.

  11. Diego on February 4, 2010 at 8:49 pm said:

    i´m using 2.91 and atahualpa. i´m trying to embed my blip tv player, but i get nothing… i´ve followed the instructions, so what do you think could be wrong?

    regards

  12. Anthony on March 10, 2010 at 2:04 pm said:

    Your plugin is working great on several sites I’m working on. Now I have a page that needs EIGHT (8) code embeds … can the current limit of 5 be raised? (please?)

    • David on March 10, 2010 at 2:21 pm said:

      Of course. Meantime, if you open up simple-code-embed.php, you can change the limit on line 14. It currently states <6 – if you change this to <11, then this will give you a 10 per page limit.

  13. KerryAnn May on June 15, 2010 at 5:52 am said:

    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.

  14. Glenn on July 2, 2010 at 12:23 am said:

    I am trying to embed an html form. I used your plugin and I still have the same problem where the formating for the columns, text, centering all changes. Any help?

    • David on July 2, 2010 at 1:19 pm said:

      Hi Glenn – this is highly likely going to be your theme’s CSS causing it. The plugin will simply dump your HTML onto the page, so any changes will be down to existing stylesheet definitions.

  15. Becca37 on September 15, 2010 at 8:11 pm said:

    Love it, thanks much. Makes life so much easier for me!

  16. Andrew on September 28, 2010 at 3:28 pm said:

    Everything worked great, I was able to embed my video. one thing though is that the video automatically plays when you go to my blog. wondering if there is any way to have it not play automatically and instead hit the play button if you want to play it.

    Thanks for everything.

    • David on October 4, 2010 at 7:30 am said:

      Andrew – that is related to the code that you’re embedding, not my plugin. Sorry, I can’t advise further on this.

  17. Pingback: wp-popular.com » Blog Archive » Simple Code Embed WordPress Plugin | artiss

  18. Michael S Opsahl on October 16, 2010 at 1:06 am said:

    I tried to update the plugin but it failed. My wordpress blog said the zip file could not be found on the wordpress site. Thinking that I was clever, I downloaded it directly and tried to install it and that failed. I thought I need the old one deactivated and that failed to allow installation. I deleted the old version and now I still cannot install the plugin because it says the directly folder already exists.

    Please offer me some insight into how to get this back and running. Thanks

    • David on October 16, 2010 at 10:57 am said:

      Hi Michael,

      It sounds like a problem with the WordPress site – I can manually download the latest version of the plugin from there without a problem. I’d suggest deleting the Simple Code Embed plugin folder from your installation, manually downloading and unzipping the latest version and copying that into place.

  19. Michael S Opsahl on October 16, 2010 at 5:50 pm said:

    Thanks for the prompt reply. So, interestingly, I went back and even after having uninstalled the plug-in, the update notification was still there. I clicked the update button and now it works. The updated plug-in did its own thing. I am fine again.

    Thanks again and I use your plug-in regularly. I will definitely contribute to your efforts so many thanks for the good work.

  20. EmigraScout on November 15, 2010 at 7:00 pm said:

    how can I add adsense with this plugin for embedded videos?

  21. md on February 2, 2011 at 6:54 pm said:

    David – I’m using your plugin to drop a custom HTML block within the the content area (for example, a block that holds a Facebook like button and the post’s tags) – but the PHP is not working. It’s just being written as text. Does your plug-in support that?

    Thx

    • David on February 2, 2011 at 7:08 pm said:

      It depends what code you’re using. If it just HTML then it should work. However, if it includes PHP then, no, it won’t work – this plugin only works with client-side languages.

  22. Pingback: How to Start a Blog | Brent Ozar PLF

  23. Pingback: Visited countries | Richi's Blog

  24. Pingback: A useful tool for creating a search interface for your data: freeDive | Online Journalism Blog

6 Pings/Trackbacks for "Artiss Code Embed"
  1. Animando imágenes con PhotoPeach « Cómo hago says:
    August 10, 2009 at 1:52 pm

    [...] un plugin general para embeber código. En la plataforma de conectandonos.gov.ar está disponible Simple Code Embed, así que -desde el tablero de nuestro blog- vamos a la sección de Plugins y lo [...]

  2. WSD Blogging Server » Blog Archive » Embedding content says:
    December 24, 2009 at 5:37 pm

    [...] Full instructions are from here: http://www.artiss.co.uk/simple-code-embed [...]

  3. wp-popular.com » Blog Archive » Simple Code Embed WordPress Plugin | artiss says:
    September 30, 2010 at 3:23 pm

    [...] rest is here: Simple Code Embed WordPress Plugin | artiss Tags: custom-fields, fields, [...]

  4. How to Start a Blog | Brent Ozar PLF says:
    July 7, 2011 at 3:20 pm

    [...] Simple Code Embed – so your posts show up with color-coding as shown on this post.  It relies on Javascript that runs after the page is loaded, so it’s a little slow, but the results are great. [...]

  5. Visited countries | Richi's Blog says:
    January 16, 2012 at 11:10 pm

    [...] you have visited. Now I finally figured out how to get it displayed in wordpress using the code-embed plugin. Well, since we got kids, travelling is in hibernation mode, but we already have plans on [...]

  6. A useful tool for creating a search interface for your data: freeDive | Online Journalism Blog says:
    March 28, 2012 at 11:35 am

    [...] blog then it won’t work – and even a self-hosted WordPress blog will require the installation and activation of a plugin (helpfully linked on the freeDive site) and following those instructions (if you don’t know [...]

Top
%d bloggers like this: