Using The Visual Editor In WordPress To Style Your Text
About This Lesson
Creating content in WordPress is similar to creating content in Microsoft Word or Google Docs.
You simply add your text into a page or post and then use a visual editor to make some of it bold, italic, underlined, lists, or links, etc. By using the visual editor, you don’t need to know any HTML, CSS or any other code.
In this lesson, I’ll be walking you through exactly how to use the visual editor. (You’ll probably already know how to do 95% of what I’m about to show you. It’s that easy.)
Before starting this lesson, I recommend that you,
It’s also worth noting, this is a part of a series of lessons, which show you how to create the content for your website. You can see the other lessons in this series, by visiting the links below.
By the end of this lesson you’ll understand all of the following,
Read All About It
How To Apply Formatting to Your Text
If at any time you want to apply formatting to your text (i.e. bold, italic, underline, lists, etc), simply highlight the text you want, then press the format you want to apply to it.
What The Buttons Do – First Line
Like I said in the intro, you’ll probably already know how to do 95% of this, but let me quickly show you what all of the buttons on the first line of the visual editor do.
1) Bold: – This lets you make any of your text bold.
2) Italic: – This lets you make any of your text italic.
3) Strikethrough: – This lets you add a line through your text.
4) Bulleted list: – This let’s you add a bullet point list.
5) Numbered list: – This let’s you add a list, which is ordered by numbers.
6) Blockquote: – This let’s you put text into a quote.
7) Horizontal line: – This let’s you add a horizontal line, which you can use to help break up your content.
8) Align left/Align center/Align right: – This lets you align text or images to the left/center/right of the page.
9) Insert/edit link: – This let’s you create links to anywhere on your site or to any other website.
To add a link, simply highlight the exact text you want to be clickable, then click the insert/edit link button. When you click this button you’ll get the following,
- This is where you can manually type out the link address. If you’re linking to another website, make sure you have http:// at the start
- The text you enter here will be what is “clickable”
- If this box is ticked, when a visitor clicks on your link it will open in a new window/tab in their browser
- If you want to link to a page or post you’ve already published on your site, press the drop down arrow and scroll through this list
- When you’re done, click “Add Link”
10) Remove link: – If you no longer want a link, highlight it with your cursor, then press this button and it will be removed.
11) Insert Read More Tag: – You can split your blog posts, so only the first part of a post is displayed on your blog page. Then if visitors to your site want to read the full post, they have to click the “Read More Tag”.
As an example, the image below shows me inserting the “Read More Tag” into a blog post.
And this is how the blog post looks on the blog page.
Notice how the content ends where I’ve inserted the “Read More Tag”, but there’s a link to the full post. Once clicked on, the visitor will be taken to the full post.
12) Distraction Free Writing: – When you click this option, you’ll see something similar to below.
This removes all of the extra sidebars and options within WordPress, so you can focus on just writing your content.
13) Toolbar Toggle: – This lets you see/hide, the second line of formatting options, which I’ll cover below.
What The Buttons Do – Second Line
1) Styles: – This lets you add headings and a few other styles to your text.
Headings: – Are just like you use in Word. They make it easier for people who might just be skimming your article, trying to figure out if they want to read more.
Heading 1 is normally the title of the article. After that I normally only use headings 2, 3 and 4.
Headings normally get smaller in size as you go down the numbers, so 1 is bigger then 2.
Paragraph: – This is for your main text.
2) Underline: – This lets you underline any of your text.
3) Justify: – This is similar to the align left, align center and align right, however, in this case the “align full” adjusts character spacing to make your text touch both the left and right margins of the page.
4) Text color: – This lets you change the color of your text.
5) Paste as text: – When you copy and paste text from another website or a document, you’ll see that sometimes it applies formatting to the text.
Unfortunately at times this can make your text look horrible, or add extra spacing, or just not look right.
To stop this from happening, before you paste any text into your content, press this button. Then when you paste text into your content it’ll paste as plain text – without any formatting.
6) Clear formatting: – This let’s you easily remove any formatting you’ve applied to your text. To do this, simply highlight the text and click this button.
7) Special character: – This will let you insert custom characters like © or ™ or À or e=mc².
To use this, make sure your cursor is where you want to insert a character, then click this button.
A popup window will appear which looks like below. Just select the character you want and you’re good to go.
8) Decrease/Increase indent: – This let’s you indent some of your text or a list item.
So for instance, this piece of text has been indented
And here’s how list items look when you indent them,
- This item hasn’t
- This item has been indented
- This item makes all the other indents jealous, because it’s been indented twice.
- This item has been indented
9) Undo/Redo: – This will undo/redo your last actions.
10) Keyboard Shortcuts: – Instead of pressing all the buttons within the visual editor, you can use Keyboard Shortcuts, which you’ll see listed in this button.
And that’s it for the visual editor!
How The Formatting Looks On Your Site
How these formatting options look on your site, will vary depending on the theme you’re using, as each theme will add it’s own style to these formatting options.
For instance, here’s how some of the formatting looks with one theme.
Here’s how the exact same content, with the exact same formatting, looks on the flounder theme.
And here’s how the exact same content, with the exact same formatting, looks on the default WordPress Twenty Fourteen theme.
All I did to change the design, was to switch themes in WordPress. (I’ll show you how to switch themes in a future lesson.)
Some themes will allow you to change the sizes, colors, styles, spacing, etc, but not all themes do.
And that’s it for this lesson. You now know how to style your text within WordPress.
I’ve created a number of lessons for you, so you can see exactly how to create the content for your website,
- Learn how to use the visual editor to style your text
- Learn how to add media into your content
- Learn how to embed YouTube videos
As I talked about in this lesson, how your content looks, will depend on the theme you’re using.
So rather then creating all your content now, with a theme that’s going to be styled one way and then changing your theme, to a theme that’s going to be styled completely differently, I recommend picking your theme first and then start creating your content.