If you run a blog or website through WordPress then you should be pretty familiar with the WordPress visual editor, but sometimes we can dive right in without exploring tools and options. Here’s a quick rundown of the tools available for your formatting needs.

wp-tools

  1. As the button says, this is how you add media and images to your posts. You will have the choice between uploading new images, or adding images that are already in your media library. Formatting images can be tricky, so we’ll cover it in more detail in another post.
  2. These tools should be familiar to anyone who uses a word processor such as Microsoft Word. They are the Bold, Italic, and strikethrough tools. To use them just click the tool you want, type your content, and then click again when you’re done. Alternatively, you can highlight the word you want to apply it to and then click.
  3. These tools are for creating ordered and unordered lists. Ordered lists use numbers to list content, while unordered lists use bullet points. To use these tools simply click the appropriate button and start typing. The numbers/ bullet points will automatically be inserted every time you do a hard return (Hit Enter). For example, we’re using an ordered list for this post. An unordered list would look the same, but with bullet points instead of numbers.
  4. This tool is used for creating block quotes. Block quotes are used when you want to highlight an important quote. The exact look and formatting of the blockquote can change depending on the theme you’re using. For an example of a block quote:

    “When I first came here, this was all swamp. Everyone said I was daft to build a castle on a swamp, but I built it all the same, just to show them. It sank into the swamp. So I built a second one. That sank into the swamp. So I built a third. That burned down, fell over, then sank into the swamp. But the fourth one stayed up. And that’s what you’re going to get, Lad, the strongest castle in all of England.”

  5. These are also common formatting tools that most people should be familiar with. They allow you to control whether your text is aligned to the left, center, or right side of the document. The default is left align, as it is the easiest to read, however there may be stylistic reasons to use center and right align. For example:

    This is text an example of a paragraph that is aligned to the left side of the document. It’s the easiest to read and generally the best choice for most cases. You’ll want to keep large sections of text left aligned unless you want your audience to become violent.

    This is text an example of a paragraph that is aligned to the center of the document. It’s not very easy to read but it can work for certain styles. If you have a section of center aligned text, try to keep it short. Never use it for long pieces of important information.

    This is text an example of a paragraph that is aligned to the right side of the document. It’s pretty annoying to read and not usually recommended but you might find a use for it. If you have a section of right aligned text, try to keep it short. Never use it for long pieces of important information.

  6. The first button of this pair is used to create a link to another page/ website. The second button removes a link from a section of text. Normally these buttons are “greyed out” and unclickable. To create a link; highlight the text you want to turn into a link. The buttons should then become clickable. Clicking the link button prompts a pop up menu. The first input box is for the URL for the webpage you want to link to. The second input box is to give the link a title. The last option is a check box that when checked, opens the linked webpage in a new browser tab. For example, this link will open our Blog Page in a new tab. If you change your mind and want to remove the link, just highlight it and click the button with the broken chain. 
  7. Do your blog members have to scroll through full sized articles to find the content they’re looking for? It can be annoying to scroll through so much text when looking for specific posts. It’s a pretty common practice to list articles with previews that prompt users to continue reading with a “read more” link. Using previews keeps your main blog page compact, organized and easy to browse through. Use this button when you want to create a preview. After you’ve written the intro to your post, click the button. A divider will appear. Continue writing the rest of the article under the divider. When you publish the post, the text above the divider will show up as the preview on your main blog page. Your readers will be able to view the rest of the article by clicking the link at the bottom.
  8. This button is used for spell checking your work. These days most browsers have spell checkers built in, but it can’t hurt to be extra careful. Clicking the little arrow next to the button brings up a drop down menu that allows you to choose which language to spell check in.
  9. Click this button if you want to edit your post in full screen. Doing so clears the other WordPress menus on your screen allowing you to work in a cleaner distraction-free page. When you’re done you can close full screen with the link in the top left corner of the page.
  10. Use this button to show/hide the “kitchen sink.” The Kitchen sink is the second row of tools in the tool bar. If your tool bar doesn’t look like the image at the beginning of this article, click this button to show the second row. Alternatively, you can use it to de-clutter the tool bar if you don’t plan on using any of the tools in the second row.
  11. This drop down menu allows you to choose from a list of formats for your text. The most common use for this option is to create headings. By default there are 6 sizes of headings available, as well as your regular paragraph format, and a few others. The formats generally look different depending on what theme you are using. To change your text’s format, you can highlight a section and choose your desired format from the drop down. You can also start by selecting your format before you type out your text. For header examples:

    This is the largest heading format

    This is the smallest heading format
  12. Back to the basics, this button lets you underline text. It works the same as the bold/ underline/ strikethrough buttons.
  13. This is known as the Align Full tool (Also known as justified align). This option is similar to the left/ right/ center align tools. It causes the space between your words to stretch or compress to align your text to both the left and right margins. The result is a block of text with no indents, however the spacing between words can be awkward. For example:

    This is an example of a paragraph with justified/ full align. Notice how there are no indents on either side of the paragraph. Can I offer you some Lorem Ipsum text to fill space? Fusce blandit turpis eu commodo tristique. Nam non lacinia massa. Mauris pulvinar diam sit amet urna varius, vel vehicula nisl bibendum. Ut rhoncus, nibh et cursus porta, felis nisi facilisis nisi, ut pretium lectus nisi vitae neque. Proin in leo vulputate, dapibus libero id, fermentum justo. Donec quam elit, vestibulum semper dictum ut, aliquam non ligula. Donec velit lacus, iaculis nec ultrices sit amet, porta sed ipsum.

  14. Want to add a little colour to your posts? Use this button to change the colour of a section of text. The little arrow on the side brings up a palette of colours to choose from. Just try not to get too crazy. Remember, some colours are really hard to read. Don’t make your readers want to claw their eyes out.
  15. Have you ever copied from a document with formatting, only to have the text keep it’s formatting when you paste it somewhere else? Pretty annoying. Sometimes you’ll end up with large coloured text, background colours, weird spacing and other formatting issues that clash with your post. This tool lets you paste content copied from other documents as “plain text.” Clicking it brings up a pop-up window where you paste your text. Then you simply click the insert button.
  16. Did you type up your content in Microsoft Word? Word processors like Microsoft word are great for documents that are meant to be printed, but they produce rather messy HTML for the web. In other words: pasting content from Microsoft Word might look fine, but a quick look at the HTML (For those who understand it) would reveal unnecessary stuff got pasted along with it. Whether or not you understand HTML it is good practice to use this tool when pasting content from Microsoft Word. It works similar to the plain text tool from #15.
  17. Did you change your mind after formatting some text? Rather than going through each word and changing it back, you can simply highlight the whole block of text and click this button. Ta-Da! The formatting was removed. It works on bold, italic, underlined, and coloured text.
  18. It can be a pain to remember keyboard shortcuts for special characters. This tool brings up a list of special characters that you can insert into your post. For example © ® ™ ♥ are special characters you won’t find on your keyboard.
  19. Use these buttons to add or remove an indent to your paragraph.
  20. These are the undo/ redo buttons. Undo works the same as the command + Z  shortcut (Control + Z  on a PC). Do you regret the change you just made? Hit Undo. did you change your mind and want it back? The Redo button is where it’s at.
  21. This button brings up a window with helpful information on using the visual/ HTML editor, and a list of WordPress hotkeys.
  22. This changes your editing space to the visual editor. Chances are you’re already using it. It allows you to write and format your posts without knowledge of HTML.
  23. This tab brings you to the HMTL editor. You probably won’t have to worry about it unless you understand HTML. It is handy to have the ability to write/ edit HTML as it is more customizable and lets you avoid some of the hiccups you might encounter in the visual editor. However, if you’ve got no clue how HTML works, it’s best to not mess around in this tab.

It can be easy to forget that some of these tools are available to you but I hope this guide helped to give you a better understanding of the WordPress Visual Editor tools. Have fun blogging!

 

IF YOU ENJOYED THIS POST, GET UPDATES. IT'S FREE

Join hundreds of others who are recieving exlusive content. For Free.

You have Successfully Subscribed!