How To Enhance The WordPress Visual Editor

Learn how to enhance the WordPress visual editor with additional formatting features in this tutorial.

How To Enhance The WordPress Visual Editor

The WordPress WYSIWYG (What You See Is What You Get) editor is powered by TinyMCE, an Open Source application that integrates with the WordPress Content Management System.

While the built-in WordPress visual editor is feature-rich, there are some things it can’t do, such as easily adding tables to WordPress without requiring knowledge or skills of coding HTML and CSS.

If you are looking for more functionality and options than what is currently provided by the default WordPress Visual editor, this tutorial will show you how to add useful enhancements to your default WordPress WYSIWYG editor using WordPress plugins.

How To Enhance Your Visual Editor

Complete the step-by-step tutorial below to learn how to install and configure the TinyMCE Advanced plugin.

TinyMCE Advanced

TinyMCE Advanced - WordPress Plugin

TinyMCE Advanced is a useful plugin that includes a number of additional WordPress editor-enhancing features.

The screenshot below shows the default WordPress visual editor …

TinyMCE Advanced - WordPress Plugin Here is a screenshot of the same WordPress visual editor after TinyMCE Advanced plugin has been installed, activated and (minimally) configured on your site …

TinyMCE Advanced - WordPress Plugin The additional functions included in TinyMCE Advanced include:

  • Advanced HR – insert a horizontal ruler
  • Advanced Image – insert and format images
  • Advanced Link – insert links to text and images.
  • Advanced List – (use this only if you experience problems with how lists display on your page).
  • Context Menu – adds a configurable context menu.
  • Emoticons (Smilies) – insert smiley images.
  • Date and Time – inserts date and time
  • IESpell – inserts a spellchecker.
  • Layer -adds some layer controls (only works on some browsers).
  • Nonbreaking – inserts nonbreaking space entities.
  • Print – adds a print button.
  • Search and Replace – adds a search/replace function.
  • Style – imports CSS classes from your themes style sheet.
  • Table – adds table management functionality.
  • Visual Characters – adds the possibility to see invisible characters.
  • XHTML Extras – adds support for XHTML specific tags.

How To Install TinyMCE Advanced WordPress Plugin

Warning

Always backup your WordPress site and data before installing a new WordPress plugin!

If you don’t want to perform your own backups, then consider getting professional assistance, or use WordPress backup plugins.

You can read about a WordPress backup plugin that can automate your site backups here:

***

To install the plugin, log into your WordPress site and click on Plugins > Add New

Adding A New Plugin To WordPress

Make sure that you are in the “Search” tab of the Install Plugins screen. In the Search field enter TinyMCE Advanced and click on Search Plugins

TinyMCE Advanced - WordPress Plugin

Locate TinyMCE Advanced in the results list and click on the Install Now link to automatically install the plugin on your site …

TinyMCE Advanced - WordPress Plugin

Once the plugin has been successfully installed, click Activate Plugin

TinyMCE Advanced - WordPress Plugin

Your plugin is now activated …

TinyMCE Advanced - WordPress Plugin

Configuring TinyMCE Advanced Plugin

In your WP Admin menu, select Settings > TinyMCE Advanced

TinyMCE Advanced - WordPress Plugin

The “TinyMCE Buttons Arrangement” screen will display in your browser …

TinyMCE Advanced - WordPress Plugin

(Click here for an enlarged view of the above screenshot)

The screen displays a number of pre-filled and empty toolbars and all other available buttons below the toolbars, as well as an advanced section.

The toolbars are fully configurable. Simply drag and drop buttons corresponding to the functions you want to have available on the toolbars to add, remove or rearrange your visual editor menu …

TinyMCE Advanced - WordPress Plugin

You can also drag and drop menu separators when customizing this section. This will add a vertical separator between buttons …

TinyMCE Advanced - WordPress Plugin

When you have finished customizing your toolbars, remember to click the Save Changes button to apply your changes and save your new settings …

TinyMCE Advanced - WordPress Plugin

Adding Tables To WordPress Using TinyMCE Advanced Plugin

The TinyMCE Advanced WordPress plugin adds a number of extra functions to your WordPress editor, including the ability to add tables to WordPress posts and pages …

TinyMCE Advanced - WordPress Plugin Here is an example of a table inserted into this post using the TinyMCE Advanced plugin:

WIDGET COMPARISON CHART FOR XYZ COMPANY
Item NoProduct NameDescription
W-001-PQAMegaWidget 2000The MegaWidget 2000 provides the most value for the least cost.
W-019-RVYPolyWidgetUse PolyWidget for multiple applications.
W-442-BCUNanoWidgetNanoWidget comes in a variety of colors and sizes.

TinyMCE Advanced lets you easily add, edit and delete tables, cells and rows, align and format content in tables, merge and split cells and more while working inside your post or page.

