How to Use the WordPress Text Editor

 

Video:

Transcript:

In this video we're going to learn more about the WYSIWYG editor built into WordPress. WYSIWYG stands for what you see is what you get. The editor itself is called tiny MCE and it's actually used in a wide variety of content management systems, not only WordPress, so you might see it someplace else as well. There's actually excellent documentation on their website to learn all the details about it but we're gonna cover what it can do for you within WordPress.
Here on the left end of the toolbar you can choose what kind of text we're dealing with: regular-sized, paragraph text, any of these headings or pre formatted text. You also don't have to highlight the entire section to have it affected. For example, I turned this into a header size 1 just because I was clicked on it when I chose header 1 and there's header 2, 5, etc. The same holds true for bold and italics although it affects only the word.
Here we have a bulleted list option. You can click on a line and choose bulleted list and get one. Then when you hit return it starts another and so on. You could also turn it into a numbered list like that. You can also start the sentence with an asterisk and it will automatically turn it into a bulleted list.
If you start a line with a number 1, a dot and a space and it turns it into a numbered list. The next button here is called block quote. It puts a block quote HTML tag around your text. Now here in the editor it simply makes it slightly larger and italicises it, but your theme may render it completely different so you want to experiment to see what this looks like before using it. You have the option to left justified text, centre it or right align it.
The next button is for making a link. Now the editor has quite a few tricks up its sleeve for links. If you highlight a word and click this then you can simply type something in and hit enter and now it's a link. Now if you click it again, you have the option to edit it or unlink it. Now you'll note that there's a year over here on the right. If you click that you get a great many more options. You could still type in an address here or you can link to some content already on your site and you can search your entire site for all your content and link to it that way. Here you have the option to open link in a new tab. Now there's one more trick I want to show you. If you go to another site and copy its address you can highlight a word and click paste and it magically turns that word into that link. So it doesn't replace the word with the address you copied, it makes the word a link to that address.
Now this next button is simply for removing links which is a little redundant since you have one here as well. However you could do something like highlighted whole blocks of text and remove all of the links. The next button makes a more tag.
Now in WordPress on your home page you may see the entire post but what if you only want a little bit of the post and then make them click to read more? That's exactly what this button does. So now on the front of the site they would only see this is my content and then read more button. They would not see this text until they clicked to go to the single page for that post.
Now there's one more button here that gives us a whole new bar. Here's a button to make a horizontal line which simply makes a visual divider.
We can manage text colours and then here we have the paste as text button and this is important. If you simply copy some text from another webpage and then paste it here it keeps the header size. You'll see this as a header size 3 and this is a blockquote. However, if you click paste as text, it says WordPress is now in plain text mode. Contacts will be pasted as plain text until you toggle this off. So now let's turn on and now I pasted again and you'll note that it did not do anything with this text it left it as plain and now I can turn it off and we're back. Now you may want to keep all those headers, and that's very useful, but during times you don't this button can be useful. It's extra useful when copying from something like Word or Google Docs.
The next button clears formatting. So if you make this one bold and this one italics and the whole thing a bulleted list, you can highlight, clear formatting and it keeps the bulleted list but it got rid of the bold and it got rid of the italics.
The next button is for putting in special characters. These are characters not found on most American keyboards. There's the cents sign, the Euro sign, Pound, yen, trademark, etc. You simply click one and there it is.
Here we can decrease and increase indent, so I can highlight all of this text and indent it and then uninvent it.
Here we have an undo button and a redo button and then a keyboard shortcuts button and these are keyboard shortcuts exactly like it says. Remember how I showed you that you could start one line with an asterisk and it would make a bulleted list? You can do the same with a hyphen and a numbered list works like this; you can start a blockquote with this; you can start these headings with these; you can italicise, copy, select all, redo, etc. Once you start using WYSIWYG editor a great deal, these shortcuts can save you a lot of time.
Down at the bottom you'll note that there's a word count. If this matters to you, it's pretty handy. If not, well...you don't have to use it.
WordPress automatically saves drafts of your posts. This isn't part of the WYSIWYG editor. WordPress is doing it, but the information about those drafts is right here in the editor. So this draft saved at 12:49 and you probably just saw a flicker that said it was saving.
In the top right here you can switch to text mode and here we have plain HTML. If you like HTML you can work here quite comfortably and then you can switch back to visual.
This button here is called distraction free writing mode and when you click it everything else goes away until you move the mouse. Now you can move the mouse down into your editor but once you move it off the main area then the sidebars come back. This is handy if you just want to write.
There are add-ons and plugins for WordPress that can extend this editor so you may end up seeing more buttons than this as you add things to your site but this is the core of the editor.

Tags: WordPress

OSTraining

Support

OSTraining teaches people how to build great websites, focusing on PHP platforms such as WordPress, Joomla, Magento and Drupal. You can learn more about there service by visiting OSTraining.com or by subscribing to their Youtube channel.