How to use The WordPress Visual Editor

Using The WordPress Visual Editor

WordPress makes publishing and formatting content online easy by providing users with the option of using a rich, visual editor that does not require knowledge or experience of code (e.g. HTML) to create professional-looking web pages with embedded images, media, etc …

In this tutorial you are going to learn how to use the Visual Editor – what the menu buttons do, how to format text, how to resize the text editor, and more!

Watch the video below and then complete the step-by-step tutorial in this section to learn how to use the Visual Editor …

A Simple Guide To Formatting Text In WordPress

WordPress comes with a simple and easy-to-use feature-rich WYSIWYG (What You See Is What You Get) visual content editor that lets you format text, create hyperlinks, add images and media to your posts and pages, and so much more, just by clicking a few buttons …

Visual Editor Buttons Explained

If you have used a text editor like MS Word before, then the visual editor interface should seem quite familiar to you…

Here is a brief description of the function of each of the WordPress Visual Editor buttons shown in the screenshot above:

1. Title Field – Here’s where you enter the title of your post or page.

2. Permalink – Click on the “edit” button to change the permalink text of your post or page. This is useful if you want to shorten or change the URL of your post or page.

3. Media Manager – Click this button to upload, manage and insert media into your post (e.g. pictures, videos, audio, etc) from your computer, an external URL, or from your site’s own media library.

4. WordPress Visual Editor Tab – Click this tab to access the WYSIWIG (What You See Is What You Get) editor.

5. Text Editor Tab – Click this tab to view and work with the code behind your content. Switching between these two tabs allows you to add content in the WYSIWIG mode, and then make changes to the underlying code.

6. Bold – Highlight text and click this button to make the words bold.

7. Italics – Highlight text and click this button to make the words italicized.

8. Strikethrough – Formats selected text as strikethrough

9. Unordered list – Use this button to create an unordered list like the example below:

List item 1
List item 2
List item 3
etc …

10. Ordered list – Use this button to create an ordered list like the example below:

List item 1
List item 2
List item 3
etc …

11. Block Quote. Use this function to create a block quote. Simply select the text you want to display in the block quote and click the button.

To exit the quote press the “Enter” key to create a line of space and then click the block quote button again and this will end the command and return your text to normal.

12, 13 & 14. Alignment buttons – Use these buttons to align text and objects inserted into your posts or pages:

12. Align Left

13. Align Center

14. Align Right

Press the “Enter” key and leave a line of space to end the alignment command

15. Insert/Edit Link. Use this button to insert a hyperlink into your text (See “How To Link Content Internally In WordPress Posts And Pages” tutorial for useful tips on using the hyperlink function).

16. Unlink. Select and highlight any text you want to unlink and click this button to remove the hyperlink.

17. Insert More Tag. Clicking this button will insert a “read more” link wherever you have placed your cursor. All text added to a post prior to inserting this tag will display as normal on your post when published, but all content added to the post after this tag will only be displayed to visitors after they click on the “read more” link …

Important: The “Read More” tag does not work on WordPress “Pages”. It is only used on the Home page that shows your latest posts (i.e. your Blog Page).

18. Spell Checker. Use this button to check the spelling of your content. Use the drop-down menu to select a different language …

19. Toggle Full Screen Mode. Clicking this button will toggle your screen between full screen & editor normal screen. This is useful for checking placement of items on the page and for working on your content free of other page element distractions …

20. Show/Hide Kitchen Sink. Click this button to toggle the WordPress visual editor between minimal mode (one row of buttons) and enhanced mode (two rows of buttons).

21. Format Style. Use this feature to format text. When you create a new post or page and start typing into the content area, the text is formatted as “paragraph” (i.e. normal) by default.

To create headings for your content, highlight an area of text and select different format styles from the drop down menu (e.g. heading sizes ranging from h1 to h6) …

22. Underline. Select an area of text and click this button to underline text.

23. Align Full. Use this button to justify your content and display your text neater on your page. This button will adjust the spacing in your text to try and square up every line of text so that the line ends are not “ragged” (as is the case when text is aligned left by default).

24. Select Text Color. Select an area of text, then click on this button and select from the color options in the dropdown menu to change the color of your selected text area …

Note: You can expand the selection of colors available in the color palette by clicking on the More colors button …

You will then have access to an almost limitless choice of colors.

Useful Tip: 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 Color field.

The example below shows the HEX color codes for some of the most commonly used “web safe” colors (i.e. colors that display correctly across most browsers and monitors) …

25. Paste as Plain Text. Click the button marked with a “T” to paste the content of your clipboard into your content editor area as plain text.