To learn how to create and manage tables in WordPress without HTML or CSS skills, see the tutorial below:

Useful Tip

Tip #1: Some plugins add their own custom buttons to the visual editor toolbar. Sometimes this can cause the visual editor menu to interfere with other areas of your WordPress site’s administration area …

TinyMCE Advanced - WordPress Plugin

If this happens, don’t worry … there is a very simple solution! All you need to do is rearrange some of the standard buttons on the menu toolbar …

TinyMCE Advanced - WordPress Plugin

To do this, bring up the TinyMCE Buttons Arrangement screen (Settings > TinyMCE Advanced) and drag some of the buttons away from the toolbar that is crowded with too many custom buttons to an emptier toolbar …

TinyMCE Advanced - WordPress Plugin

Once you have finished rearranging your menu buttons, click the “Save Changes” button to save your new settings …

TinyMCE Advanced - WordPress Plugin

Now, when you bring up the visual editor on your screen, you should find that the problem has been solved (if it hasn’t just keep rearranging the buttons until the issue has been corrected!) …

TinyMCE Advanced - WordPress Plugin

For more information, documentation and FAQs about this plugin, visit the plugin website: TinyMCE Advanced

Tip #2: Another plugin that takes the concept of enhancing your WordPress visual editor even further, is Ultimate Tiny MCE

Ultimate TinyMCE

Ultimate TinyMCE - WordPress Plugin

Ultimate Tiny MCE seems to be a well supported plugin with lots of documentation (including video tutorials) that provides many of the same features as TinyMCE Advanced, but offers additional features such as:

  • Advanced image features like mouseover and mouseout effects … even add your own popup javascript windows when a user clicks a link.
  • Add your own custom CSS using drop-down menus (no HTML knowledge required).
  • Easily Insert page anchors into long posts.
  • Image mapping allows you to add separate navigation links to the same image.
  • Over 40 emoticons (smilies)
  • And a whole lot more …

To learn more about this plugin, visit the plugin site here: Ultimate Tiny MCE

Warning

Note: Ultimate TinyMCE recently announced that the plugin will not work on WordPress versions above 3.9. The plugin developers recommend switching to its successor, WP Edit (see below).

WP Edit

WP Edit

(WP Edit)

WP Edit gives you control of the default WordPress editor and access to additional editor tools.

WP Edit is the successor of  the ‘Ultimate TinyMCE’ plugin (see previous item) and has been completely rebuilt to add extensive, additional editing functionality to the default WordPress editor. You can arrange buttons into toolbars and configure these however you like to improve your workflow.

WP Edit adds dozens of additional custom options to the WordPress editor, including new buttons, extended formatting abilities, and new features.

These features include:

  • Easily insert images, media, YouTube videos, and clip art.
  • Create tables via a graphical interface.
  • Adjust table cell border and background colors.
  • No need to learn HTML and CSS (use buttons with visual interfaces instead).
  • Easily access all shortcodes available to your WordPress environment and insert them into the content editor.
  • Use shortcodes to insert columns (similar to “magazine” style layouts) in your content areas.

To learn more about this plugin, visit the plugin page here: WP Edit

Visual Editor Custom Buttons

Visual Editor Custom Buttons

(Visual Editor Custom Buttons plugin)

Visual Editor Custom Buttons provides a fast and easy way to add custom buttons to the WordPress Visual Editor.

With this plugin you can easily add your own custom buttons in the Visual Editor, as well as the HTML Editor. You can then add HTML code to the button, either as a wrap (before, after) or as a single block. On top of that you can, from within the plugin, set the CSS so you can view the effect of the button directly in the Visual Editor.

The plugin comes with a large number of ready to use button icons, but you can also add your own.

For more information, visit the plugin page here: Visual Editor Custom Buttons

Congratulations! Now you know how to enhance your WordPress visual editor with additional features and how to customize the WordPress Visual editor.

How To Enhance The WordPress Visual Editor

***

"If you're new to WordPress, this can stand on its own as a training course and will stay with you as you progress from beginner to advanced and even guru status." - Bruce (Columbus, Ohio)

***

How To Use The WordPress Visual Content Editor

This tutorial shows you how to use the WordPress Visual Content Editor – what the menu items do, how to format text, plus useful tips and information on how to get the most out of the WordPress content editor.

A Basic Guide To Content Formatting For Beginners*** Important ***

WordPress introduced a new content editor in version 5.0 called Gutenberg.

For tutorials on how to use the new Gutenberg content editor, go here:

***

WordPress makes publishing and formatting content online easy by providing users with a rich built-in visual 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 are going to learn how to use the WordPress Visual Editor.

A Basic Guide To Content Formatting

