Solved

Wordpress visual editor rewriting (breaking) my html code

Posted on 2013-05-11
11
607 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
Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

 
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

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

Suggested Solutions

I want to start by talking about the use of plug-ins for WordPress. I started a web-site for a company I was working for a few years ago; I had extremely basic knowledge of HTML. I am a Graphic Designer by trade so I invited the opportunity as a cha…
I annotated my article on ransomware somewhat extensively, but I keep adding new references and wanted to put a link to the reference library.  Despite all the reference tools I have on hand, it was not easy to find a way to do this easily. I finall…
The purpose of this video is to demonstrate how to Test the speed of a WordPress Website. Site Speed is an important metric of a site’s health. Slow site speed can result in viewers leaving your site quickly and not seeing your content. This…
The purpose of this video is to demonstrate how to update a WordPress Site’s version. WordPress releases new versions of its software frequently and it is important to update frequently in order to keep your site secure, and to get new WordPress…

839 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