When and How to Use WordPress Custom HTML Widget?

The text widget is one of most used widgets on WordPress sites. It helps you to add text as well as code snippets on sidebar and footer widget area. Initially the text widget was only having a simple text area but later WordPress 4.8 version introduced an enhanced text widget. This enhanced text widget brought the TinyMCE visual / text mode options to the previous text widget.

Problem with Enhanced Text Widget

The update to text widget in version 4.8 was aimed to improve the functionality and help users to add custom codes easily. But the enhanced TinyMCE text mode caused more problems than helping users. The code entered in the visual mode was converted into a different format under text mode. Though the functionality of the code might not change the actual code was being changed. For example, when you have ad code in the previous text widget, the code will be converted like below under text mode with the new enhanced text widget.

All brackets and line breaks are converted in to code like &lt; and <br>. You can view the error reported in WordPress support forum for this issue and the bug thread opened with make WordPress core.

Custom HTML Widget

WordPress solved this issue by introducing a dedicated Custom HTML widget to add codes. The plain text widget will remain same for adding text and simple links.

When to Use Custom HTML Widget?

The Custom HTML widget is available similar to any other widgets under “Appearance > Widgets” section. The old “Text” widget is also still available with visual / text mode options. This will really confuse anyone. Below is the way to use these two widgets:

• Use “Text” widget when you want to display only text. You can also add simple codes like hyperlinks for images and bulleted lists.
• Use “Custom HTML” widget for inserting HTML, CSS and JavaScript codes like AdSense advertisement.

Migration and Prevention

Your site may be already using text widget with custom codes. WordPress tries to show notification messages in different cases to guide the proper usage of text and HTML widgets.

1. Old Text Widgets Using Custom Code

When you open your old text widget having custom code, WordPress will show a notification like below. The code will be opened in a legacy mode with the text widget having the checkbox option for preventing automatic paragraphs. This will help to prevent the code modification under text mode.

In this case, you should replace the text widget with custom HTML widget.

2. When Pasting Code Inside New Text Widget

When you try to paste custom code inside a text widget, you will see the following notification to use custom HTML widget or paste the code under “Text” mode. We strongly recommend to use custom HTML widget instead of pasting complex code in text widget under text mode.

Final Thought

There were enough confusions before WordPress guys introduced custom HTML widget. In our opinion, it was unnecessary to introduce text mode for text widget as there are plugins offer widgets to insert code snippets. Nevertheless, making custom HTML widget as part of WordPress core is also a welcome move. Now, you can easily insert code snippets in the widget area using custom HTML widget. Before that you should cleanup the codes on the existing text widgets one by one which is a time consuming task.