At its core, WordPress is a Content Management System (CMS). Although it gives you control over every aspect of design and functionality, websites are nothing without content, and content creation and management are what drives WordPress.
With that in mind, today we are going to take an in-depth look at the WordPress Visual Editor. For beginners, this is a comprehensive guide. Having said that, more experienced WordPress users who read this may be surprised to find a few unfamiliar features that have been hiding in plain sight.
What You See Is What You Get
The WordPress text editor can be divided into three feature sections – the Visual Editor, the HTML Editor, and the Media Uploader. We are only focusing on the Visual Editor today because the other two features really deserve tutorials of their own. They will be covered next week.
The WordPress Visual Editor is known as a WYSIWYG editor. For those of you who don't know, WYSIWYG stands for "What You See Is What You Get". To make sure that you are using the Visual Editor, click the "Visual" tab at the top of the text editor box.
The formatting of the text and media you see in the Visual editor is what you will ultimately see in your published post. Using the delightful Yorkshire Lorem Ipsum Generator (which will likely mean nothing to you unless you are from the UK), you can see an example of what the Visual Editor is able to produce:
You may have noticed the little "Woo" icon in the toolbar above. That was put in place by my blog's theme and will probably not appear on your toolbar. So for the purposes of this tutorial, pretend it isn't there.
Before we take a look at the Visual Editor's toolbar, you will want to make sure that you have the full list of formatting options available to you. In order to do so, click the "Kitchen Sink" icon in the toolbar.
This will present you with an additional row of some of the most useful options:
As a new WordPress user, the above buttons are probably all of the formatting options you will need. You will probably recognize the majority of them from your computer's text editor. If you are unsure as to what a button does, just hover your mouse over it and a tooltip will pop up.
So rather than tell you what the Bold button does, let's focus on the buttons that you won't be familiar with.
Add, Edit & Remove Links
As you might expect, you can use these two buttons to add and remove hyperlinks in your post's content. In order to make a hyperlink, all you need to do is select the relevant piece of text and click the "Insert/edit link" button (that's the one on the left).
You will then be presented with this screen:
The top part is pretty self explanatory. Enter the URL of the page you would like to link to, the title of the link (i.e. the words that will pop up when someone hovers over the link), and whether or not you want the link to open in a new window/tab.
The bottom part is a useful feature, but can be rather temperamental at times. If you want to link to another post or page on your blog, all you need to do is select it from the list – WordPress will then populate the URL and Title for you. However, if you have lots of posts and pages, it can take rather a long time to find the one you want. And the search feature leaves little to be desired. You'll have to discover for yourself whether or not you can get along with it.
Insert More Tag
This is a nifty little feature than many WordPress users completely overlook.
As you will probably know, excerpts of your blog posts are shown on various parts of your site; such as the home page, and archives. With the Insert More Tag, you can tell WordPress exactly where the text in those excerpts should be cut off. This is a great tool for anyone that hates their blog post excerpts being cut off in mid-sentence.
Fullscreen Mode
For those who tend to get distracted by clutter, you can click on the Toggle Fullscreen Mode and work in peace. All of the non-essential boxes and buttons will disappear, leaving you with just the content and an auto-hiding toolbar with limited options. If you are into minimalism, you'll love this.
Headers & Paragraph Types
I don't want to stray too far into the world of clean HTML and semantic markup, but it is important that you take a moment to familiarize yourself with the basics of how websites should be formatted.
You will undoubtedly want to format your posts in many weird and wonderful ways, but there should be some structure to it. You will typically have a primary header, then secondary headers, tertiary headers, and so on. You will also have a default format for standard paragraph text, addresses, pre-formatted text, and so on.
All of the aforementioned formatting "types" are determined by your theme. All you need to do is select the appropriate one in the Headers & Paragraph Types drop-down box…
…and then type!
Paste As Plain Text/Paste From Word
It probably won't be long before you discover on the text editor's glitches/shortcomings – one of which is how it handles formatted text from other sources (hint: badly).
If you are posting from external sources, you may wish to cut your losses and use the Paste As Plain Text button. This will ensure that WordPress doesn't mangle whatever it is your are pasting. Alternatively, if you are copying text from Word or Excel, you should use the Paste From Word button.
The feature isn't flawless, but will do a much better job than a standard cut and paste.
Remove Formatting
I have just mentioned that the Visual Editor has an occasional penchant for butchering formatted text, and this button can be an easy way of combating the occasional formatting crime scene.
If WordPress does something to your text that you don't like, just highlight the offending section and hit the Remove Formatting button. It will restore the highlighted text to standard formatting (which is determined by your theme).
Please note that this button will not strip certain formatting types; like headers, blockquotes, etc. It is intended for controlling unruly italicization, underlining, and so on.
Insert Special Character
Clicking the above button will display the following screen:
Pretty nifty, right? Not only can you paste characters into the Visual Editor with the click of a button, you are also informed of the HTML and NUM codes for the corresponding character (should that kind of thing float your boat).
Help
The inbuilt help isn't particularly comprehensive, but does have some useful tidbits (like a list of keyboard shortcuts). It's worth a quick browse.
That's All Folks!
In terms of putting virtual pen to paper, that is really all you need to know. With the above tools, you can create headers, format text as you see fit, add and remove hyperlinks, insert characters, and produce a dynamic-looking blog post.
Stay tuned for tutorials on other related topics, such as the HTML Editor, Media Uploader, and Add Post/Page Screen options!
Creative Commons image courtesy of littleghoti
Sent from my iPhone
