DEV Community

loading...
Cover image for How to Use the HTML Editor in WordPress to Add Custom HTML

How to Use the HTML Editor in WordPress to Add Custom HTML

gretathemes profile image GretaThemes Originally published at gretathemes.com Updated on ・5 min read

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 how to use the HTML editor to add HTML to their WordPress site to help them out in many cases.

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:

Note When Using the HTML Editor for Your Website

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 <script> 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.

 <table style = "background-color: # 87ceeb;">

  <tbody>

    <tr>

      <td> Books </td>

      <td> Authors </td>

    </tr>

    <tr>

      <td> The magical power of emotional appeals </td>

      <td> Roy Garn </td>

    </tr>

    <tr>

      <td> How to win friends and influence people </td>

      <td> Dale Carnegie </td>

    </tr>

  </tbody>

</table>

Use the HTML Editor in Pages or Posts

You can add HTML to posts or pages by using the WordPress editor. The manipulation is just as simple as when you write and add a post on WordPress. It's supported by both Classic and Gutenberg editors.

Use Gutenberg Editor

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

Add a Custom HTML block in Gutenberg editor

Then, insert the HTML code into the selected block.

Insert code to the HTML block in the Gutenberg editor

Click Preview to see how the HTML code is displayed on the front end.

Preview how the HTML display on your WordPress website

Use Classic Editor

Many people are not familiar with WordPress's new Gutenberg editor, so they may switch from Gutenberg to Classic. 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 Text tab, then add the code to the position you want:

Open the Text tab and insert the HTML code

Click the Visual tab to see the result.

Open the Visual tab to see the HTML code

Save and Check the Result

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

The table display on your website front end

Use the HTML Editor in Widget

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 WordPress theme. You can add HTML into the widget in the Customizer or Admin Dashboard.

Use the HTML Editor in Customizer

You need to add the Custom HTML 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 here.

Go to Customize> Widget, select the widget area, and click Add New button.

Add a widget in the Customizer of WordPress

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 Publish to save it. And that's it!

Add Custom HTML widget to the sidebar

Using the HTML Editor in Admin Dashboard

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

Add code the the Custom HTML widget

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

The table display in the footer of your WordPress site

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.

Last Words

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.


The publication at GretaThemes.

Discussion (0)

pic
Editor guide