I’ve been playing around with CSS and HTML code and I finally got to the point where the section I was working on works. I saved my CSS, and updated my post, and everything looked great, but when I returned to the post and switched from the HTML tab to the Visual tab WordPress altered/deleted my HTML code.
I re-entered my HTML code in the post, saved it while still in HTML view and the post appears exactly the way I want it to look.
My Post – The Bobby Ore quote is what I was working on. I saved/updated while still in HTML view, so the code appears to work. Here’s the HTML code that I entered into the HTML view of my post:
<p class="space"><quote class="open">“</quote><quote class="font">Forget about style; worry about results.</quote><quote class="cite">~ Bobby Orr</quote><quote class="close">”</quote></p>
After switching to the Visual tab and back to the HTML tab, the HTML code now looks like this:
<p class="space">&#8220Forget about style; worry about results.~ Bobby Orr&#8221</p>
Help???
2 Answers
Couple of things:
- You’re missing the semicolon after your unicode character, should be
”
- The
quote
element gets stripped by the visual editor b/c the version of TinyMCE that WordPress implements is only set to recognize a certain subset of html elements and it strips out the rest.
Possible solutions:
- Disable the visual editor in your user profile: Users > Your Profile > Disable the visual editor when writing.
- If you still need your visual editor then apply your styling to one of the allowed HTML elements, like
<p class="cite">
. - Use a background-image or sprite to place the quote marks in the background of an allowed element.
- Use a plugin (http://wordpress.org/extend/plugins/tinymce-valid-elements/) to add the
quote
element as a valid element in TinyMCE.