WordPress comes with an intuitive and easy-to-use WYSIWYG (What You See Is What You Get) content editor that enables you to easily add, edit and format text, create hyperlinks, add images and media to posts and pages, and so much more, just by clicking a few buttons …

WordPress content editor

(WordPress content editor)

WordPress Visual Editor Menu Toolbar Buttons Explained

If you have used a content editing application like Microsoft Word, then the WordPress visual editor interface will feel familiar to you …

WordPress Visual Editor Menu Buttons

(WordPress Visual Editor Buttons)

Here is a brief description of each of the visual editor menu buttons shown in the screenshot above:

1. Post Title Area – Type in your Post/Page title here.

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

3. Add Media – Clicking the Add Media button lets you upload, manage and insert pictures, videos, audio, etc. into your post or page from your computer, an external URL, or from your website’s media library.

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

5. Text Tab – Clicking this tab lets you access the HTML code behind your content. When inserting content into the text tab, WordPress converts line breaks into paragraphs automatically …

WordPress Text Editor Mode

(Text [HTML] Editor)

6. Bold – Highlight content and click this button to add bold formatting.

7. Italics – Highlight the words your want to add italicized formatting to and click this button.

8. Strikethrough – Add strikethrough formatting to your selected content.

9. Unordered list – Choose this button to turn your selected text block into an unordered list like the example below:

  • List item 1
  • List item 2
  • List item 3
  • etc …

10. Ordered list – Choose this toolbar item to turn your content into an ordered list like the example below:

  1. List item 1
  2. List item 2
  3. List item 3
  4. etc …

11. Blockquote. Select this item to create a block quote. Simply select the content section you want to display in the block quote and click this button.

To exit the blockquote 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 normal.

12. Divider Line. Use this functionality to add a horizontal line to your content …

Insert a horizontal line into your content

(Horizontal line menu button)

13, 14 & 15. Alignment buttons – Click these buttons to align your text …

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. Use this button to insert a hyperlink into your text (See “Inserting Internal Content Links Into WordPress Posts” tutorial to learn more about creating internal content links).

17. Unlink. Click this button to delete hyperlinks.

18. Insert Read More Tag. This feature inserts a “read more” tag wherever you have placed the cursor. All text added to a post prior to the insertion of this tag will display when published, but anything added to the post after this tag only displays to visitors after they click on the “read more” link …

Insert 'Read More' Tag

(’Read More’ Tag)

Info

The ‘Read More’ tag does not work on WordPress Pages. It only works on the page showing your latest post entries (i.e. your 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).

Toolbar Toggle

(Display/Hide Kitchen Sink)

20. Distraction-Free Writing Tool. Clicking this icon will toggle between distraction-free writing functionality & normal mode. This is a handy feature for checking the placement of items on the page and for working on your content without distracting page elements …

Distraction-Free Writing Mode Toggle

(Distraction-Free Writing Functionality)

When distraction-free writing mode is turned on, all surrounding page elements return as soon as the cursor is moved outside the content editor box.

Refer to the “Tips” section in this tutorial for more information about using this functionality.

21. Format Style. Use this feature to add styling to your text.

Notes:

  • Depending on the theme you’ve installed, the style menu may include various headings and other pre-defined styles.
  • When you create a new post or page and start entering text into the content box, your text will typically be formatted using the default “Paragraph” style.
  • Modifying content styles typically require knowing how to edit CSS (Cascading Style Sheets).

To create headings, highlight your text and select a heading style from the drop-down menu (e.g. Heading 1) …

Heading Styles

(Heading Formats)

22. Underline. Highlight the content your want to underline and click this button.

23. Justify. Clicking this button justifies the paragraph where your mouse cursor has been placed or text highlighted. Justification can only be applied to text.

24. Select Text Color. Highlight a section of text and select a color from the palette in the drop menu to replace the color of your selected text …

Text Color Palette

(Color Palette)

Info

You can add new colors to the color palette by clicking on the Custom section …

Custom Color Palette

(Select Custom Text Colors)

This gives you access to an almost limitless choice 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 select a new custom color.

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

Common HEX Color Codes

(Commonly Used HEX Color Codes)

25. Paste as Plain Text. Click this button to paste the content of your clipboard into your content editor area as plain text …

Plain Text On/Off

(Plain Text On/Off Mode)

Refer to the “Tips” section below for more details about using this functionality.

26. Clear formatting. Use this feature to clear all content formatting if you spot strange codes in your text (or if your content isn’t displaying as you intended after your post or page has been published).

27. Custom character. Click this button to add special characters like © ® ™ and many other characters and symbols to your content.

Insert special characters into your content

(Special character table)

For more information on using special characters in WordPress, visit this tutorial:

28. Decrease Indent – Click this menu button to outdent (move left) text.

29. Indent – Click this item to add indentation.

