WordPress How To: Visual and HTML Tabs
When folks start out on WordPress they are by default on the VISUAL tab in the editor for pages and posts. Inevitably the question comes up is why is the HTML tab there and why would one use it?
The Visual tab is WordPress’ WYSIWYG (What You See Is What You Get) editor. It allows those who don’t know code to be able to visually layout their post without having to monkey around with knowing code to get the look they desire.
But as with any WYSIWYG editor, they are not infallible nor do they always create clean code or do what we think we want the interface to do.
That’s where the HTML tab comes in. This tab allows you to actually see the formatting code that is being rendered and make changes or tweaks. But here’s the caveat… If you aren’t careful and switch back and forth between these two tabs, you can end up causing more harm than good, while creating code that can cause WordPress or your theme to break.
So for most users staying in the Visual tab is the way to go. If you are not confident in your coding skills or really have no experience in that area — stay out of the HTML tab altogether!
Here some considerations for you when using either tab:
- Visual Tab: Refrain from using all the formatting options available to you just because they are there. In WordPress these options are called the “Kitchen Sink.”
This is definitely one of those “just because you can doesn’t mean you do” features. I’ve experienced way too many great looking sites get all mucked up and end up looking home-brewed because the site owner starts using all the colors under the sun, creating larger fonts and headlines and centering everything — just because they can.
Don’t do it!
WordPress themes work off of carefully choreographed CSS (Cascading Style Sheets) that control all the fonts, sizes and colors so that the site remains consistent, clean and professional looking. Let the theme’s CSS control all that.
A little bolding or minor color change here or there for emphasis are O.K., but let your words do the talking, rather than relying on gratuitous formatting to get your point across.
- HTML Tab: Before you switch to the HTML tab, always be sure to click SAVE! Same for the reverse. When you are done tweaking the code in the HTML tab, click SAVE so that your changes are then in place to be viewed in the Visual Tab.
If you are delving into the HTML tab you really should be comfortable and have a basic understanding of HTML. There are many resources online to learn HTML, but I recommend you get a handy dandy laminated HTML cheat sheet for $5.95 from this site that you have on hand when you need it. That way, when you are in the HTML screen, you have your “cheat sheet” right there without having to switch screens.
If the Visual editor does it’s job, why would one even consider using the HTML tab? Because there will be times that the editor is not displaying the layout you desire (generally due to something in the CSS file that takes priority). When that happens, seeing the code and knowing how you can tweak it can help to get the results you desire.
As you learn more about WordPress, CSS (you can get a cheat sheet for CSS too) and HTML, using the HTML tab can be an nifty way to tweak the code and layout of your content.
At your service,
Judith
You may also enjoy:
- WordPress WP Remix CMS Premium Theme
- WordPress How To: Restore a Messed Up Page, Post or File
- Office Space Premium WordPress Theme
- New Web Site Design & Development
- NewsPress for WordPress Premium Theme
2 Responses to “WordPress How To: Visual and HTML Tabs”
Tell Me What You Think ...
FYI: I do not approve comments from those who use keywords in lieu of their names. Not only do those comments tend to be self-serving, I prefer to make a real connection with visitors who comment on my Blog -- can't do that with keywords. Please see my comment policy for more ...
Actually switching between the Visual and HTML tabs is a bad idea, as the Visual tab will strip <p> and <br /> elements, plus things like Google Map iframes.
Hey, Oli:
Thanks for the clarification and for stopping by! ;-) The bottom line is, just don’t switch between the HTML and Visual tabs unless you know what you are doing and know enough about basic HTML to modify the results.