WordPress is changing my code

  • I know that this topic has been talked over and over with no real solution (at least as far as my googling goes), but still – when I’m trying to add code in text editor WP overwrites my code.

    I know that I can disable wysiwyg editor, but since I’m not the only one managing the page this is not an option. I’m using child theme based on custimizr.

    What I’m trying to do is to have a photo which on mouseover changes to naother photo. Couldn’t find a plugin, but found a code that actually works

    <!–start_raw–><a href="Destination URL" target="_top" onmouseover="document.sub_but.src='https://yourdomain.com/onroll.jpg'" onmouseout="document.sub_but.src='https://yourdomain.com/normal.jpg'">
<img src='https://yourdomain.com/normal.jpg' style="width:200px; height:63px; border:0px solid #cc3300;" alt="Move your mouse over me" name="sub_but">
</a><!–end_raw–>

    It works fine for the first few minutes, than WP changes it to something like (not really, but like this)

    ><a href="Destination URL" target="_top" <img src='https://yourdomain.com/normal.jpg' style="width:200px; height:63px; </a>

    The best solution I found was putting this code into functions.php

    function override_mce_options($initArray) {
    $opts = '*[*]';
    $initArray['valid_elements'] = $opts;
    $initArray['extended_valid_elements'] = $opts;
    return $initArray;
}
add_filter('tiny_mce_before_init', 'override_mce_options');

    and that actually worked for like an hour, but afterwards WP started to add / at the end and the code is not working anymore

    <a href="MYLINK" target="_top" onmouseover="document.sub_but.src='photo1'" onmouseout="document.sub_but.src='photo2'"> <img src="photo2" style="width: 250px; height: 250px; border: 0px solid #cc3300;" />' see the backslah ad the end? Why? Oh, and I stoped using <!–start_raw–> cause WP can’t really handle that.

    Any suggestions would be really appreciated.

Viewing 3 replies - 1 through 3 (of 3 total)

  • If the photos you want to alternate between are specific to the post rather than used in multiple places, or you need to retain ease-of-editing, then the advised method would be to create a shortcode to output your desired markup. A function similar to https://wpbin.io/5rd5hw should work when you include the following in your post:

    [roll-me-over normal="url/to/photo1" hover="url/to/photo2"]

    Thread Starter Bacek

    (@bacek)

    Thank you, this almost works perfectly, you forgot to put ‘ behind '<?php echo esc_attr( $atts['hover'] ); ?>"

    But, sorry if this is a stupid question, I’m really new to actually writting code, how can I set a url link on the photo?

    [roll-me-over normal=”url/to/photo1″ hover=”url/to/photo2″] only has atributes for two photos, not for the link.

    Thread Starter Bacek

    (@bacek)

    Ok, after only two syntax errors I managed to write something that actually works.

    <?php
function roll_me_over_shortcode( $atts ) {
    $atts = shortcode_atts( array(
        'normal' => 'url/to/normal-not-set-photo.jpg',
        'hover' => 'url/to/hover-not-set-photo.jpg',
	'link' => 'url'
    ), $atts, 'roll-me-over' );

    ob_Start();
    ?>

<a href="'<?php echo esc_attr( $atts['link'] ); ?>'" target="_top"
   onmouseover="document.sub_but.src='<?php echo esc_attr( $atts['hover'] ); ?>'"
   onmouseout="document.sub_but.src='<?php echo esc_attr( $atts['normal'] ); ?>'">
    <img src='<?php echo esc_attr( $atts['normal'] ); ?>'
         style="width:250px; height:250px; border:0px solid #cc3300;"
         alt="Move your mouse over me" name="sub_but" />
</a>

    <?php
    return ob_get_clean();
}
add_shortcode( 'roll-me-over', 'roll_me_over_shortcode' );

    Thank you for your help.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘WordPress is changing my code’ is closed to new replies.