This is a line of indented text.

To keep indenting text, press the Indent button more than once.

30. Undo. Click this button to undo your previous commands. Use this if you accidentally delete a section of text, or format content incorrectly and need to backtrack.

31. Redo. Clicking this button restores a change or deletion that you have undone.

32. Keyboard Shortcuts. Click this button to see the Keyboard Shortcuts screen. This is covered in more detail in the Tips section further below.

Important

Plugins can add new features to the content editor …

Plugins can add new features to your WordPress toolbar

(Plugins can add new buttons to your WordPress menu toolbar)

Important

Underline And Justify Buttons Removed From The Editor In WordPress 4.7

The WordPress development team has removed the Underline and Justify buttons from the visual editor in version 4.7, as it was felt that underlining text can confuse readers who may interpret it as a hyperlink and the justify button was removed because most web browsers that render CSS and HTML lack sophisticated page layout functions to adjust the gaps left in words by justification and can make text less readable.

Underline And Justify Buttons Removed From The Editor In WordPress 4.7

(Underline And Justify Buttons Removed From The Editor In WordPress 4.7)

Although the buttons have been removed from the toolbar, you can still use the keyboard shortcuts for both buttons (see below).

Useful Tips And Additional Info

Tip #1 - Keyboard Shortcuts For Power Users

As well as using the buttons in the toolbar menu, you can use the key combinations below as you type. This can help you work faster …

WordPress Content Editor Power User Shortcuts

(WordPress Content Editor Power User Keyboard Shortcuts)

Additional Formatting Shortcuts

Prior to the release of version 4.5, WordPress introduced formatting shortcuts for lists and headings. In WordPress v. 4.5 you can now also use formatting shortcuts for horizontal lines and code …

WP 4.5 - Formatting Shortcuts

(WordPress v. 4.5 – Formatting Shortcuts)

Add three horizontal dashes to create a horizontal line and enclose your text in backticks to turn your highlighted text into <code> …

WordPress 4.5 : Formatting Shortcuts - Backticks

(WordPress 4.5 : Formatting Shortcuts – Backticks)

The formatting shortcuts for horizontal lines and code are shown below …

WordPress 4.5 - Formatting Shortcuts

(WP 4.5 – Formatting Shortcuts)

To learn how to enhance the WordPress visual editor with additional formatting features, see the tutorial below:

Tip #2 – Pasting Content From Microsoft Word

MS Word and some other word processors (e.g. Google Docs) can contain formatting 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 editor will add a bunch of messy code …

Pasting content from word processors into pre-WP 3.9 versions adds unwanted formatting to your content.

(Pasting content from word processors into pre-WP 3.9 versions can add unwanted formatting to your content.)

This is a good example of how WordPress continues to improve its software, so that more of the technical wizardry required to integrate content from different platforms and make things work together invisibly can happen behind the scenes, freeing up greater numbers of non-tech-savvy users to benefit from using WordPress.

WordPress now lets you paste content directly from Microsoft Word and other word processors. If the source content is not pasting cleanly, however, then try pasting it into your editor as plain text and format it afterwards.

Select the Paste as text menu button …

WordPress Visual Editor - Paste as text button

(Paste as text menu button)

When you click on the Paste as text feature, the following notice displays, and informs users that the feature will remain active until toggled off, and reminds them to turn it off if pasting rich content from Microsoft Word …

Paste as Text feature dialog box

(Paste as Text message)

Tip #3 – Using The Clear Formatting Function

You can easily remove formatting from pasted content using the WordPress Visual editor.

Before formatting removal …

Before removing formatting

After …

After removing formatting

This is great if, for example, you have pasted a block of content directly from another website that includes CSS styling formatting.

Sometimes, you can’t tell that content pasted from another site contains formatting specific to that website …

Content pasted from external websites ...

(Content pasted directly from an external website …)

… until you click on the Text tab and view the HTML …

Content pasted directly from external websites can contain hidden CSS formatting

(… can contain unwanted CSS formatting!)

If the content has been sourced from your own website or blog, everything may look fine until you make a change to the styling (e.g. change the color scheme) and discover that some of your previous posts have been formatted differently.

For this reason, we recommend clearing the formatting from pasted content, especially from content sourced from other WordPress websites.

To do this, paste your pre-formatted content into the Visual editor …

Paste formatted content into the WordPress visual editor

(You can paste content with formatting into the visual editor)

Next, select all the content and select the Clear formatting button …

WordPress Editor - Clear formatting menu toolbar button

(Clear formatting button)

All your formatting (e.g. bold, italics, colors, etc.) will be removed …

Text formatting removal

(Removing content formatting)

Note that some content styling elements will not be removed from your text after applying this feature. This includes hyperlinks, blockquotes, etc.

