How To Include Amazon Text and Image (Enhanced Display) Affiliate Links In WordPress

Another WordPress thingy to drive me crazy! I try to put an amazon affiliate link in a post and it seems to work, but then as soon as I switch back the the Visual editor the link disappears!

As with many WordPress things:

1. There’s probably a reason beyond my comprehension why this “bug” is actually a feature
2. There’s all sorts of solutions posted by people with such high levels of technical expertise that I can’t understand how to implement their “obvious” solution
3. The fix is actually simple (I think)

NOTE: Watch the video below to understand the danger of the word “simple” — then read the rest of the post for what I did to make it work.

FYI – I’m a huge fan of Jeri Ellsworth!

OK – all that’s necessary is to go into your WordPress theme’s functions.php file and add in this tiny bit of code:

// make TinyMCE allow iframes
add_filter('tiny_mce_before_init', create_function( '$a',
'$a["extended_valid_elements"] = "iframe[id|class|title|style|align|frameborder|height|longdesc|marginheight|marginwidth|name|scrolling|src|width]"; return $a;') );

Side thought: An annoyance with making this something you stick in the functions.php file instead of making it a plugin is that if you decide to change themes you have to remember to put this in the new themes function or you’re going to have screwed up your site’s functionality in a mysterious way that you might not discover for a long time even though things are screwed up. I wonder what the WordPress logic is for not having a separate place to put running code that isn’t tied to the theme? Ah, that would be the plugins directory. Except then instead of writing 2 lines of code you’d need to write the whole plugin framework for it. If I knew how to I would… So perhaps this solution will be updated in the future.

Unfortunately my theme is currently too narrow to make that easily readable. Grr.

I got this code from:

https://wordpress.stackexchange.com/posts/6003/revisions

Some other posts that almost helped:

https://richbui.com/web/iframes-in-wordpress-post-editor-using-shortcodes-and-custom-fields/

https://wpengineer.com/1963/customize-wordpress-wysiwyg-editor/

This seemed like a good plugin except it was last updated forever ago and I wouldn’t expect it to work in WP 3.0 or higher

https://wordpress.org/extend/plugins/tinymce-valid-elements/

This almost was useful, but instead of coming up with the answer just came up with a way to insert maps

https://multimedia.journalism.berkeley.edu/tutorials/embedding-map-mashups/googlemaps-in-wordpress/

If this post had said to just put this code into functions.php, then I might have used this code first instead of keeping on looking. A big advantage of the code from this post is that it is shorter and thus easier to display on my blog:

https://old.nabble.com/Re%3A-iframe-question-p21722564.html

It looks like this code from the above post is good, but I already had the above code working in my functions file:

add_filter('tiny_mce_before_init', create_function( '$a',
'$a["extended_valid_elements"] = "iframe[*]"; return $a;') );

So – let’s see if I can put an amazon enhanced affiliate link here that uses an iFrame…

Yay!

Note: There is a lot of usefulness to be gained from being able to use an iFrame in a WordPress page – for instance this plugin allows you to embed youtube videos with an iFrame – which enables youtube to serve HTML5 video instead of flash video when it can. I’m all for using less flash — it constantly crashes on my computer.

https://wordpress.org/extend/plugins/iframe-embed-for-youtube/

Also, my guess would be that the code above could be easily modified to add any other markup that the TinyMCE editor might be stripping out.