WordPress Edit Options: the Icons

WordPress Edit Options Explained

In the following video, I will show you how to use the icons that sit above the edit pane when you are editing a page or a posts.  WordPress is by no means a  full blown word processor but there is a lot that you can do if you know how.  This includes making text bold or underlined or even creating a list that is nicely coded with HTML.

Some of the information in the video might not quite suit your particular web site set up but you should get a good idea of editing posts and pages despite that. For instance, I mention the Insert More tag which adds a kind of separator in a post that determines how much is displayed on your blog page. Not everyone uses that but it is a useful feature.

The Icons

screen shot
The Edit Icons

Just in case you need a reminder here is a list of the WordPress edit options:

from left to right on the top row:

  1. Bold
  2. Italic
  3. Strike Through
  4. Ordered list
  5. Unordered list
  6. Blockquote
  7. Align Left
  8. Align Centre
  9. Align Right
  10. Insert/Edit Link (grayed out)
  11. Unlink (grayed out)
  12. Insert More Tag
  13. Full Screen (Distraction Free)
  14. Show/Hide the Kitchen Sink

And from Left to Right on the Bottom Row

  1. Format Options (drop-down)
  2. Underline
  3. Align Full
  4. Text  Colour
  5. Paste as Plain Text
  6. Paste from Word (Microsoft Word)
  7. Remove Formatting
  8. Insert Custom Character
  9. Indent left (greyed out)
  10. Indent Right
  11. Redo (greyed out)
  12. Undo
  13. Help

Video Transcript

Hello, in this video I am just going to show you what the row of Icons mean above the edit pane in a WordPress page or blog post
I have just opened here in a post that is half way through being edited and as I say, all I want to show you are the row of icons that sit above the edit pane.

The first one is B for bold.  These are quite obvious aren’t they? I for italic, this is strike-through, that is text that you want to leave
in the post but show that it is crossed out.  You might use that if you are going to edit some of the text and you want to leave the old information in.

Then there is an unordered list and an ordered list.  Then there is block-quote.  Then these three are justification.  Or align left, align centre and align right.  These two at the moment are greyed out; those are for adding or removing links to text.  This one is the insert more tag. This one is to go full screen and this one has always been called Show and Hide the Kitchen Sink.  When you click on that one you get another row of icons underneath here and I will show you some or all of those in this video.

This one here, the Blue R, comes with the theme that is being used at the moment and I am not going to talk about that any further.  So lets just look at how to use these and for the moment I will turn off Hide and Show the Kitchen Sink.

If you want to bold a piece of text then just highlight the text and click Bold, simple as that.  And there you can see the text is emboldened.  If we were to save the draft and preview (I am going to open it in a new tab
Then at the top we have the tab of the preview page) and there you can see the word experience is emboldened.  And equally, if you want to turn that off, you highlight it again and turn off the text.  It is the same for italic and strike through.

Lists are a little bit different and I will show you those now.  Let’s add some more text and just go, “Item One, return, Item Two, return,
Item Three, return” and now highlight that text and click on the list and you can see that WordPress formats that as a bulleted or unordered list.  The same would be for a numbered list and this time, clicking this button, sets the list as an ordered list and it numbers the items One, Two and Three.

Block Quote this one here, is really used if you want to add a quote so let’s say, “Martin stated something very critical in his tutorial: Be careful how much you use the formatting options”

Then I highlight just that line and click the Block Quote and it sets the text apart a little.  Save the draft.  Refresh the page and here we see now and there is some particular formatting added to this text which we have set as a Block Quote. So it is really only to be used if you are genuinely quoting somebody.  Again let’s remove this.  By the way, that statement is quite important because the more of this formatting you use in a page the more code you add into the page and the “heavier” the page gets.  So I am just going to delete that and now let us have a look at some of the options if we Hide/Show the Kitchen Sink.

This one, this drop-down list is probably one that you will use quite frequently.  And you can see here we have got a subheading and if I click on that
you can see that the drop-down list shows you that it is set at a heading two.  Now, these heading numbers are not numbered as they go down the page
So it is not, heading one is at the top, heading two is underneath that, heading three is  underneath that.  They are numbered in terms of their relationship. So if we wanted to set a subheading of what is a mid-life crisis we would use heading three.

But all I have to do then is after typing the text, click on that line and set it as a heading two.  There you go.  Let’s publish that.  Let  us save the draft, not publish nip up to our preview page, refresh the page and there you have your next heading.  Now it is important to note that that is a subheading two this is a subheading two and this is the heading one, the title of the post which was already set for you when you set your post up.  Heading One; Heading Two; Heading Two.  And if we had as I say, a subheading of this section somewhere in the middle that would then become a heading three.  So they are hierarchical rather than numerical if that makes sense.

Let’s go back to the post and see what the other options are.  This option is called Align Full.  This one obviously, is underline so you would, if you wanted to underline some text you would highlight the text, click on the underline and there, I hope you can see that it is indeed underlined, but we will turn that off.  One of the problems I think, with underlining text on a page is that it can confuse people and make them think it is a link.  So, that is one to be used very sparingly. If you want to emphasise text I think the best option is to use italic and/or bold but probably, just one of them is enough.

This one is obviously the colour of the font.  Can’t think of many reasons why you would want to change that but there it is.  And this one and this  one
is if you want to copy and paste in to the post itself. So let’s just just copy some of this.  Right click on it and go copy.  And then if we click that one you get a pane here where you paste your text in, you can quickly review it and then insert into post.  This one is specifically if you want to past from a Word document.  And the reason that you have a special one there is that WordPress will strip out any word coding that comes along with the post itself.

This one Remove Formatting will do exactly what it says.  If you add italic, bold and underline say, to a piece of text like that and you want to remove the formatting.  Then, that is the button to go for.   Finally this one, Insert Custom Character. Now custom characters are those characters you might use occasionally.  A common one might be copyright, a pound sign or a Euro sign; WordPress is using particular computer code to put them in there.

This one, indent left: indent right, sorry.  Highlight the text, click and you have pushed your paragraph in a little bit.  This one, if you make a mistake, obviously, it is undo and we undid the indent right as well.  And then there’s the little Help option there for you.

Now if you go in to the text side of things, you will notice that you get different sets of icons there as well.  And really they are a little bit more technical but they do pretty much the same or some of the same things that are available in these icons across here in the visual editor.

So, that is it really.  That is an explanation of what each of these icons are used for.  One I didn’t tell you and that is here, the add more text.  This one, when your posts are presented on the posts page, the list of posts or items, You don’t want the full text to appear in there so, find a natural break as early as you can in your text and use this insert more text there.  Now that will not show on the preview page and it won’t show until the post is published but take it from me, that is a good thing to do because it keeps the posts page, the all posts page, nice and neat and tidy. And I will leave this video there because I think now that really is it, so hope that helped!

Leave a Comment