Tip

Here is a useful way to test and remove any errors suspected of being caused by poor formatting without losing the original content.

Before using the Remove formatting feature, switch over to the Text editor tab, then select and copy everything to your clipboard …

Copying formatted text in WordPress

(Copying formatted text to the clipboard)

Paste the content from the clipboard into a new text file and save, then return to your editor and go through the formatting removal process. Now, if something were to go wrong, you have a backup copy of your content with all the original formatting preserved.

Tip #4 – Adding Line Break Returns To Content

As with most applications, line returns are created by pressing the “Enter” key after typing text …

Default line spacing

(Line spacing – default)

When you hit the “Enter” key to start a new line, WordPress adds a regular paragraph ending tag (</p>) behind the scenes. To add a line break tag (<br />) and create single line returns, use both the “shift” and “enter” keys …

Adding single line spacing to content

(Single line spaces)

Breaks enable the formatting of your block of text to be carried over. This is useful if you want to add line breaks to bulleted sections or keep the same style going on different text blocks.

Tip #5 – How To Resize The WordPress Content Editor

By default, all newer versions of WordPress have the Full Height Editor feature activated, providing users with a responsive and auto-adjustable editor …

WordPress includes a built-in responsive content editor

(WordPress comes with a built-in responsive content editor)

You can quickly check if the Full Height Editor feature is enabled or not, by looking at either of the  following tell-tale signs:

  • If the Distraction-Free Writing icon can be seen, then the Full Height Editor feature is enabled,
  • The Full Height Editor function is enabled if you cannot see the content box scrollbar

Tell-tale signs that the Full Height Editor feature is turned on

(How to tell if the Full Height Editor function is turned on)

When the full height editor feature is enabled, the content editor automatically resizes as you type to fit more content …

The WordPress content box automatically expands as you type

(Your content box should automatically expand as you type)

If for whatever reason the Full Height Editor function has been disabled, the editor scrollbar will appear once your typing exceeds the size of the text editor area …

Full Height Editor function disabled - scrollbar visible

(Full Height Editor feature disabled – scrollbar visible)

Additionally, you will not see the Distraction-Free Writing icon displayed …

Full Height Editor feature disabled

(Full Height Editor feature disabled)

If the Full Height Editor function has been switched off, you can adjust the size your text box using the resizing feature at the bottom right-hand corner of the editor tool …

Text Box Resizing Tool

(Text Box Resizing Feature)

Just click and drag the box to resize your content editor …

Drag and drop to resize your editor

(Drag and drop to resize your editor)

Your text box will expand to the new size …

Resized WordPress editor

(Resized WordPress editor)

Tip #6 – Distraction-Free Writing Tool – Additional Info