26. Paste from Word. Click the button marked with a “W” to paste in text from MS Word.

Note: Pasting text directly from MS Word into your WordPress content editor can introduce unnecessary code into your content and result in errors. MS Word and some other text editors store code that is not directly visible when copying text from a document into the clipboard …

27. Remove formatting. If you notice unwanted formatting code in your text (or your content isn’t displaying as you intended after your post or page has been published), then select all text and click this button to clear all formatting on the page.

Tip: Here is a quick and useful way to test and remove any errors that you suspect may be caused by poor formatting tags without losing your original content.

Before using the “Remove formatting” function, switch to the “Text” tab, then select and copy all of your text to the clipboard …

Paste the content from your clipboard into a new plain text file, then go back to your content and go through the “Remove formatting” process. Now, if something goes wrong, at least you have a backup copy of your content with all the original formatting preserved.

28. Insert custom character. Click this button to insert special characters like © ® ™ a whole bunch of other special characters (e.g. characters for non-English text).

29. Outdent – Click this button to remove indented text & return text to left alignment on the page.

30. Indent – Click this button to indent one or more lines of text to the right.

Here’s a line of indented text (indented by pressing “enter” button).

This line has been indented further to the right by pressing the indent button one more time.

31. Undo. Click this button to undo your previous commands. This is useful if you have accidentally deleted a section of text, or formatted text wrongly and need to backtrack.

32. Redo. Click this button to reinstate a change or deletion that you have undone.

33. Rich Editor Help. Click this button to bring up the WordPress Editor Help feature …

Tip #1: WordPress Content Editor – Power User Shortcuts

As well as using the menu buttons in your Visual Editor toolbar to insert and format content, you can also use the key combinations below as you type. This can help you create and format content faster …

Tip #2 – How To Resize The WordPress Visual Editor Text Box

WordPress provides a WYSIWYG (What-You-See-Is-What-You-Get) Visual Editor for creating and editing your posts and pages.

By default, WordPress normally displays around a dozen lines of text in its WYSIWYG Editor …

Depending on your content writing or editing needs, this may not be enough.

So, how can we make the text editor larger?

Well … before the WordPress 3.5 version upgrade, one of the options for increasing the size of the WordPress text editor, was to go into your Writing Settings area and specify the number of lines you wanted to display in the post box …

Although the above option no longer seems to be available post WordPress version 3.5, it’s still quite easy to resize your text editor.

All you have to do, is log into your WordPress admin, then go into your Post or Page area (create new or edit), and click and drag the bottom right-hand corner of your post box to resize it …

Your Text Editor Box is now resized …

Another useful way to enlarge your working space, is to click on the Distraction Free Writing mode button (Alt + Shift + W) in your WYSIWYG toolbar menu …

This gives you a “full screen” mode to work with when editing or reviewing your content …

To return to your previous setup, just click on the Exit fullscreen link at the top of your screen …

WordPress is huge and can sometimes be overwhelming about where to start. As you move on to the next Page, you will have a clearer picture of where to start and progress to building a professional WordPress Site.

***

Disclaimer: This site is not associated with WordPress or any of the WP products reviewed on this site. We may derive a financial benefit from sales of products advertised, reviewed or linked to from this site. The product images and information on this page have been supplied from the plugin’s own website and sites that provide Premium WordPress Services

A Guide to Basic HTML For WordPress Users

A Guide To Basic HTML For WordPress Users

Having a basic knowledge of HTML can be useful when creating, editing or formatting content on your WordPress site.

In this tutorial you will learn the basics Guide for using the code in WordPress.

Note: You don’t need to know HTML to use WordPress. WordPress has a powerful built-in visual editor that allows you to easily format your content simply by clicking on a few buttons. As you will learn below, however, knowing a little bit will save you time and money.

Watch the short video below and then complete the step-by-step tutorial to learn more about BASIC HTML for WordPress content …

Having a basic knowledge can be useful when running and managing your own web presence.

For example, here are some situations where having a basic understanding of basic HTML can help you save time and money:

You want to add some formatted text and a hyperlinked image into an area of your sidebar or direct visitors to your contact form, newsletter subscription page, etc… into your user profile description. If you know basic HTML, you can do this very quickly without using code editors.
You decide to outsource your content creation to a freelance writer and receive back files containing codes. Knowing basic HTML helps you better proof your content before you accept the work.
Someone else is responsible for creating and publishing content on your site. You see a couple of text formatting errors or hyperlinks that are either missing, or pointing to the wrong destination. Knowing basic HTML can help you fix simple things in your content very quickly without having to ask (or pay) a webmaster, or web designer to do it for you.
Knowing basic HTML can help you communicate more effectively with web developers and web designers when discussing your website requirements, and also you sound more confident and knowledgeable when presenting your website ideas or requesting custom work to be done on your site.

