WordPress Basics: Primary Formatting Toolbar

2014-06-15 by Jim Goodrich

There have been some changes in the latest versions of WordPress and they affect the formatting toolbars, so I decided to start a new video series on WordPress Basics. Here is the first in the new series. The Primary Formatting toolbar.

If the video doesn’t appear above, you can watch it here.

As an added bonus, as they come up, I’ll include Best Practices Tips. Tips that could apply to a variety of things such as SEO (Search Engine Optimization), section 508 accessibility compliance or things that just make good sense for a website. Look for the Best Practices Badge to pop up in the video.

First in a Series of videos about WordPress Basics. This video is about the Primary Formatting Toolbar, which works functions exactly the same way whether you are writing a Post or a Page in WordPress. See the published post that was built in the video.

The Basics of Blogging: Secondary Formatting toolbar

2012-09-10 by Jim Goodrich Leave a Comment

This post is on the Secondary Formatting toolbar. There are 13 buttons/droplists on this one and they’re going to take a bit more explanation and description. So here’s the list from left to right:

Header and Paragraph types
Underline*
Align Full
Select Text color
Paste as Plain Text
Paste from Word
Remove formatting
Insert custom character
Outdent (decrease indent)
Indent
Undo
Redo
Help

*Formatting described is used on the text in this post

The first button on this toolbar 1. Header and paragraph types, requires the most explanation or one specific reason. The formatting will rarely, if ever look the same between the visual tab on the create/edit screen and the published post/page, so it’s not exactly ‘What You See Is What You Get (WYSIWYG)’. this is because of the use of CSS (Cascading Style Sheets). It’s a good approximation of what it will look like.

Think of it like being invited to a Themed Costume party. The host knows sort of what you will look like because of the theme, but not exactly what you look like until you show up at the party. Same thing here. So let’s start with the styles.

The first choice on the preformatted drop menu is paragraph, the default font style for your blog. It’s your blog’s standard for posts and pages.

The second choice is address, and that’s what it’s made for, to put a specific styling on addresses. This paragraph in that style is not how it was intended to be used, but you get the idea.

The next choice is preformatted. This is the rare exception on these 
styles. It will look exactly the same on the edit/create screen and on
the published post/page. 
              It makes the text easy to copy and paste. 
                  This formatting is very exacting, unforgiving and 
                      labor intensive. 
                  Unless you already can see a use for this format 
              (like a code snippet
or an e.e. cummings poem), you probably won't use it much.

This is the Heading 1 selection.

This is the Heading 2 selection.

This is the Heading 3 selection.

This is the Heading 4 selection.

This is the Heading 5 selection.

This is the Heading 6 selection.

The second button is the 2. Underline button. It’s fairly self-explanatory.

The next button is the 3. Align Full button. The purpose of this button is to have flush right and left margins, no ragged edges on either side. The downside to this format is to achieve the flush line on both sides spaces are added between words and can make the spaces visually distracting (typographers call it ladders and rivers).

Next is the 4. Select text color button. You get a drop list with color choices for the text you have selected using click and drag.

The next two buttons work in a similar fashion.

The fifth button on the toolbar is the 5. Paste as Plain Text button.You use this button when you want to paste text into a post or page. That removes formatting that could cause problems with how the text is displayed on the page. It’s basically the safest way to make sure that your posts and pages look good.

Next is the 6. Paste from Word button. Microsoft Word has a reputation for adding a lot of code that if you simply copy and paste, will have your displayed text go wonky. It’s so prevalent that this button was created. Use it if you want to bring something over from Word.

The 7. Remove Formatting button clears the formatting you might have in a paragraph or selected text should you change your mind about what you used or just decided to make a change.

Next is 8. Insert Custom Character button gives you a drop chart of those extra characters so you don’t have to find the HTML code or the Number code or yourself to write a mathematical formula or a word in a foreign language with diacritical markings.

9. Outdent (decrease Indent) button. It seems a bit backwards to have this button first since you have to have some indented text before you can outdent or decrease the indent button, but that’s what it does. If you’re outlining a process and you have multiple levels, just click the button and it’s done.

And the 10. Indent button is the other half of the pair. Use it for a Multilevel numbered outline or bulleted list and this will give you the next subset level.

Next is another pair that seems a bit backward, starting with the 11. Undo button. I don’t have a deinitive answer as to how many actions you can undo, but I do know it stores over 20 of the last actions. This depends on whether or not you have saved as well. Saving will commit all the actions and thereby clear out the individual steps.

