Tutorial Overview
Topics covered in this WordPress tutorial (click link to jump to topic):
| 1. | Introduction |
| 2. | What the Tools Do |
| 3. | Movie |
| 4. | Other resources |
Introduction
WordPress comes with a “visual editor” called the Guttenberg editor, introduced December 2018. The editor allows you to edit text and insert pictures in a page or post.
Visual editors are sometimes referred to as WYSIWYG editors. That stands for “what you see is what you get“. Microsoft’s Word is a WYSIWYG program for example.
You will be using the editor quite a bit in WordPress, so having a good understanding of what the tools do will be useful.
What the Tools Do
At the top of the “classic” text block you will see at least one row of little icons. These are the editing tools.
B – This bolds your text.
I – This provides italics.
ABC – is the strike-through option, it allows you to rule a line mid-line height through text. This is useful to display price changes.
Bulleted list or “dot points” or, in HTML, what we refer to as an “unordered list”.
Numbered list or ordered list. Both bulleted and numbered lists indent from the left column. Some WordPress themes remove this indent.
Blockquote indents a para from the left and right margins. This is useful when you are quoting and want things to stand out.
Alignment. The next three buttons determine the alignment of your text. If you want it left-aligned, centered, or right-aligned, block the text and choose the appropriate button.
Insert a link. The next option deals with creating hypertext links (these are words you can click to visit a different website). Notice how it is grayed-out until you block a word or words in the visual editor. The first button creates a link. To make a link:
1. block the text to make a link and click that button.
2. Type in the URL, including http://
3. The target is if you want the link to open up in a new window or the same window (leaving the option at Not set bases the behavior off the user’s default browser behavior)
4. Title is what will appear when someone hovers over your link (the ALT text)
5. Class deals with custom CSS code.
The next button inserts a more tag, which lets you write an introductory paragraph, and have only that show up on your front page, it will create a “click here to read more” message, and when they click, they will see the whole post (on a new page).
The next button is your spellchecker which helps you check your text for spelling errors. However, WordPress will also underline misspelled works with a crinkled red underline in the editor.
The next button makes the editor take up your full screen, stripping off the left and right columns and giving you more space to write with. Move your mouse to the top of the screen to exit full screen mode.
The last button either shows or hides the kitchen sink. If you click it, it will reveal a second row of lesser-used formatting icons and functions.
The following is what occurs on the second row of icons on the visual editor.
The format drop down-menu, lets you select some text and change how it is formatted. This lets you choose between paragraph text, as well as your HMTL header tags such as h1, h2 and h3.
The next option underlines your text. This isn’t very useful as people may mistake your underlined text for a link, so you should use it very sparingly.
The next button aligns your text as “full” or justified. Again, this isn’t that useful. It will stretch the text out to full the whole column width, making the text less readable. Usability experts steer us away from full justification.
The A will change the colour of your text; again, be careful with this; having too many colours will confuse your users. They will assure that the colours somehow give a hierarchy to the information. You will notice in this website I have only used red to colour text very sparingly to highlight only special points.
The next 2 buttons are for pasting in text from other programs. The first one is from a plain-text editor. This paste tool will strip out any text formatting whatsoever and just paste in plain unformatted text. The second paste tool is for text coming from Microsoft Word. If you use this tool, all your bolds and italics and so on that were applied to text in Microsoft Word will be reapplied as you paste the text into WordPress.
The eraser will get rid of custom formatting.
The Omega symbol allows you to insert symbols and ASCII characters into your blog.
The next two are your undo and redo (does the same thing as ctrl+z in other desktop applications).
Other Resources
https://wordpress.org/support/article/writing-posts/