What Is HTML?

HTML is an acronym for HyperText Markup Language.

According to Wikipedia’s definition of HTML …

It’s the main markup language for creating web pages and other information that can be displayed in a web browser.

It’s written in the form of HTML elements consisting of tags enclosed in angle brackets (like <html>), within the web page content. HTML tags most commonly come in pairs like <h1> and </h1>, although some tags, known as empty elements, are unpaired, for example <img>. The first tag in a pair is the start tag, the second tag is the end tag (they are also called opening tags and closing tags). In between these tags web designers can add text, tags, comments and other types of text-based content.

The purpose of a web browser is to read HTML documents and compose them into visible or audible web pages. The browser does not display the HTML tags, but uses the tags to interpret the content of the page.

The elements form the building blocks of all websites. HTML lets images and objects to be embedded and can be used to create interactive forms. It provides a means to create structured documents by denoting structural semantics for text such as headings, paragraphs, lists, links, quotes and other items. It can embed scripts written in languages such as Java Script, which affect the behaviour of HTML web pages.

Source: Wikipedia, HTML

Important: Like everything else on the Internet, HTML is also subject to change and some of these changes will affect WordPress.

Currently, it’s in version 5 (also called HTML5), and this change has introduced a number of new “tags” to keep up with new advances in software and browser technology. As some of the tags used in older and even recent versions of WordPress are being phased out of HTML5, you can expect that WordPress will also keep updating its software to remain compatible with industry-wide coding standards.

Using Basic HTML for WordPress

WordPress provides users with a choice of adding content to posts and pages using either a rich Visual Editor (also called a WYSIWYG editor, which stands for What You See Is What You Get) and a Text Editor that allows you to input and work directly with code like HTML and other script languages (e.g. Javascript) when adding or editing your content. …

We address the WordPress Visual Editor and how to create / add content to Posts and Pages in separate tutorials.

HTML Tags Allowed In WordPress

The WordPress Content Management System (CMS) and publishing platform allows you to insert many commonly-used HTML tags in the Text editor, including the tags below

Here are some examples of simple, practical applications that use some of the HTML tags listed above

As mentioned earlier, you don’t need to know HTML to use WordPress, but it can be useful to know the basics of HTML. In certain situations, this may even save you time and money.

If you are interested in learning more about using HTML, then see the link below for Free HTML tutorials:

http://www.w3schools.com/htmL/html_links.asp

The Basic HTML for WordPress Text Editor Explained

The WordPress Text Editor allows you to see, edit and work directly with code like HTML and other script languages (e.g. Javascript) when inputting content into your posts and pages.

By default, the WordPress Text Editor comes with a number of standard menu buttons already installed

Here is a brief description of the function of each of the Text Editor menu buttons (refer to the screenshot above):

b: <strong></strong> Use this HTML tag for strong emphasis of text (i.e. bold).
i : <em></em> Use this HTML tag for emphasis of text (i.e. italicize).
hyperlink: <a href=”http://example.com”></a> Use this HTML tag to add a hyperlink to your selected text
b-quote – <blockquote></blockquote> Use this HTML tag for quoted or cited text.
~~del~~: <del></del> Use this HTML tag to label text considered deleted from a post. Most browsers typically display this as striked-through text.
ins: <ins></ins> Use this HTML tag to label text considered inserted into a post or page. Most browsers typically display this as underlined text.
img: <img src=”http://www.yourdomain.com/img/image.jpg” alt=”image description” /> Use this HTML tag to insert an image into your post or page.
ul: <ul></ul> Use this HTML tag to insert an unordered list in your post. Unordered lists typically display as a bulleted list of items.
ol: <ol></ol> Use this HTML tag to insert a numbered list. Items in an ordered list are typically numbered (just like the list you are reading now!).
li: <li></li> Use this HTML tag to insert or turn your selected text into a list item. (This tag should be used in conjunction with the ul or ol tag).
code: <code></code> Use this HTML tag for preformatted styling of text. Generally sets text in a monospaced font, such as Courier.
more: <!–more–> Use this WordPress tag to break a post into “teaser” and content sections. For example, if you type a few paragraphs, then insert this tag and compose the rest of your post, users will only see the first paragraphs of your post or page with a hyperlink ((more…)), which when clicked on, will display the rest of the post’s content.
lookup – Opens a JavaScript dialogue box that prompts for a word to search for through the online dictionary at answers.com. You can use this to check spelling on individual words.
Close Tags – Closes any open HTML tags left open. Please note: proof your content after using this function to ensure that all tags have formatted your text correctly.
Full screen – click this button to work in “full screen” mode (see screenshot example below). You can toggle between the Visual Editor and Text Editor modes, insert media and hyperlinks and update your content while in “full screen” mode. Click Exit Full screen to return to the normal text editor display

