WordPress makes publishing and formatting content online easy by providing users with a rich built-in editor that does not require knowledge or experience of coding to create professional-looking web pages with formatted text and embedded media quickly.
In this step-by-step tutorial, you will learn how to use the WordPress Visual Content Editor.
A Basic Guide To Content Formatting In WordPress For Beginners
WordPress comes with an intuitive and easy-to-use WYSIWYG (What You See Is What You Get) editor that lets you format text, create hyperlinks, add images and media to posts and pages, and so much more, simply by clicking a few buttons …
(WordPress WYSIWYG content editor)
WordPress Visual Editor Menu Items Explained
If you have used a content editing application like Microsoft Word, then the WordPress visual content editor interface will probably seem quite familiar to you …
(WordPress Visual Editor Menu Toolbar Buttons)
Here is a brief description of each of the menu toolbar buttons shown in the screenshot above:
1. Post Title Area – Type in your Post title here.
2. Permalink – Clicking on the “Edit” button changes the permalink text of your post/page. This function is useful if you want to optimize your post/page URL.
3. Add Media – Click this button to upload, manage and insert pictures, videos, audio, etc. into your post or page from your own computer, an external URL, or from your website’s media library.
4. Visual Editor Tab – Click to access the WYSIWYG (What You See Is What You Get) visual content editor.
5. Text (HTML) Editor Tab – Switch between the editor tabs to add content in the WYSIWYG mode and make changes to the code. When adding content to the text tab, line breaks get converted to paragraphs automatically …
(Text [HTML] Editor)
6. Bold – Highlight the words your want to make bold and click this button.
7. Italics – Select words in your text and click this button to add italicized formatting.
8. Strikethrough – Add
strikethrough formatting to your selected words.
9. Unordered list – Select this option to create an unordered list, e.g.:
- List item 1
- List item 2
- List item 3
- etc …
10. Ordered list – Click this function to turn your selected content into an ordered list like the example below:
- List item 1
- List item 2
- List item 3
- etc …
11. Block Quote. Choose this functionality to insert a block quote into your content. Simply select the text you want included in the block quote and click the button.
To exit the block quote press the “Enter” key to create a line of space and then click the block quote button again and this will return your text to standard format.
12. Dividing Line. Use this function to insert a horizontal line into your content …
(Horizontal line menu item)
13, 14 & 15. Alignment buttons – Click these buttons to align content …
13. Align Left
14. Align Center
15. Align Right
Press the “Enter” key and leave a line of space to end the alignment command.
16. Insert/Edit Link. Click this button to add a hyperlink to your text (See “How To Link Content In WordPress” tutorial for useful tips on using the hyperlink function).
17. Unlink. Highlight content you would like to unlink and click this button to delete the hyperlink.
18. Insert Read More Tag. This function inserts a “read more” link into the content wherever you have placed the cursor. Content added to a post prior to the insertion of this tag displays when published, but content added to the post after this tag will only appear to site visitors after they click on the “read more” link …
(“Read More” Tag)
The “Read More” tag will not work on WordPress Pages. It only works on the page showing your most recent posts (i.e. the Blog Page).
19. Show/Hide Kitchen Sink. Clicking this button toggles the WordPress visual editor between minimal mode (one row of buttons) and enhanced mode (two rows of buttons).
(Display/Hide Kitchen Sink)
20. Distraction-Free Writing Tool. Click this menu button to toggle between distraction-free writing screen & normal screen. This is handy for checking the placement of items on the page and for working on your content without distracting page elements …
(Distraction-Free Writing Mode Toggle)
With distraction-free writing mode enabled, the page elements return to the screen as soon as you move your cursor outside the boundaries of the content editor.
See the “Tips” section in this tutorial for more tips on using this item.
21. Format Style. This feature lets you change the formatting of your text.
- Depending on your theme, the style menu may include various heading styles and other pre-defined styles.
- When you create a new post or page and start typing into the content editor, your text will typically be formatted using the “Paragraph” style by default.
- Modifying heading styles typically require knowing how to edit CSS (Cascading Style Sheets).
To add a heading style to your content, highlight your text and choose a format style from the drop-down menu (e.g. Heading 5) …
(Heading Style Options Pull Menu)
22. Underline. Highlight content and click this button to add underline formatting.
23. Justify. Clicking this button will justify the paragraph where your mouse cursor has been placed or text highlighted. Justification can only be applied to text.
24. Select Text Color. Highlight an area of text and choose a color from the palette in the drop-down menu to edit the color of your content …
You can expand the selection of colors available in the palette by clicking on the Custom area …
(Custom Text Color Palette)
This gives you access to an almost limitless palette of colors. If you are familiar with the Hexadecimal (HEX) color system, you can just type in the code for the specific color you want into the # field. Otherwise, click in the color box, enter RGB values or use the slider to add a custom color.
The example below shows HEX color values for commonly used “web safe” colors (i.e. colors that display correctly across most browsers) …
25. Paste as Text. Click this button to paste the content of your clipboard into your content editor area as plain text …
(Plain Text On/Off)
Refer to the “Tips” section in the next section of this tutorial for more information on using this item.
26. Clear formatting. If you spot unnecessary codes in your text (or if your content isn’t displaying as you intended after publishing), then select all text and click this button to clear all formatting on your page.
27. Insert special character. Click this button to add insert special characters like © ® ™ and many other characters and symbols to your content.
(Add symbols and custom characters to your content)
We have written a more detailed tutorial about using special characters in WordPress here: How To Add Special Characters To Your WordPress Pages And Posts
28. Outdent – Clicking this menu button decreases indented text.
29. Indent – Clicking this item indents a block of text.
Here’s a sample of indented text.
To keep indenting text, press the Indent button more than once.
30. Undo. Click this button to undo your previous actions. Use this if you have accidentally deleted a section of text, or formatted text incorrectly and need to revert to a previous state..
31. Redo. Click this button to reinstate any changes or deletions that you have undone.
32. Keyboard Shortcuts. Click this button to bring up the Keyboard Shortcuts feature. This is covered in more detail in the Tips section further below.
Plugins can add new features to the menu toolbar …
(Plugins can add extra features to the menu toolbar)
Useful Tips & Additional Info
Tip #1 – Keyboard Shortcuts For Power Users
As well as using the menu buttons in the Visual Editor toolbar, you can use the key combinations below as you type. This will help you create and format your content faster …
(Content Editor Power User Shortcuts)
Tip #2 – Pasting Content Into WordPress From MS Word
MS Word and some other word processors store code that is not directly visible when copying text from a document into the clipboard.
If using an earlier version of WordPress than version 3.9, pasting content directly from Microsoft Word into the content editor will introduce unnecessary HTML code into your content resulting in formatting errors …
(Pasting content from word processing applications into pre-WP 3.9 versions can add unwanted formatting to your content.)
As WordPress continues to improve its software, more of the technical work required to integrate different platforms and make things work together will happen “magically” behind the scenes, requiring users to become less and less technical-minded.
WordPress now ships with built-in support for pasting content directly from Microsoft Word and other word processors. If the source content is not pasting cleanly, however, then try pasting it into your content editor using the Paste as text button and format everything afterwards.
Select the Paste as text menu button …
(Paste as text toolbar button)
Clicking on the Paste as text menu button, brings up the following notice …
(Paste as Text message window)
Tip #3 – Removing Formatting From Text
You can remove formatting from pasted content inside the WordPress Visual editor.
This is great if, for example, you have pasted a block of content from an external website that includes CSS styling formatting.
Sometimes, you can’t tell whether or not content sourced and pasted from another website or blog contains formatting specific to that site …
(Content pasted from an external website …)
… until you click on the Text tab and view the HTML code …
(… may contain unwanted formatting!)
If the content was copied from your own site, things may look normal until you make a change to the styling (e.g. change the color scheme) and some of your earlier content elements have a different CSS style.
For this reason, we recommend clearing the formatting from pasted content, especially from content sourced from other sites.
To remove formatting from your content, paste your content into the Visual editor …
(Paste content with formatting into the visual editor)
Next, select everything and click on the Clear formatting button …
(Clear formatting menu toolbar button)
All your formatting (e.g. bold, italicized text, etc.) has been removed …
(Remove formatted text from text)
Note that some content styling elements will not be removed from your text after applying this button. This includes hyperlinks, heading styles, etc.
Here is a quick and useful way to test for errors that you suspect may be caused by poor formatting tags without losing the original content.
Before using the Remove formatting function, switch over to the Text tab, then select and copy all of your text to your clipboard …
(Copying formatted text in WordPress)
Open a new plain text file, paste the content from your clipboard into it, then return to your editor and complete the “remove formatting” process. Now, if something were to go wrong, you have a backup copy with all the original content formatting preserved.
Tip #4 – How To Add Line Break Spacing To Your Content
As with most applications, line returns are created by pressing the “Enter” key at the end of your text …
(Default line spacing)
When you press the “Enter” key to start a new line, WordPress adds a regular paragraph ending tag (</p>) to your content’s code. To add a line break tag (<br />) and create single line spacing, use both the “shift” and “enter” keys …
(Adding single line spaces to content)
Breaks allow the formatting of your block of text to be carried over. This is useful if you want to add a line break to a bulleted section, or keep different groups of text together in the same paragraph for styling purposes.
Tip #5 – Resizing The WordPress Content Editor Box
By default, WordPress has the Full Height Editor function enabled, providing users with a responsive and auto-adjustable editor …
(WordPress has a responsive editor)
You can confirm whether the Full Height Editor feature is active or not, by looking at either of the following tell-tale signs:
- The Full Height Editor feature is turned on if the Distraction-Free Writing button is visible,
- If the scrollbar cannot be seen when your typing exceeds the size of the text area, then the Full Height Editor function is turned on …
(Tell-tale signs that the Full Height Editor feature is enabled)
With the full height editor feature enabled, the WordPress content editor resizes automatically as you type to fit more content …
(Your content editor area should automatically resize as you type)
If, however, the Full Height Editor feature has been turned off, you will see the content editor scrollbar once your typing exceeds the size of the text editor area …
(Full Height Editor feature disabled – scrollbar visible)
Additionally, you will not see the Distraction-Free Writing button displayed …
(Full Height Editor feature disabled)
If the Full Height Editor feature is inactive, you can expand your text box using the resizing feature at the bottom right-hand corner of the editor tool …
(Text Box Resizing Feature)
Simply click and drag the text box to resize your content editor …
(Resize the editor using drag and drop)
The content editor will enlarge to the new size …
(Resized WordPress editor)
Tip #6 – Distraction-Free Writing Functionality – Additional Info
Distraction-Free Writing requires that the full-height editor be enabled in Screen Options (see further below).
You can use Distraction Free Writing with both the Visual and Text editor and switch between the two tabs while working …
(Distraction-Free Writing Mode – Text Editor)
You can eliminate all distractions by combining the Distraction-Free writing tool & the built-in Full Screen function of web browsers like Google Chrome & Firefox …
(Distraction-Free Writing – WordPress Only vs WordPress & Full Screen Browser)
With Distraction-Free Writing mode turned on and the Full Screen function of your browser enabled, the current page completely fills the screen, leaving only the title and the content of the post or page you’re working on visible.
To turn on the Full Screen function in your Firefox or Chrome web browser, go to your browser settings menu and click on the buttons shown below …
(Google Chrome & Firefox – Full Screen Function)
To enable both the Full Height Editor and Distraction-Free Writing Mode features, click on the Screen Options tab (located in the top right-hand corner of your WordPress dashboard screen) …
(Screen Options Tab)
In the Additional settings section, enable the full-height editor and distraction free functionality option …
(Enable full-height editor and distraction-free functionality in your Screen Options tab)
Tip #7 – How To Convert Emoticons
One last tip worth mentioning is that you can convert emoticons (e.g. 🙂 ) to graphics by enabling the formatting option inside your Writing Settings (Settings > Writing) area …
(WP Writing Settings – Formatting Options: Convert Emoticons)
Congratulations! Now you know how to use the editor in WordPress.