Put the coffee on, it’s time for another #2MinuteTutorial.
Today we’re looking at the difference between the Visual Editor and Text Editor in WordPress so you can choose the best for your blog post tweaking.
Drafting your WordPress Post
Are you writing your draft posts in WordPress? It’s convenient for sure but the thing is, it’s a bit of a gamble whether you’ll end up yelling abuse at the screen part way through the draft.
One of the main reasons why it’s good practice to create draft posts outside of WordPress, is because it’s reliant on having a consistently good internet connection. While WordPress does have an auto-save function, if your internet blips or browser plays up then that saving functionality won’t be available. Gah.
When your draft is ready, copy and paste it into the WordPress editor.
TIP: Take note of how the draft comes across. Depending on what app or programme you’re using for your writing, your post may be picking up random formatting when it’s transferred into WordPress. If that’s the case, copy it into a text editor or notepad first (to make sure your draft is ‘clean’) THEN drop it into WordPress.
WordPress provides two ways to edit your posts:
- The Visual Editor
- The Text Editor
The two modes operate quite differently.
Underneath it all though, lies the same text and the same HTML, each editor just provides different ways to see and modify that HTML.
TIP: Have a quick nosey at the 2 Minute Tutorial on the difference between HTML and CSS for a superquick explanation of what HTML is.
The Visual Editor displays the HTML styles not the code itself – it attempts to interpret the markup as a browser would.
The Text Editor lets you write and modify the HTML yourself but does not show you the results (ie the styles) on screen. You’ll need to generate a preview of the draft page to see that.
You can switch between the two editing modes by selecting the ‘Visual’ or ‘Text’ tabs at the top right of the editing window.
WordPress Visual Editor
WordPress is bundled with the HTML WYSIWYG editor TinyMCE (released as open source software by a third party). You don’t need to know what’s under the hood to use the Visual Editor but it helps to know why people might refer to it as TinyMCE or a WYSIWYG editor.
WYSIWYG is an acronym for What You See Is What You Get. Yep, that’s what happens when people who make such editors run out of brain power before they’ve come up with a name for said editor. I suspect there may have been tittering involved.
The Visual Editor has a good set of formatting options and you can get a general idea of how your post will look from inside the editor itself.
However the Visual Editor is limited in how extensively or easily you can take control over how your post looks.
In the Visual Editor:
- You can’t add or change HTML markup
- Existing markup may be reinterpreted in less than helpful ways
So what’s the problem with that?
A WYSIWYG editor creates HTML markup that it thinks aligns with how you want the post to look. It tries to interpret your formatting needs and create the HTML to suit. But it does get it wrong – unwanted spacing is a typical consequence of the editor missing the mark.
If you’re not comfortable with HTML, close enough is good enough and you can usually resolve the basic errors quite easily.
However, if you’re intending to blog for more than as a hobby I strongly encourage you to learn how to use the text editor so you can take greater control over how your posts display. Strongly. Strongly encourage.
WordPress Text Editor
In the Text Editor you can add HTML yourself or use the quicktag buttons to wrap a piece of selected text in the more common tags. This gives you an extensive formatting capacity at your fingertips – much greater than what is possible or practical via the Visual Editor.
And that’s what you want isn’t it? To take control of that thur blog? And all it takes is a teensy bit of know-how about HTML.
TIP: WordPress puts default (invisible) paragraph tags on every piece of text in the editor. You use other tags to transform it to another format.
In the 2 Minute Tutorial on HTML and CSS I gave you some basic HTML info. Tags (open and close) sit on either side of the text you want to format. The tag dictates the nature of that formatting.
Using the tag strong:
will transform the text into:
TIP: The specific format style will depend on what theme you’ve got loaded.
This is some text,
<span style=”color: #ff002f;”>some of which is red</span>
<span style=”color: #007bff;”>some of which is blue</span>
This is some text,
some of which is red
some of which is blue
Once you get used to the tags, they’re easy to whip out again and again.
For instance it’s not hard to remember that H1 is a top level heading and there are 6 levels of headings altogether so the remaining heading tags must be H2, H3 …. H6.
Honestly, give it a go – you’ll soon find it a doddle after a smidgeon of practice. x
And that, my friend is a basic overview of the Visual and Text Editors in WordPress.
If you liked this post, subscribe for more deliciousness!
Image credit: The original photo is by Chelsea Francis via Unsplash (CC0) which I’ve modified.