The WordPress editor Visual and Text tabs

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.

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!

Judith is an established Business Coach and WordPress Consultant who has run The IStudio® for more than two decades. She assists Netrepreneurs who want to create effective websites while tutoring them on the best practices that are necessary to their long-term prosperity. You can also find her extending a helping hand as a Community Founder and Trusted Advisor over on GoDaddy's Community Forums.

Get our newsletters!

Email

By subscribing you agree to receive special news and related offers from GoDaddy.

You may like…

GoDaddy is empowering everyday entrepreneurs around the world by providing all of the help and tools to succeed online.

With 18.5 million customers worldwide, GoDaddy is the place people come to name their idea, build a professional website, attract customers and manage their work. Our mission is to give our customers the tools, insights and the people to transform their ideas and personal initiative into success.

Use of this Site is subject to express terms of use. By using this site, you signify that you agree to be bound by these Universal Terms of Service.