Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Wordpress visual editor rewriting (breaking) my html code

Posted on 2013-05-11
11
Medium Priority
?
671 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
Understanding Web Applications

Without even knowing it, most of us are using web applications on a daily basis. Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We often confuse these web applications tools for websites.  So, what is the difference?

 
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

Enroll in September's Course of the Month

This month’s featured course covers 16 hours of training in installation, management, and deployment of VMware vSphere virtualization environments. It's free for Premium Members, Team Accounts, and Qualified Experts!

Question has a verified solution.

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

Like there are many different versions of Wordpress, there are also a handful of related side projects WordPress users should be familiar with.   All of these projects are open source and GPL licensed, which means there are few restrictions to us…
WordPress is constantly evolving, and with each evolution appears to get better and better.  One of the big drawbacks prior to version 3 was that there was no way to be able to set up a custom menu from the backend. The Old Way Adding menus is…
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 Import and export files in WordPress. This will be demonstrated using a Windows 8 PC. Go to your WordPress login page. This will look like the following: mywebsite.com/wp-login.php : Click on Too…

715 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