WordPress, stop changing my HTML code!

Problem

The visual editor packed with WordPress is beautiful and very user friendly. But if you are like me, sometimes a visual editor is not going to cut it. When writing a post or a page, you have two options: Visual or Code. Selecting the Code tab can be somewhat sneaky. For example, you create your post in Dreamweaver then copy and paste it into the code view. Once you have published that post and go back to edit it you will find that WordPress has completely changed and rearranged your HTML and CSS. This can be very aggravating but there is a solution.

Solution

From the WordPress admin section click on Users. Edit your user profile by checking the ‘Disable the visual editor when writing’ and then click Update Profile. Now you can write your posts and pages with HTML and CSS and not worry about WordPress changing your code. Hooray for code preservation!

JoshStauffer.com runs on the Genesis Framework

Genesis Framework

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!

Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.

Become a StudioPress affiliate

Comments

  1. Hillary says:

    I tried your suggestion and it is still chomping up my HTML and spitting it out. this is so frustrating.

  2. Josh Stauffer says:

    Can you explain what you are doing exactly?

  3. Hillary says:

    I create the post in dreaweaver and then copy and paste and wordpress changes nearly all of my code. For example, I encoded my email address to hide it from spambots and wordpress keep uncoding it. In turn, it removes amazon referral links.

  4. Josh Stauffer says:

    Can you double check that you have performed the steps necessary in my post? For the email address try to use the ascii code @ instead of the @ character. Also, you might try Googling the WordPress plugin WP-Amazon and see if it helps with your problem.

  5. slobjones says:

    You can uncheck the box in your user settings that loads the editor in wysiwyg mode by default, but this does NOT disable the wysiwyg editor.

    The editor in itself is enough to render WP an unusable blog platform.

  6. Jackson says:

    Thanks.

  7. I get a similar problem. I’ve tried inserting widgets and buttons from other sites that generate code for me. For example, there’s a Facebook Fan Page widget that I’m trying to embed. I copy the code from Facebook, paste it in my page, but then WordPress changes it so the widget doesn’t appear correctly. It’s happened with Facebook, Twitter buttons, and an event registration widget from EventBrite. I’m not experienced enough with HTML to completely fore-go the Visual Editor. I’m not sure what to do.

  8. @Julie Herrick, Thanks for your comment. Yeah, unfortunately this solution is not quite adequate for users not as familiar with HTML.

    What you can do is publish the post as you want it to appear without the widget. Once it is published, edit your user profile and disable the visual editor. Next, go back and edit your post to add the widget code where you want it to appear and update the post. Finally, go back to your profile and enable the visual editor. Hope this helps!

  9. Tyler says:

    Thanks sooo much. perfect!

  10. Matthew says:

    Ideally wordpress would have an escape / protect code that would prohibit the visual editor from goofing up custom HTML. I’ve tried copying and pasting code from an external editor with very limited success.

  11. Jackie T says:

    This plugin should help you out!
    http://wordpress.org/extend/plugins/preserve-code-formatting/

    You still need to save the page while in HTML view. When you switch to VISUAL, all bets are off…

Trackbacks

  1. [...] goes on.  The first thing we noticed from reading posts from frustrated bloggers is that if you avoid the Visual editor altogether, it won’t mangle your post’s formatting.  Some people create special accounts with the [...]

Speak Your Mind

*