{"id":1092,"date":"2019-09-06T15:50:18","date_gmt":"2019-09-06T12:50:18","guid":{"rendered":"https:\/\/html-online.com\/articles\/?p=1092"},"modified":"2026-04-01T15:53:05","modified_gmt":"2026-04-01T12:53:05","slug":"how-to-add-custom-html-wordpress","status":"publish","type":"post","link":"https:\/\/html-online.com\/articles\/how-to-add-custom-html-wordpress\/","title":{"rendered":"How to Add Custom HTML in WordPress"},"content":{"rendered":"

WordPress<\/a> is a straightforward Content Management System (CMS). Most of the time, you won\u2019t need to touch a single code to post content on your website. But, there are advanced tasks that require you to tweak a couple of HTML codes on the editor, hence, understanding HTML can be helpful.<\/strong><\/p>\n

So sit back, and relax. This article will explain how you can add HTML codes on your WordPress website.<\/p>\n

What is HTML?<\/h2>\n

It stands for Hypertext Markup Language, which is the backbone of website creation.<\/p>\n

HTML allows you to organize online documents using tags and attributes \u2014 a set of codes. They\u2019ll then be saved as an HTML file. Whenever a browser opens the file, it displays only the readable text, which means no tags are shown.<\/p>\n

When editing HTML<\/a>, keep in mind that most elements have opening and closing tags like paragraphs, <p>an example<\/p><\/strong>. However, there are a few self-closing tags as well such as line breaks, <br><\/strong>.
\n<\/p>\n

Why Do You Need to Add HTML in WordPress?<\/h2>\n

WordPress’ new editor, Gutenberg<\/a>, offers a more intuitive way to handle content formatting. Not only that, inserting media files like images or videos, adding layout elements and widgets are doesn\u2019t take a minute. In short, using the default editor is enough for basic formatting needs.<\/p>\n

However, there\u2019s a drawback. To handle specific tasks, relying on the default editor alone can be challenging. For example, there are times when you might want to create a custom table<\/a>, modify images, add borders, etc., for aesthetic purposes.<\/p>\n

In any of these situations, inserting custom HTML code in your WordPress\u2019 post can be a good option.<\/p>\n

How to Add HTML in WordPress (with Examples)<\/h2>\n

There are three common ways on how you can add custom HTML codes on WordPress. Either for posts, pages, or as widgets.<\/p>\n

Adding HTML in WordPress Posts<\/h3>\n

If you want to insert HTML codes to your posts, please follow these steps:<\/p>\n

    \n
  1. Log in to your WordPress dashboard<\/strong>.<\/li>\n
  2. Click All Posts<\/strong>, from the navigation menu.
    \n\"wordpress<\/li>\n
  3. Choose the post you want to edit, and you\u2019ll be directed to the WordPress visual editor.
    \n\"wordpress<\/li>\n
  4. Click the Plus icon<\/strong>on the block area or the top of the editor.<\/li>\n
  5. Choose the Custom HTML<\/strong>icon under the Formatting<\/strong>
    \n\"custom<\/li>\n
  6. Alternatively, you can switch to the editor mode. Click the three dots menu<\/strong>on the top right side corner, then select Code Editor.<\/strong>
    \n\"testing<\/li>\n
  7. Feel free to add your desired code. As an example, the code for making a simple table will be used.\n
    <<\/span>table<\/span> <\/span>style<\/span>=<\/span>\"<\/span>background-color<\/span>:<\/span> <\/span>#<\/span>87ceeb<\/span>;<\/span>\"<\/span>><\/span>\n  <<\/span>tbody<\/span>><\/span>\n    <<\/span>tr<\/span>><\/span>\n      <<\/span>td<\/span>><\/span>Games<\/<\/span>td<\/span>><\/span>\n      <<\/span>td<\/span>><\/span>Ranking<\/<\/span>td<\/span>><\/span>\n    <\/<\/span>tr<\/span>><\/span>\n    <<\/span>tr<\/span>><\/span>\n      <<\/span>td<\/span>><\/span>PUBG Mobile<\/<\/span>td<\/span>><\/span>\n      <<\/span>td<\/span>><\/span>1<\/span><\/<\/span>td<\/span>><\/span>\n    <\/<\/span>tr<\/span>><\/span>\n    <<\/span>tr<\/span>><\/span>\n      <<\/span>td<\/span>><\/span>Stardew Valley<\/<\/span>td<\/span>><\/span>\n      <<\/span>td<\/span>><\/span>2<\/span><\/<\/span>td<\/span>><\/span>\n    <\/<\/span>tr<\/span>><\/span>\n  <\/<\/span>tbody<\/span>><\/span>\n<\/<\/span>table<\/span>><\/span>\n<\/pre>\n<\/li>\n
  8. The result will look like this:
    \n\"wordpress<\/li>\n<\/ol>\n
    Adding HTML in WordPress Pages<\/h3>\n
    This method has a similar process to WordPress posts. The steps are:<\/p>\n
      \n
    1. Click All Pages <\/strong>on your WordPress dashboard.
      \n\"all<\/li>\n
    2. Add a new page or edit an existing one.<\/li>\n
    3. Click thePlus<\/strong> icon, either on the block area or from the top of the editor.<\/li>\n
    4. Select the Custom HTML <\/strong>option<\/strong>under the Formatting<\/strong> Another way is by picking from the Most Used<\/strong> segment or switching the editor mode to Code Editor<\/strong>.<\/li>\n
    5. Add the custom HTML code to modify your WordPress page.
      \n\"custom<\/li>\n
    6. Click Preview <\/strong>if you want to see the results before publishing.
      \n\"preview<\/li>\n
    7. Here is the outcome:
      \n\"outcome\"<\/li>\n<\/ol>\n
      Adding HTML in WordPress Widgets<\/h3>\n
      To insert HTML code in your widgets, please do the following:<\/p>\n
        \n
      1. From the WordPress dashboard, go to the Widgets<\/strong>page under the Appearance<\/strong> menu.
        \n\"appearance\"<\/li>\n
      2. Choose the Custom HTML option and click Add Widget<\/strong>.
        \n\"add<\/li>\n
      3. Fill out the widget\u2019s title and insert your HTML code.
        \n\"html<\/li>\n
      4. Save<\/strong>the changes.<\/li>\n
      5. The result:
        \n\"result\"<\/li>\n<\/ol>\n
        Extra Tips<\/h2>\n
        You\u2019ve learned how to add HTML in WordPress. It\u2019s not as hard as it seems, right? Before you continue, there are important keys that you need to keep in mind.<\/p>\n
        Always Use the Clean Code<\/h3>\n
        There is a time when you don\u2019t write the code from scratch in WordPress, but copying from other sources like Google Docs<\/a>. This is fine.<\/p>\n
        However, make sure to clean up any borrowed characters from those sources like  for line breaks, or <span style=”font-weight: 500;”> <\/span><\/strong> for span style.<\/p>\n
        It\u2019s necessary because too many cluttered characters will affect your site performance.<\/p>\n
        Learn More HTML Tags<\/h3>\n
        It is recommended to learn basic HTML tags. With this knowledge you can cover elemental needs for making attractive content. Here are a few of the basics:<\/p>\n