WordPress Visual and Text tabs came up a couple times in the past week or so when several client asked me why their posts had “too much spacing” and “wacky code”. When I looked into theses pages, I did find extraneous code that I knew the client had not put there.
But there it was…
- Empty headline tags: <h2></h2>, <h3></h3>
- Lines of non-breaking spaces:
- Lines of blank lines
that created unwanted spacing above/below text.
Where does this code come from!?
When you first begin working with the WordPress Editor and start your first post or page, you will notice that there are two tabs — Visual and Text. By default WordPress is on the VISUAL tab in the editor. This extraneous code comes from switching between the Visual and Text tabs without saving/updating first.
Inevitably the next question I am asked is why is the TEXT tab there and why would you use it?
WordPress Visual vs. Text Tabs
The Visual tab is the 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 adding actual code to get the look they desire.
This includes font color, bolding and emphasis, bulleted lists, blockquotes, links, special characters, undo/redo — you know all the same type of stuff you see in your word-processing program. You click a button and the formatting just happens. What you don’t see is the actual background code that makes it happen.
That’s where the Text tab comes in. This tab allows you to actually see the formatting code that is being rendered and make changes or tweaks to that code. The Text tab displays plain text — including formatting code.
But here’s the caveat…
If you are not careful and switch back and forth between these two tabs, you can end up causing more harm than good, while creating unnecessary code that can cause WordPress or your theme to hiccup.
For most users staying on 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 TEXT 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.” You don’t need everything including the kitchen sink! As a matter of fact easy to read posts are quite the opposite. Short paragraphs, white space with bulleted lists and subheadings. Simple.
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 over format your text!
WordPress themes work off of carefully choreographed CSS (Cascading Style Sheets) that control all the headline and 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 a minor color change here or there for emphasis are okay, but let your words do the talking rather than relying on gratuitous formatting to get your point across.
- TEXT Tab: Before you switch to the TEXT tab, always be sure to click Update! Same for the reverse. When you are done tweaking the code in the TEXT tab, click Update so that your changes are then in place and can be viewed in the Visual Tab.
If you are delving into adding code of any type into the Text tab it’s best to have a basic understanding of HTML. HTML is pretty easy to learn — at least enough to understand what you are looking at — from any of the many online resources available to learn HTML.
If the Visual editor does it’s job, why would one even consider using the TEXT tab? Because there will be times where you may want to paste a custom link or do a little tweaking. A few examples would be adding inline CSS code, YouTube video code or snippets/code you may receive from affiliates you’ve partnered with.
As you learn more about WordPress, CSS and HTML, using the TEXT tab can be an nifty way to tweak the code and layout of your content to be exactly the way you want it!
At your service,