Solved

Wordpress visual editor rewriting (breaking) my html code

Posted on 2013-05-11
11
622 Views
Last Modified: 2013-05-12
I am using the visual editor in WordPress 3.5 and entered in the following html code in the "text" view of the editor:
<a href="../donate/"><div class="involvedtiles-img"><img src="http://s1053289.instanturl.net/wp-content/uploads/2013/05/donate.gif" title="Donate"></div>
            <div class="involvedtiles-text"><span class="involvedtiles-caption">Donate</span><br>
              Sit amet, consectetur adipiscing 
              elit. In dignissim lorem a diam.</div></a>

Open in new window


I then switched into the "visual" mode of the editor, then immediately switched back to the "text" view and found that WordPress had rewritten and broken my html code to the following (it isolated the <a> tag to all by itself:

<a href="../donate/">
</a>
<div class="involvedtiles-img"><img title="Donate" alt="" src="http://s1053289.instanturl.net/wp-content/uploads/2013/05/donate.gif" /></div>
<div class="involvedtiles-text"><span class="involvedtiles-caption">Donate</span>

Sit amet, consectetur adipiscing
elit. In dignissim lorem a diam.</div>

Open in new window


What is going on? I can't believe WP is doing this. I even have that code wrapped in the RAW HTML plugin which is supposed to avoid this.

Any thoughts on how I can avoid WP ever rewriting any of my code when switching into visual mode?

Note: We have to keep the visual mode - we are writing this site for clients that have essentially no html knowledge.

Thanks experts!
0
Comment
Question by:rascal
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 5
11 Comments
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 39158783
What is going on?

Check your Settings | Writing to see if "Fix invalidly nested XHTML" is turned on.  

<a><div></div></a> is not valid XHTML
0
 
LVL 1

Author Comment

by:rascal
ID: 39158789
That checkbox is currently not checked, so it should not have modified the html.

It is valid html5 code, but not sure about xhtml.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 39158794
So much for the easy fix

a's are inline, div's are blocks so either the WordPress interpreter (or possibly TinyMCE) is doing the rewrite.

Can you try deactivating Raw HTML and substituting TinyMCE Advanced?  It has a setting to not rewrite HTML and I've always had pretty good luck with it.
0
Salesforce Has Never Been Easier

Improve and reinforce salesforce training & adoption using WalkMe's digital adoption platform. Start saving on costly employee training by creating fast intuitive Walk-Thrus for Salesforce. Claim your Free Account Now

 
LVL 1

Author Comment

by:rascal
ID: 39158797
So we rewrote the <a> code now, and now WP is removing our <br/> tags:

Before:
<article class="highlight" onclick="window.location.href='/get-involved/donate/'">
<div class="involvedtiles-img"><img title="Donate" alt="" src="http://s1053289.instanturl.net/wp-content/uploads/2013/05/donate.gif" /></div>
<div class="involvedtiles-text"><span class="involvedtiles-caption">Donate</span>
<br/>
Sit amet, consectetur adipiscing
elit. In dignissim lorem a diam.</div>
</article>

Open in new window


After:
<article class="highlight" onclick="window.location.href='/get-involved/donate/'">
<div class="involvedtiles-img"><img title="Donate" alt="" src="http://s1053289.instanturl.net/wp-content/uploads/2013/05/donate.gif" /></div>
<div class="involvedtiles-text"><span class="involvedtiles-caption">Donate</span>

Sit amet, consectetur adipiscing
elit. In dignissim lorem a diam.</div>
</article>

Open in new window


This is maddening - isn't there a way to tell wordpress to leave whatever I type in alone?
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 39158803
TinyMCE Advanced is one way to do it.  Another involves hacking the core files, so the hack will disappear on every update to WordPress:

http://wpgarage.com/tips/make-wordpress-editor-stop-changing-code/

Always remember that WordPress page/post editor is aimed at the lowest common denominator of user.  If you really want to preserve code, make your own templates and use those.
0
 
LVL 1

Author Comment

by:rascal
ID: 39158812
Thanks Jason, sounds like TinyMCE advanced is the best option - is that a plugin? Can you point me in the direction to find/install?
0
 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 500 total points
ID: 39158850
0
 
LVL 1

Author Comment

by:rascal
ID: 39158877
Thanks, I've installed the tinymce advanced, and it's looking good - of course the wordpress editor is still hosing my html (and in fact my <br> are still being converted to <p> and other changes are occurring).

How in the world WordPress ever came up with the bright idea of actually changing html that was explicitly entered into the html view I will never understand, but thanks everyone for your help!
0
 
LVL 1

Author Closing Comment

by:rascal
ID: 39158878
The tinyMCE option did help, but WP is still converting my raw html code, so I guess that's just a 'feature' in WP we have to work around somehow. Thanks for your help regardless.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 39159180
You keep making the mistake of assuming the Visual Editor is supposed to let you do whatever you want to do with HTML.  It won't.  It's intentionally restricting and changing things to avoid common mistakes.  That it conflicts with what you want is unfortunate but that's what custom templates are for...
0
 
LVL 1

Author Comment

by:rascal
ID: 39159680
Thanks Jason, but our view is that templates, custom or otherwise are for presentation of the data entered via the CMS. We've built many custom theme templates for our clients and if we were to place the code directly into the templates, the client would have no way of modifying the data, changing images, etc. I think the best and simplest solution would be a checkbox on the visual editor that simply read:

'x' : Do not alter the underlying html in any way.

That way, users could opt to allow WP to change the html or leave as entered.
0

Featured Post

Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Now that you've installed WordPress 2.9 (http://www.experts-exchange.com/articles/Web_Development/Blogs/WordPress/WordPress-2-9-What-to-Expect-When-Upgrading-to-WordPress-2-9.html?) on your site, you need to install some plugins to get the most out …
WordPress has made it easy to create scalable sites based on their powerful CMS, but as great as WordPress is, there are some SEO issues that haven’t been addressed out of the box.  Fortunately these problems can be solved with a few plugins.  The f…
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

734 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question