Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Wordpress visual editor rewriting (breaking) my html code

Posted on 2013-05-11
11
Medium Priority
?
700 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
  • 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
New feature and membership benefit!

New feature! Upgrade and increase expert visibility of your issues with Priority Questions.

 
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 2000 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

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

If you are looking for plug-ins to add functions to your WordPress small business web site, take some time to read though this comprehensive list.  These are all the plugins I use for my customers WordPress web sites, as well as my own.  Be sure to …
In order to have all security and back ups taken care of, WordPress users can sign up for services with WP Engine.
The purpose of this video is to demonstrate how to make a WordPress Site faster and smaller in size by cleaning up the database. This will be demonstrated using a Windows 8 PC. Plugin WP Optimize will be used. Go to your WordPress login page. T…
This video teaches users how to migrate an existing Wordpress website to a new domain.

877 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