Some Useful Tips Related To Using Basic HTML for WordPress

Tip #1: Some sections of your WordPress site like some sidebar “widgets” and user profile areas allow you to use HTML-formatted content, but they don’t provide you with a Visual Content (WYSIWYG) editor like the one that is built-in to the editing screens of your Posts and Pages

If you want to design or edit web pages using HTML, there are several FREE HTML Editor software applications that you can download. A popular FREE editor, for example, is KompoZer.

KompoZer is Free Open Source software built as a complete web authoring system that combines web file management and easy-to-use WYSIWYG web page editing. It’s designed to be extremely easy to use, especially for non-technical computer users who just want to create attractive, professional-looking web pages without needing to know HTML or web coding.

If, however, you have no need or desire to go into anything of a technical nature, but would still like to be able to easily insert and format content containing basic HTML tags into areas of your site like your sidebar, author profile, etc…, then see the tutorial below for a really simple solution that involves no extra time and requires no additional downloads.

Tutorial: How To Add Formatted Text To The “About Yourself” Section Of Your Profile

By default, whenever a post is published on your WordPress site, a link to the author is displayed at the bottom of the post

Clicking on the author link takes you to the Author Archives section, where site readers can learn more about you (or other authors registered as users on your site) and see other posts that you (or other authors) have published

You can add hyperlinks and simple text formatting like bold and italicized text to enhance your author description and further promote yourself, your services, products, other websites, for your site visitors

You do this by adding HTML formatted content into the About Yourself > Biographical Info field in your Profile section

You will notice that, although the Biographical Info text box allows you to paste HTML-formatted content into the text area, it doesn’t actually provide you with a content editor to do so

This means that you either have to type in the content using the code, or paste the content with the HTML already embedded into this text field.

Let’s “paste the content” into this field using the simple method described below.

Create a new post and type in your content into the Visual Editor (if you need help with this step, see this tutorial: How To Create A New WordPress Post).

In this case, we want to create author’s description

You will Format the content using the Visual Editor tab (if you need help with this step, see this tutorial: Using The WordPress Visual Editor). …

Continue working in the Visual Editor tab until you have added all of the formatting you want to display in your author description. Please note that you will only be able to use simple formatting in your author description such as hyperlinks, bold, underline and italicized text

Once you create your content, switch over to the Text Editor and copy all of the content you have just created to your clipboard

Go to your profile by selecting Users > Your Profile from the main navigation menu …

Scroll down to the About Yourself section and paste the content from your clipboard into the Biographical Info text area

Click the Update Profile button to save your changes

Congratulations You have just created an author description for your content and formatted it using basic HTML!

Tip #2 (Advanced WP User): You can enhance the function of your WordPress Text Editor using plugins.

For example, you can add a Free WordPress plugin to your site called Extensible HTML Editor Buttons that allows you to have better control of settings for HTML tags like div and span, for example, as well as add custom buttons and additional function to your text editor …

Another Free WordPress plugin you can use is HTML Editor Reloaded …

This plugin allows you to add your own custom buttons to the WordPress Text Editor toolbar. For example, you can add an H1, H2, H3 button to make adding headers to your content easier …

Tip #3 (Advanced WP User): By default WordPress does not allow some HTML tags to be used for security reasons (e.g. codes such as embed, frame, iframe, form, input, object, text area and others) .

If you experience any problems adding common basic HTML for wordpress tags into your content that are allowed to be used in WordPress, try disabling the visual editor in your user profile …

After disabling the visual editor and saving your new profile settings, go back to your post or page and reinsert the content with the problematic HTML tags, then save or publish your post.

If the above suggestion fixes the issues you were having with adding HTML to your content, go back to the Profile page, reactivate the visual editor, and check to see if the HTML code is still working fine with the visual editor restored.

Note: If the above suggestion does not fix the issue and you continue experiencing problems adding HTML code to your site, you may need to look at other options. This may include:

Asking someone with experience troubleshooting WordPress errors to help you
Searching the WordPress Support Forum for possible causes and recommended solutions
Searching for WordPress troubleshooting tutorials online
Reinstalling your WordPress application
Contacting your web host

To learn more about editing your profile settings, see this tutorial: How To Edit Your WordPress User Profile.