The other half of this pair is the 12. Redo button. This will reverse a lost of the actions taken and has the same constraints as the Undo button.

Last, but not least is the 13. Help button. Click that you get a popup box with four tabs “Basics, Advanced, Hot Keys and About” . Each tab gives you specific help on those areas of the toolbar and how it works.

So that’s an overview of the Secondary toolbar in the WordPress interface. More to come soon.

The Basics of Blogging: Primary Formatting toolbar

2012-09-06 by Jim Goodrich Leave a Comment

This post will walk through the most used formatting toolbar in WordPress seen on the Visual Tab at the top of a post when creating or editing a post. By default, there is one row of 15 graphical buttons on the visual toolbar (Extra buttons may be added at the far right by plugins). They appear in this order (from left to right):

Bold*
Italics*
Strikethrough*
Unordered (Bulleted) list
Ordered (Numbered) List*
Block quotes
Left – Align text+
Center – Align text
Right – Align text
Insert/edit link
Unlink
Insert More tag
Toggle Spellchecker (with multiple languages drop down menu)
Toggle Full Screen mode
Show/Hide Kitchen Sink (yes, that’s really what it’s called).

*Formatting described is used on the text in this post
+Text is left-aligned by default in WordPress

Each of the buttons has a keyboard shortcut which you can see if you place your mouse pointer over the top of the button and let it sit there, so I won’t go further into those.

The first nine of these buttons can be used in one of two ways. You can click it and the format will be applied to the text as you type or you can click and drag to highlight the text then click the button to apply the formatting only to that section.

The First three buttons, 1. Bold, 2. Italics and ~~3. Strikethrough~~ are used in the Ordered (numbered) list above and are fairly self-explanatory.

The next button is the 4. unordered list, more commonly known as bullet points. This is well suited for blog posts as it’s:

Eye catching
Easy to scan
Allows for the reader to get the point of the post very quickly

The next button is the 5. ordered list, also known as the numbered list (as seen above). It’s good for steps or when you have a set (like buttons at the top of the page) you want to reference in their order.

The next button is the 6. blockquote button. This is best for lengthy quotes from other authors, articles or blogs. it also works very well for testimonials on a page.

It visually calls out any quotes on your post or page.

The next button is the 7. align-left button. This displays your text with a straight edge on the left side of the page and a ragged edge on the right side. This is also the default alignment in WordPress.

The next button is the 8. align-center button. This will center your text on the page and can have a ragged edge on both the left and right sides. That depends on the length of the line itself.

The next button is the 9. align- right button. This displays your text with a straight edge on the right side of the page and ragged edge on the left side of the page.

The next button looks like link three pieces of chain linked together. It’s the 10. Insert/edit link button. This is a multiple step button. To insert a link, you type the text you want to be a link, then click and drag to select that text and click the button. This opens a dialog box with a field for the URL (web address the link points to), Title (this is what appears if you place your pointer over the link and it’s good for text readers and Search Engine Optimization SEO as well) and a check box asking if you want it to open in a new window/tab (if you’re linking to an external website, rule of thumb is you want to check this box so the reader still has your site open). It also has a droplist at the bottom titled Or link to existing content. this is to link to a post or page on your site, in that case you wouldn’t check the open in a new window/tab.

The next button looks like a broken chain. It’s the 11. Unlink button. All you have to do to use it is click somewhere in link text so your cursor is in the middle of the link, then click the button. This will delete the link information (URL, Title and checkbox) without deleting the link text.

The next button is the 12. Insert More Tag button. this can be used to split your post into displaying on more than one screen. This only works with a post, not a page. once you use the button, it will place a link at that spot that leads to the rest of the post.

The next button is the 13. Toggle Spellchecker button. You can use it on the post as a whole or any section you click and drag over with your mouse to select. The droplist contains multiple languages you can spellcheck.

The next button is the 14. Toggle Fullscreen Mode button. It has four arrows pointing in four diagonal directions. Click that button and it shows you what your post/page looks like without any of the WordPress interface surrounding it. To exit fullscreen mode, point your mouse at the top of the page and click the exit fullscreen link.

The last button is the 15. Show/hide the Kitchen sink button. It looks like three rows of small boxes in different colors and its sole purpose is to make the secondary toolbar that sits just below this toolbar appear and disappear. It is the last default button on the primary toolbar. If you have any buttons to the right of this button, it is usually because you are using a plugin that put it there.

If you don’t see the secondary toolbar, click the button and it will appear. That secondary toolbar is what the next post will be about.