Distraction-Free Writing functionality requires that the full-height editor is enabled in the Screen Options area (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 - WordPress Text Editor

(Distraction-Free Mode – Text Editor)

Tip

You can eliminate distractions by combining Distraction-Free writing and the built-in Full-Screen function of web browsers like Google Chrome & Firefox …

Distraction-Free Writing Screens - WordPress Only vs WordPress & Full-Screen Browser

(Distraction-Free Writing Mode – WordPress Only vs WordPress & Full Screen Web Browser)

With Distraction-Free Writing mode activated and the Full-Screen function of your web browser enabled, the current page will fill the screen entirely, leaving only the post title and content you’re working on visible.

To enable Full-Screen in your browser, refer to the screenshots below …

Google Chrome & Firefox Browsers - Full Screen Feature

(Google Chrome & Firefox Browsers – Full Screen Function)

Idea

To enable either the Full Height Editor or Distraction-Free Writing Mode functionality, click on the Screen Options tab …

Screen Options Tab

(Screen Options Tab)

In the Additional settings area, click Enable the full-height editor and distraction free functionality

Enable full-height editor and distraction-free functionality in your Screen Options

(Enable full-height editor and distraction-free functionality in your Screen Options section)

Tip #7 – Convert Emoticons

One final tip worth mentioning is that you can convert emoticons to graphics by enabling the formatting option inside your Writing Settings (Settings > Writing) screen …

Formatting Options: Convert Emoticons - WordPress Writing Settings

(WordPress Writing Settings – Formatting Options: Convert Emoticons)

🙂

Congratulations! Now you know how to use the content editor in WordPress.

The WordPress Editor

***

"I am beyond impressed with what you have put together. I can tell that you put a ton of hard work into building what you have. You have the absolute best content on WordPress I have ever seen!" - Robert T. Jillie

A Basic Guide To HTML For WordPress Users

Learn basic HTML formatting you can use to format content in your posts and pages …

A Basic Guide To HTML For WordPress NewbiesThe web, your website, your web pages and even your content are built and powered by code.

It is inevitable, then, that sooner or later, you may run into a situation where you will probably need something done for your business online, for your web site, or in your web pages that requires having some knowledge of code.

HTML is one of the main “code” languages used throughout the world wide web, web sites, blog pages and formatting your web content.

One of the main benefits of using WordPress is that you don’t need to learn HTML to compose and format content for your pages. WordPress has unique features like “themes”, “plugins” and “widgets” that let you manage your website without having to touch code, and a powerful, built-in content that allows you to create and easily format your content just by clicking on a few buttons.

This article provides a useful reference guide for WordPress newbies to basic HTML codes you can use to format content in your blog’s pages or posts.

A Beginner's Guide To Formatting Content With HTML For WordPress Users

You don’t have to learn HTML to use WordPress, but having some familiarity with HTML is really useful as a WordPress user!

A Beginner’s Guide To HTML Formatting Tags For WordPress Users – Step-By-Step Tutorial

If you are running your own web presence, having a little understanding of HTML can help you save time and money in various ways.

Imagine that:

  • You want to make changes to your existing content, insert a text link and an image to a section of your sidebar, or direct visitors to a contact page, newsletter subscription page, etc. If you know basic HTML, you can do this really quickly and easily without professional assistance.
  • You outsource content work to a web copywriter and receive back files that contain HTML formatting. Having some basic knowledge of HTML helps you better proof, understand and review the quality of the content before you accept the work.
  • Someone creates copy for your website. You spot a couple of basic text formatting errors, like a sentence that could have been made bold, or a hyperlink that has not been added to your copy. Knowing some basic HTML can help you fix simple mistakes in your blog posts very quickly without needing to ask (or pay) a webmaster, a web designer, or someone else to do it for you.
  • You need to discuss new project or requirement with a web developer. Knowing a little bit of HTML not only will help you communicate more effectively with web developers and web designers, it also helps you feel and sound more confident and knowledgeable when presenting ideas or making requests for changes to your website.

A Useful Guide To HTML Formatting Tags For Beginners

You don’t need to become a technical web programmer – just learn enough basic HTML to be a “web-smart” business owner!

HTML – What Does It Mean?

HTML is an acronym for HyperText Markup Language. According to Wikipedia’s definition of HTML …

HTML is the main markup language for creating web pages and other information that can be displayed in a web browser.

HTML is written in the form of HTML elements consisting of tags enclosed in angle brackets (like <table>), 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.

HTML elements form the building blocks of all websites. HTML allows 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 JavaScript which affect the behavior of HTML web pages.

Source: Wikipedia, HTML

Useful Information

Important: Like everything else on the web, HTML is also subject to changes on a regular basis, and some of these changes will affect WordPress.

Currently, the latest version of HTML is version 5 (also called HTML5), and this change has introduced a number of new “tags” to keep up with the latest advances in software and browser technology. As a number of older tags become obsolete, you can expect that WordPress will also continue to update its core application in order to remain compatible with industry-wide HTML standards.

Using HTML Tags To Format Content In Your Posts And Pages

WordPress gives you the choice of adding content to your pages and posts with a default 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 HTML code and other script languages (e.g. Javascript) when creating or editing your content …

Default WordPress HTML Editor

Built-In WP Text Editor

Important

We cover the WordPress WYSIWYG Editor and how to add content to posts and pages in separate ”how to” articles.

What HTML Formatting Tags Can Be Inserted Into WordPress?

The WordPress Content Management System (CMS) lets you add many widely-used HTML formatting tags, including the following:

HTML Formatting Tags

HTML Formatting Tags

Here are several practical text formatting examples using a number of the HTML tags listed in the table above …

Formatting WordPress Content With Basic HTML Tags

Using Common HTML Tags In WordPress Content

Practical Tip

To learn more about using HTML, go here:

WordPress Text Editor

The WordPress Text Editor lets users see, edit and work directly with HTML code and other script languages (e.g. Javascript) in the content.

Out of the box, the HTML (Text) Content Editor displays a number of standard menu features …

WordPress HTML (Text) Content Editor Menu

WordPress HTML (Text) Content Editor Menu Features

Below is a brief description of the function of each of the Text Editor buttons with their corresponding HTML formatting tag (see the screenshot above):

  1. b: <strong></strong> Use this HTML tag for strong text emphasis (i.e. bold).
  2. i : <em></em> Use this button for emphasis of text (i.e. italicize).
  3. hyperlink: <a href="http://example.com"></a> Use this HTML tag to add a hyperlink to your highlighted text.
  4. b-quote – <blockquote></blockquote> Use this HTML tag for quoted or cited text.
  5. del: <del></del> This HTML tag is used to mark text that has been deleted from a page or post. Many browsers will typically display this as striked-through text.
  6. ins: <ins></ins> This HTML tag is used to indicate text that has been inserted into a post or page. Many web browsers will typically display this as underlined text.
  7. 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 and add an “alt” description (a text description of your image in case the image is not displayed in a user’s browser. Note: you can also use the “Add Media” button (15) to insert images into your content.
  8. ul: <ul></ul> Click this menu button to insert an unordered list into your content. Unordered lists generally display as a list of items preceded by bullets. Note: use this HTML tag together with the <li> tag (see below) in order for bullet lists to work correctly.
  9. ol: <ol></ol> Click this button to insert a numbered list. Items in an ordered list are usually numbered (just like the list you are seeing right now!). Note: use this HTML tag together with the <li> tag (see below) in order for bullet lists to work properly.
  10. li: <li></li> This HTML tag is used to insert or turn your selected text into a list item. (This tag should be used in conjunction with the ul or ol tag).
  11. code: <code></code> Choose this button to display code (like html formatting tags) in your text. If you don’t use these tags to surround the code you want to display, WordPress will apply your tags and you will get errors (e.g. broken text). Note: any content added inside the <code> tags generally will appear using a different styling of text, such as a monospaced font like Courier. (See the “Tips” section below for more details).
  12. more: <!--more--> This button breaks your post into “teaser” and ”rest of content” sections. For example, if you add one or two paragraphs, then insert the “more” tag and compose the remainder of your post content, users will only be able to read the first paragraphs of your post and a hyperlink (e.g. continue reading…), which if clicked on, will then bring up the rest of the post’s content.
  13. Close Tags button – Closes any open HTML tags left in your content. Note: proof your content after using this function to make sure that all HTML tags have correctly formatted your text.
  14. Distraction-Free Writing Mode – click this button to work in “distraction-free” 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” writing mode. Click the button again to return to the normal text editor mode.
  15. Add Media – Click this button to insert media into your content (e.g. images, videos, audio files). This button displays for both the Visual and Text editors.

WordPress Distraction-Free Writing Mode

WordPress Editor Distraction-Free Writing Mode [#14]

Some Useful Tips Related To Using HTML Formatting In WordPress

HTML Content Editors

If you plan to use HTML extensively, there are several Free HTML software applications that you can download and use when getting started.

For example, a popular HTML software application you can download at no cost is KompoZer.

Kompozer - HTML Editor

Kompozer – HTML Editor

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. You can build HTML-based content in this application, then use plugins that let you insert code into your posts or pages.

Another option, if you don’t want to touch any code at all or use an external HTML content application, is to use a WordPress plugin that lets you build HTML-based content inside WordPress itself.

Thrive Content Builder - Plugin For WordPress

Thrive Content Builder

To learn more about this plugin, see this article:

If you have no need or desire for doing work involving technical coding, but would still like to be able to easily create, insert and format content containing HTML into areas of your WordPress site other than your posts or pages (e.g. your sidebar, author profile, etc.), then see the quick tutorial below for a very simple solution that involves spending no extra time downloading HTML software.

Tutorial: Adding HTML-Formatted Text To The “About Yourself” Text Box In Your Profile

In WordPress, there are certain locations like ”widgets” in your sidebar, and the “About Yourself” text area in your User Profile screen that let you insert HTML-formatted content.

These sections, however, don’t come with their own content editor like the Visual Content editor found inside your Posts and Pages sections (Quick update: WordPress version 4.8 introduced rich text widgets that now let you format content inside the widget using a WYSIWYG editor) …

WordPress WYSIWYG Editor

WordPress Visual Editor

You can still use the WordPress Visual/Text editor to create your HTML-formatted text, and then paste it into those areas.

Let’s show you an example, so you can see how this can easily be done.

By default, whenever a post is published in your WordPress site, a link to the post author is displayed somewhere in your posts (i.e. at the bottom or top of the post) …

Author Page Link In WordPress

Link To Author Page In WordPress Post

Clicking on the author link takes you to the Author Archives section, where they can learn more about you (or other registered users) and browse other blog posts that you (or other authors) have published …

WordPress Author Archives Section

Note: As you can see from the above screenshot, you can add hyperlinks and simple formatting like italics and bold text to enhance your author resource box and promote yourself, your business, social media pages, other online properties you own, etc. to blog readers …

Author Profile

The author bio box is located in the About Yourself > Biographical Info field inside your Profile area …

About Yourself

Although the Biographical Info text area allows you to add HTML-formatted content, it doesn’t have a content editor, so you have to either know how to type HTML code directly into the text area, or create it in an HTML editor, then copy and paste it in …

About Yourself

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

First, create a new post and type your content inside the Visual Editor.

In this case, we want to create an author description

Creating An Author Description

Next, format the content using the Visual Editor . Please note that you can only use simple formatting in your author description such as hyperlinks, bold, underline and italicized text, so keep the formatting simple – use bold, italics and text links sparingly across one or two paragraphs to explain who you are and what you do, and remember to include a useful link to help visitors further engage with you or your business …

Creating An Author Description

Keep working inside the Visual Editor tab until you have added all of the formatting you want to display in your author profile content …

Author Description

Once you have created your content, switch over to the Text Editor and copy everything to your clipboard …

Creating An Author Description

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

User Profile Screen

Scroll down the screen to the About Yourself section and paste your content into the Biographical Info text box ….

About Yourself

Remember to click Update Profile to save your changes …

Update Profile Button

Congratulations … You have just created an author promo for your blog posts and formatted it using basic HTML!

Author Profile

To learn how to edit your profile settings, see this ”how to” article: How To Edit Your WordPress User Profile

As we’ve mentioned a number of times, you don’t have to learn HTML to use WordPress, but it can be useful to know the basics of HTML.

Tip

HTML Tips For WordPress Users

Tip #1 – If you plan to add more complex design elements to your content (e.g. highlighted segments, pricing boxes, etc.) without learning HTML, you can use cut & paste HTML resources …

Save time using cut & paste HTML resources

Save time using cut & paste HTML tools

Learn about a time-saving “cut & paste” HTML resource we recommend here:

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

For example:

WordPress HTML

WordPress HTML

WordPress HTML lets you add custom HTML to both the page and post body and head sections.

WordPress HTML

WordPress HTML. (Screenshot source: plugin website)

Pasting HTML directly into the WordPress editor can often break various elements and corrupt the HTML. By inputting the HTML code inside the custom fields dialogue boxes, you can output the exact HTML to your post or page.

Extensible HTML Editor Buttons

Extensible HTML Editor Buttons

Extensible HTML Editor Buttons is a free plugin you can add to your site that gives you better control of settings for HTML tags like div and span, as well as adding custom buttons and extra functions to your text editor …

WP Plugin - Extensible HTML Editor Buttons

WP Plugin – Extensible HTML Editor Buttons. (Screenshot source: plugin website)

Here’s another free plugin you can use …

Raw HTML

Raw HTML - Plugin For WordPress

Raw HTML lets you disable automatic formatting like automatic paragraph creation and smart quotes, and use raw HTML/JS/CSS code in your posts without WordPress messing it up.

With this plugin installed, you can wrap any section of your post in [raw]…[/raw] tags, preventing WordPress from converting newlines to HTML paragraphs, replacing apostrophes with typographic quotes and so on. This is also very useful if you want to add JavaScript or a CSS block to your content.

Raw HTML - WP Plugin

Raw HTML – WP Plugin. (Screenshot source: plugin website)

Tip #3 – Troubleshooting HTML Tag Errors: If your text formatting displays incorrectly after publishing your post or page, make sure that you have entered your HTML tags correctly in the Text Tab, not in the Visual Tab.

For example, if you type the following text in the Visual Content Tab …

Troubleshooting HTML Formatting Errors

This is what your text will look like when your post is published …

Troubleshooting WordPress HTML Formatting Errors

You can see the problem by switching over to the Text Tab …

Troubleshooting HTML Formatting Errors

As you can see in the screenshot above, WordPress converts the symbols “<” and “>” into their HTML code equivalents (called ASCII characters).

So:

  • <(open angled bracket) = “&lt;
  • >(closed angled bracket) = “&gt;

To preserve the symbols “<” and “>” intact and ensure that your text will format correctly, you need to paste the code into the Text Editor …

Troubleshooting HTML Formatting Errors

Now … when you publish your post, you will find that your text has been formatted correctly …

Troubleshooting HTML Formatting Errors

Tip #4 (Advanced WP User): By default, WordPress doesn’t allow some HTML tags to be used (e.g. codes such as embed, textarea and others). This is for security reasons.

If you do experience any problems when adding commonly-used HTML tags to your content that are allowed to be used in WordPress, try disabling the visual editor in your user profile …

Disabling the WordPress visual editor

After disabling the visual editor and updating your settings, go back to your post or page and re-paste the content with the problematic HTML tags, then republish your post.

If the above suggestion fixes the issue, return to your Profile page, reactivate your Visual Editor, and check if the HTML code is still working fine with the visual editor restored.

Tip

Note: If the above suggestion doesn’t fix the issue and you continue experiencing problems adding HTML code to your content, 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 or WordPress troubleshooting resources for probable causes and solutions
  • Reinstalling your WordPress application (i.e. perform a new site installation)
  • Contacting your web host for help

Congratulations! Now you know how to use basic HTML to format and style your content.

***

"Your training is the best in the world! It is simple, yet detailed, direct, understandable, memorable, and complete." Andrea Adams, FinancialJourney.org