Solved

Wordpress visual editor rewriting (breaking) my html code

Posted on 2013-05-11
11
590 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
 
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
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

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

Suggested Solutions

How to install BuddyPress on your self-hosted WordPress site It’s been called everything from “social networking in a box” to “Facebook without the terms of service,” but until Feb. 16, BuddyPress was a relatively unknown outside the WordPress MU…
WordPress can be pretty daunting, especially for a beginner, so I thought it might be a good idea to write an article to show how easy it is to get started in WordPress and to design a custom theme.  The first step is to check with your hosting comp…
The purpose of this video is to demonstrate how to manually back up a WordPress Database. This will be demonstrated using a Windows 8 PC. The Host used will be IPage.com Log into your Hosting account. IPage will be used for demonstration : Locat…
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

919 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now