Prevent WordPress from removing HTML elements

Start with this diagram below.

diagram use divi or VC

Before you make any changes you need to know if this issue is affecting your site. The simple test is this: add a Linklay image to your site then preview or publish the page/post. After the Linklay image has loaded, resize the browser window and see if the Linklay image has scaled to fit into the new window size. If the image does resize you don’t have any issue, if the image does not resize and is cut off, your Linklay code is being stripped of a script that makes the images responsive.

comparison-between-WP-images-scaling

If you’ve just discovered that your Linklay images are cut off when a browser window is reduced, this is because WordPress is trying to be helpful by editing HTML code that you are adding to your TinyMCE editor.

TinyMCE editor in Wordpress

Just an FYI, make sure you are pasting your Linklay code into the text tab here:

wordpress text block tabs

To stop WordPress being so helpful, just follow the easy steps below to prevent your Linklay embed code from being stripped.

STEP 1 - Go to Editor

Click on “Appearance” in the left side menu in WordPress.

setting in wordpressThen select “Editor”.

editor

STEP 2 - Find Functions.php

Find and click on the file in the right side menu called functions.php

functions

STEP 3 - Paste Code into functions.php file

Copy the code below and paste it at the bottom of the functions.php file.

Save and you’re done!

// START Stop removing div tags from WordPress - Linklay
function ikreativ_tinymce_fix( $init )
{
    // html elements being stripped
    $init['extended_valid_elements'] = 'div[*]';

    // pass back to wordpress
    return $init;
}
add_filter('tiny_mce_before_init', 'ikreativ_tiny_mce_fix');

// END Stop removing div tags from WordPress - Linklay

how to stop wordpress from removing markups

Are you using Visual Composer or Divi Theme?

VISUAL COMPOSER (SCROLL DOWN FOR DIVI THEME)
Visual Composer logo

If you use Visual Composer, all you need to do is make sure that you paste your shoppable image code into the HTML block (see below).

When choosing an element, select "Raw HTML".
HTML select - visual composer
Paste your Linklay image code into the Raw HTML popup (see below).
shoppable image HTML RAw code input for visual composer
DIVI THEME

If you use Divi theme/builder, all you need to do is make sure that you paste your shoppable image code into the HTML module (see below).

When choosing a module, select "</> Code".
divi theme
Paste your Linklay image code into the code module (see below).
divi paste embed code for shoppable image

When you add HTML to a code/HTML module, WordPress does not update, clean up, or edit your code, meaning your Linklay images will perform exactly as intended.

If you need further assistance, please contact support@linklay.com