Using the WordPress Visual Editor

WordPress

Once a client gets on my studio queue, I do a comprehensive brand audit. I look at everything, including their posts. Most of my clients want to improve their SEO, so during their 8-12 week homework/strategy time, they clean up past posts. In posts, the improvements focus on removing additional styling and optimization using the WordPress visual editor.

The formatting of a blog post contributes to its SEO effectiveness. My quick checklist for posts include the following:

  • at least 300 words, relevant to the keyword
  • catchy title, relevant to the keyword
  • using h2 tags within the post
  • internal and external links
  • short paragraphs

This blog post will walk you through the WordPress Visual Editor, explain the difference between it and the text editor, and outline things you should avoid (and why).

How to Use the WordPress Visual Editor

Difference between WordPress Visual Editor and Text Editor

In each post and page (and now widgets), you will notice two tabs – visual and text. Either one allows you to put content into the text area. The visual editor is the one you would use 99% of the time. The text editor is often only used to troubleshoot or add specific codes.

The visual editor is referred to as a WYSIWYG: “What you see is what you get”. You see the formatting in the post – headings, links, blockquotes, and images. It doesn’t look exactly like it does in the post, but you can get a good idea of the formatting structure.

The text editor displays everything in HTML, so you do not see the formatting of the posts like in the visual editor. You will only use the text editor if you need to add a script to your post, or you are doing a massive cleanup of posts after a transfer.

The Toolbar

Initially, you will only see one row of icons in the toolbar. Select the Toolbar Toggle to display all of the icons.

  • Style Dropdown: Define paragraphs, headings within your post/page (more below).
  • Bold: Adds weight to text, bolds it.
  • Italic: Adds italicize to text.
  • Unordered List: Creates a bulleted list. You can click the icon to begin a list, or highlight text and then add bullets.
  • Ordered List: Creates a numbered list in the same way as unordered lists.
  • Blockquote: Is a stylized paragraph or quotation. It formats different than other paragraphs or headings, and the styling depends on your theme.
  • Left Align: Aligns content to the left.
  • Center Align: Aligns content to the center.
  • Right Align: Aligns content to the right.
  • Insert Link/Edit Link: Adds a link to a page, post, or external URL (more below).
  • Remove Link: Removes a link for a selected text.
  • Read More Tag: Adds a “read more” button to a full post. This considers everything before the tag as the excerpt. It should be used sparingly, as most themes have moved away from using this button.
  • Spell Check: Checks the spelling and grammar in your post.
  • Toolbar Toggle: Displays the second row of visual editor tools.
  • Distraction Free Writing: Fills the entire browser window with the editor.
  • Strikethrough: Adds a strikethrough to text.
  • Horizontal Line: Inserts a horizontal line (<hr>). This line can be used to define separate sections.
  • Text Color: Change the color of the text.
  • Paste as Text: To avoid pasting in extra styling, you can paste text from another web page using this button. If you are on a Mac, a shortcut for pasting unformatted text is Command (⌘) + Shift + V.
  • Clear Formatting: Removes all formatting (bold, italic, underline) from the highlighted text. It also removes any additional styles added to the content. This functionality is very useful if you just transferred your blog over from Blogger or if you added a lot of funky colors and extras to your posts.
  • Special Character: Add special characters such as copyright (©) and trademark symbols (™) to your content. The button will display a popup with available characters.
  • Decrease Indent: Removes indenting on a block of text.
  • Increase Indent: Adds indenting to a block of text.
  • Undo: Goes back to your last action.
  • Redo: Redos your last action.
  • Keyboard Shortcuts: Displays a list of keyboard formatting shortcuts.

How to Use the WordPress Visual Editor

Style Dropdown

Out of everything that I reviewed, you will use the style dropdown the most. It allows you to apply styles to paragraphs and blocks of text. Even if you highlight a few words of text in a paragraph, it will apply that style to the whole paragraph.

  • Paragraph is the default style. It is the normal body text used on your website. As a result, you won’t have to select it often. If you apply a different styling to a paragraph, then change it back. That’s when you will use it. Any paragraphs on your site should use the paragraph format.
  • Heading 1, 2, 3, 4, 5, and 6: Headings allow you to call out main ideas within your blog post. Search engines scan for headings in order to know what the page is about and what phrases are most important. The number signifies importance, i.e. 1 is the most important and 6 is the least. For most blogs, I recommend they use 2-3 H2 headings in their post. Your post title is often an H1 heading if your theme was built correctly.Each theme styles headings differently. You do not want to override the styling in the post, but instead, make system-wide adjustments to your headings in the theme CSS file. This will allow you to apply changes to all posts at once, instead of avoiding manual clean up (more on this below).
  • Preformatted: Displays text exactly as you entered it – pre-formatted. This style is rarely used except to display code.

How to Use the WordPress Visual Editor

Inserting Links

Each blog post should include at least 3 links. Often these can be a combination of internal (within your site) and external (outside your site) links. In order to add a link, you can either press the ADD LINK button in the toolbar or use the shortcut Command (⌘) + K.

When you add a link, you want to follow these steps:

  • URL: Add the URL to the webpage you want to link to. It should begin with “http://…
  • Link Text: Displays the text of the link:
  • New Window/Tab: Checking this button will open your post up in a new link/tab. If you are linking outside of your website (external link), check this box. This will help with your bounce rate.
  • Add Link: After you’ve completed all fields, select ADD LINK at the bottom.

Post Formatting Best Practices

When writing blog posts, people tend to either do too much or too little. They either add into many extras, or they don’t format their posts enough.

Avoid Post Specific Styling: Use the style dropdown to add formatting to your posts. Avoid using any other plugins or editors to change the fonts, sizes, and colors in your posts. When you add different formatting from post-to-post, you are losing design consistency. Trust that your theme designer has picked the best colors and fonts for your brand based on their expertise. Furthermore, when you add within individual posts, you will have to go through each post to manually change or remove it in the future. If you want to update your theme styling, you can Edit CSS to change it throughout your theme!

Do not use Images for Text Blocks: People tend to make style graphics for headings, such as a post signature, Shop the Post, or Monday Recipes. They repeat these graphics for each post. Search Engines do not read images. These images do not have the same importance as heading tags. If you want to call out text, use heading tags. You can stylize them using Edit CSS so they have fun formatting.

Image Alignment: Put your images in as full-size. You want them to align nicely with the text block of your post. This blog post outlines best practices for optimizing your images. When the text and the image align in a nice line, the formatting of your posts looks professional and editorial.

You Might Also Like: How to Successfully Complete a WordPress Post + How to Use WordPress Tags

Want more WordPress tutorials? Check out these posts! If you have any questions, leave a comment below.