Editor’s note: The following article is curated from the GoDaddy community. We’ve made some light edits for formatting and clarity. Looking for help with GoDaddy products or getting your business online? Join the community to get answers from other GoDaddy customers.
The WordPress editor’s Visual and Text tabs come up when clients ask why their posts had “too much spacing” and “wacky code”. When I look into theses pages, I find extraneous code that I knew the client had not put there.
But there it was…
...Empty headline tags
...Lines of non-breaking spaces
...Lots of blank lines that created unwanted spacing above/below text.
Where does this code come from!?
Understanding the WordPress editor
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 editor’s 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!
- Visual Tab = Renders any formatting code.
- Text Tab = Displays the formatting code without rendering it.
Here some considerations for you when using either tab.
Tips for using the Visual Editor
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.
Tips for using the Text Editor
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.
IMPORTANT: If you ever copy-n-paste from an outside word-processing program, such as Word or Office, you should paste that text into the TEXT tab. Otherwise all the background/formatting code from your word-processing program will copy over as well. WordPress will show all that background code as text! Get in the habit when you copy-n-paste to do so only into the TEXT tab.
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 a nifty way to tweak the code and layout of your content to be exactly the way you want it!
WordPress Hosting from GoDaddy is optimized for WordPress websites. Find out more about GoDaddy’s WordPress Hosting plans.
Already a WordPress Hosting customer? Sign in to work on your site.
