Build Your Own Business Website header image

Using the WordPress Text Editor

Difficulty Level -

Filed Under Topics -

Listed Under Lesson Subjects -

Applies to -

Whoops, you've found some premium content!

Watch the opening clip of this video to preview it,
the full video is available to paid members.

You will be spending a lot of time in the WordPress text editor as you create your small business website so that’s what we are going to look at next. Let’s start at our home page. You can see the text editor by clicking on edit.

Dashboard vs Distraction Free Mode

The text editor has a couple of different modes and a couple of different views. I refer to the modes as the dashboard mode and the distraction free writing mode. This is the dashboard mode where you can see all the stuff around you. As you type more and more you just keep going down the page. The top of that page is right here and so you’d scrolling through this. This is the dashboard mode.

The distraction free writing mode is this here. You can click on this and all of a sudden everything else goes away. As long as you keep your mouse in here you can see these buttons and you can open up the kitchen sink so you can see all the rest your toolbars. Although, interestingly it doesn’t call it kitchen sink anymore, that’s new in 4.7. It used to be called the kitchen sink but now it’s a toolbar toggle that shows you all of your tools.

If you’re looking at your typing area and notice you don’t have all your tools then go over to this end one and click on it to bring up all the rest of the tools. Otherwise don’t have anything else around distracting you. If you want to get back to the normal mode all you have to do is hover your mouse over one side and if you want to go back to distraction free mode you click that icon.

Visual View

Then you have two views. Let’s begin with the visual view which is in many respects of wysiwyg view – what you see is what you get. It’s not always that way though. There are lots of themes that don’t implement wysiwyg in the text editor and so what you see is not what you get.

However, more and more WordPress and themes are implementing styles in the text editor so that when you insert media alongside of text it shows up exactly where it’s going to show up in the page. For example, if you insert an image alongside of text it shows up exactly what’s going to show up in the page.

Another example is when you are typing the text starts wrapping once it gets to the end of the text area on the page. So it doesn’t extend all the way over to the end area of the editor area if the content area only takes up part of the page. Let’s take a look at that. I’ll paste in a paragraph of text. This is how wide the content area is and if I try right to go beyond that, it keeps on wrapping.

You can see the font style that is being used in the visual view. If you take something and bold it, for example, you can see what that will look like on the page.

Text View

The text view is the one that we used to call the HTML view. It essentially shows you an HTML-like view of the content. If you’re going to try to type HTML into the text editor this is the place to do it.

For example, if you want to put in a div tag or you want to add a span tag or you’ve got some complex HTML that you want to insert into the content of this page, the text view is the place to do it because it preserves your HTML.

If you were to type it into the visual view it’s not going to have the desired effect. For example, I’ll add a span tag, span style equals color red. When I do that there’s some HTML but it’s not doing what you would think it would do you just tell that in this view. But when you come over the text view you can see it’s not working. It’s not even displaying the actual code there, it’s escaping the HTML instead so it doesn’t do you any good. So if you want to include this kind of HTML, the place to add that is in the text view.

Tools in the Visual View

Let’s look at the kinds of tools we have here in the visual view. You can choose the kind of text you want like heading 1, heading 2, heading 3. To apply these all you have to do is put your mouse someplace in the line you call that heading 1 that whole section of text is going to become heading 1. It’s not just that one little section everything is going to become that way.

Adding Headings and Styling

If you want just this text to be a heading, you have to hit enter and break it away from the rest of the text. Then you can make this a heading instead of just being paragraph text which is the standard text. The same thing is true with pretty much everything here. For any of these choices all you have to do is put your mouse someplace in the text and the entire block will become whatever it is you choose there.

Sometimes you just want a small piece of text changed. For example, if you want to bold a phrase or part of a sentence, you select that bit of text and then click on the B icon. The same thing is true for italic. You can select the items that you want to be in a list and you can choose bulleted list or numbered list.

You can add block quotes within the text. Choose the quote that you want to highlight and then click block quote and it will put it in the block quote style. It will bring the block quote styles along with it as long as your theme supports that.

Why You Shouldn’t Use Text Justify

You can center your text by putting your mouse in the middle of the text and selecting center. In WordPress 4.7 the justify button is gone. The reason the justified button is gone is because it’s very bad practice in the age of mobile devices to try to justify your text across the width of the page. It makes it very difficult to read and it also makes it difficult for the browser to figure out where to break the text. This is especially true on a mobile browser. So it’s you don’t ever want to use that justified button and it’s gone from WordPress 4.7 because of that.

You also have the ability to add a link and the ability to insert a read more tag. Read more tags are useless on a page but are definitely useful on blog posts. We’ll talk more about that later.

There is limited font styling that is available. There’s strikethrough and horizontal rule. Let’s just say you wanted a horizontal rule in between these two things. Put the horizontal rule there and now you’ve got a horizontal rule.

Using Color in Text

You can change text color but I strongly encourage you not to use this. If you use this and you have a hundred pages or a hundred blog posts and you change your theme’s colors at a later date it will be painful to change that inline styling. If you change your branding colors and you use colors here for like headings and that sort of thing you are going to have to go back and change every single post to your new branding colors.

The right thing to do if you want your headings to be a certain color is to use your themes options to style headings rather than using what are called inline styles which is what this text color is.

This clear formatting can be used. I’ll show you how it works on that text we styled red using inline styles. I select it, click the clear formatting and the red went away. Come over to the text view and you can see that the span tag was deleted.

Additional Styling

You can see when I made that italic, it added em tags around it. When I made this bold, that added strong tags around it. You can do the same thing on in the text view. If you want to make this bold you can select a the text and then hit b and it will wrap it with strong tags.

You can see it’s wrapped this whole thing in a block quote. You can also do block quote, link, the line through here in the same way.

You can insert a special character, you can set up indenting and you can undo. If you want to know the keyboard shortcuts for this, click that help button and and it will show keyboard shortcuts for this editor. If you if you’re the kind of person who likes keyboard shortcuts, you’ll find it makes your life a little bit easier.

0 Comments… add one
0 comments… add one