How to Use the HTML Editor in WordPress to Add Custom HTML
Tags: wordpress
Published: 2020-11-23 03:01:14

HTML (HyperText Markup Language) is one of the popular languages to create a website. It sounds like HTML is only for developers, however, even a non-tech website owner should know <strong>how to use the HTML editor to add HTML to their WordPress site</strong> to help them out in many cases.

<!--more-->

Specifically, when you need to handle some work, such as creating tables, changing font styles or font sizes, adding custom borders, etc. but WordPress doesn't support these customizations, so you need to use the HTML editor. You can add and edit the HTML code in post/page editor and widgets. But first of all, there are a few things that you need to keep in mind when adding HTML code to your WordPress website:

<h3>Note When Using the HTML Editor for Your Website</h3>

To ensure the HTML code displays on the WordPress site properly as you want, you need to check whether the syntax is correct or not by using code editors like Notepad ++. The incorrect syntax may cause errors in the website's display.

Second, you shouldn't write the <code>&lt;script&gt;</code> tag in the HTML code that you use in the HTML editor because it may be deleted and then your content will fail to display as expected.

Now, I will show you how to use the HTML editor to add the following code to create a simple table. This is just my example, you can try with your own code.

<pre> &lt;table style = "background-color: # 87ceeb;"&gt;

  &lt;tbody&gt;

    &lt;tr&gt;

      &lt;td&gt; Books &lt;/td&gt;

      &lt;td&gt; Authors &lt;/td&gt;

    &lt;/tr&gt;

    &lt;tr&gt;

      &lt;td&gt; The magical power of emotional appeals &lt;/td&gt;

      &lt;td&gt; Roy Garn &lt;/td&gt;

    &lt;/tr&gt;

    &lt;tr&gt;

      &lt;td&gt; How to win friends and influence people &lt;/td&gt;

      &lt;td&gt; Dale Carnegie &lt;/td&gt;

    &lt;/tr&gt;

  &lt;/tbody&gt;

&lt;/table&gt;

</pre>

<h2>Use the HTML Editor in Pages or Posts</h2>

You can add HTML to posts or pages by using the WordPress editor. The manipulation is just as simple as when you <a href="https://gretathemes.com/write-and-add-post-in-wordpress/">write and add a post on WordPress</a>. It's supported by both Classic and <a href="https://deluxeblogtips.com/beginners-guide-wordpress-gutenberg-editor/">Gutenberg</a> editors.

<h3>Use Gutenberg Editor</h3>

In the post/page editor, click the plus (+) symbol to add a new block and select the <strong>Custom HTML</strong> block. You should use the search bar to find it quickly.

<img class="aligncenter" src="https://imgur.com/HLinrOl.png" alt="Add a Custom HTML block in Gutenberg editor" width="1060" height="599" />

Then, insert the HTML code into the selected block.

<img class="aligncenter" src="https://imgur.com/7sEckiF.png" alt="Insert code to the HTML block in the Gutenberg editor" width="1363" height="621" />

Click <strong>Preview</strong> to see how the HTML code is displayed on the front end.

<img class="aligncenter" src="https://imgur.com/9IHOZdz.png" alt="Preview how the HTML display on your WordPress website" width="1361" height="621" />

<h3>Use Classic Editor</h3>

Many people are not familiar with WordPress's new Gutenberg editor, so they may <a href="https://metabox.io/disable-gutenberg-use-wordpress-classic-editor/">switch from Gutenberg to Classic</a>. Inserting the HTML code into the Classic editor is more simple than using Gutenberg. You only need to open the posts editor, click on the <strong>Text</strong> tab, then add the code to the position you want:

<img class="aligncenter" src="https://imgur.com/lBfMTqM.png" alt="Open the Text tab and insert the HTML code" width="1346" height="624" />

Click the <strong>Visual</strong> tab to see the result.

<img class="aligncenter" src="https://imgur.com/7RpM9xA.png" alt="Open the Visual tab to see the HTML code " width="1349" height="623" />

<h3>Save and Check the Result</h3>

After finishing, remember to click <strong>Save</strong> or <strong>Update</strong> to save the content. Now the table is displayed as you want on the front end.

<img class="aligncenter" src="https://imgur.com/AFR7oa2.png" alt="The table display on your website front end" width="1351" height="591" />

<h2>Use the HTML Editor in Widget</h2>

Widgets are the blocks of the content like media, text, links, lists, ... that can be added in the widget areas like sidebar, footer, slide-out menu, ... depending on your <a href="https://gretathemes.com/wordpress-themes/">WordPress theme</a>. You can add HTML into the widget in the <strong>Customizer</strong> or <strong>Admin Dashboard</strong>.

<h3>Use the HTML Editor in Customizer</h3>

You need to add the <strong>Custom HTML</strong> widget to a widget area. It's basically similar to adding other widgets by Customizer. If you haven't known clearly how to use Customizer yet, let's check out our very detailed instructions <a href="https://gretathemes.com/wordpress-theme-customizer/">here</a>.

Go to <strong>Customize</strong>&gt; <strong>Widget</strong>, select the widget area, and click <strong>Add New</strong> button.

<img class="aligncenter" src="https://imgur.com/2TbUEcM.png" alt="Add a widget in the Customizer of WordPress" width="1366" height="622" />

After you add the HTML code in the content box in Custom HTML widget, the table will be displayed in the sidebar as below. Don't forget to click <strong>Publish</strong> to save it. And that's it!

<img class="aligncenter" src="https://imgur.com/HeRiWCR.png" alt="Add Custom HTML widget to the sidebar" width="1344" height="625" />

<h3>Using the HTML Editor in Admin Dashboard</h3>

In <strong>Admin Dashboard</strong> &gt; <strong>Appearance</strong> &gt; <strong>Widget</strong>, choose <strong>Custom HTML</strong> (1), select the location you want to display it (2), and click <strong>Add Widget</strong> (3). Then, add the code to the content box of <strong>Custom HTML</strong> widget (4) and press <strong>Save</strong> to finish.

<img class="aligncenter" src="https://imgur.com/gVvd4mz.png" alt="Add code the the Custom HTML widget" width="1347" height="622" />

After that, go to the front end and check the results. The table is displayed in the footer.

<img class="aligncenter" src="https://imgur.com/fsCjI92.png" alt="The table display in the footer of your WordPress site" width="1349" height="593" />

As you can see, using the HTML editor in Dashboard is a little bit inconvenient because you cannot view the live preview on the front page, so I prefer the Customizer.

<h2>Last Words</h2>

Knowing how to use the HTML editor to add code to your website can help advance your website and improve the content and images significantly. Then, the rest of this work will depend on your coding skills to add and customize your content.
<hr />

The publication at <a href="https://gretathemes.com/use-html-editor-wordpress-add-custom-html/">GretaThemes</a>.