{"id":463,"date":"2025-12-18T07:53:26","date_gmt":"2025-12-18T06:53:26","guid":{"rendered":"https:\/\/mybox.com\/help\/?post_type=manual_kb&#038;p=463"},"modified":"2025-12-18T07:55:00","modified_gmt":"2025-12-18T06:55:00","slug":"how-do-you-add-your-own-html-code-to-a-page-based-on-wordpress","status":"publish","type":"manual_kb","link":"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-do-you-add-your-own-html-code-to-a-page-based-on-wordpress\/","title":{"rendered":"How do you add your own HTML code to a page based on WordPress?"},"content":{"rendered":"\n<div class=\"translation-block translation-block-merged\">\n<p class=\"wp-block-paragraph\">WordPress is one of the most popular content management systems (CMS), and its flexibility makes it possible to easily customise your website to suit your own needs. One of the most common requirements is adding your own HTML code. In this article, we will discuss various ways how to do this in WordPress.<\/p>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_86 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<div class=\"ez-toc-title-container\">\n<p class=\"ez-toc-title\" style=\"cursor:inherit\">Table of Contents<\/p>\n<span class=\"ez-toc-title-toggle\"><\/span><\/div>\n<nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-do-you-add-your-own-html-code-to-a-page-based-on-wordpress\/#Using_the_block_editor_Gutenberg\" >Using the block editor (Gutenberg)<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-do-you-add-your-own-html-code-to-a-page-based-on-wordpress\/#How_do_I_add_an_HTML_block_in_the_Gutenberg_editor\" >How do I add an HTML block in the Gutenberg editor?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-do-you-add-your-own-html-code-to-a-page-based-on-wordpress\/#HTML_code_preview\" >HTML code preview<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-do-you-add-your-own-html-code-to-a-page-based-on-wordpress\/#Adding_HTML_code_using_widgets\" >Adding HTML code using widgets<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-do-you-add-your-own-html-code-to-a-page-based-on-wordpress\/#How_do_I_add_an_HTML_widget\" >How do I add an HTML widget?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-do-you-add-your-own-html-code-to-a-page-based-on-wordpress\/#Adding_code_HTML_in_the_editor_classic\" >Adding code HTML in the editor classic<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-do-you-add-your-own-html-code-to-a-page-based-on-wordpress\/#How_do_I_do_that\" >How do I do that?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-do-you-add-your-own-html-code-to-a-page-based-on-wordpress\/#Adding_code_HTML_directly_to_files_theme\" >Adding code HTML directly to files theme<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-do-you-add-your-own-html-code-to-a-page-based-on-wordpress\/#How_to_edit_the_theme_files\" >How to edit the theme files?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-do-you-add-your-own-html-code-to-a-page-based-on-wordpress\/#Alternative_child_theme\" >Alternative: child theme<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-11\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-do-you-add-your-own-html-code-to-a-page-based-on-wordpress\/#Using_plugins_to_add_HTML_code\" >Using plugins to add HTML code<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-12\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-do-you-add-your-own-html-code-to-a-page-based-on-wordpress\/#The_best_plugins_for_adding_HTML_code\" >The best plugins for adding HTML code<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-13\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-do-you-add-your-own-html-code-to-a-page-based-on-wordpress\/#How_to_use_the_Insert_Headers_and_Footers_plug-in\" >How to use the Insert Headers and Footers plug-in?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-14\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-do-you-add-your-own-html-code-to-a-page-based-on-wordpress\/#Adding_HTML_code_using_shortcode\" >Adding HTML code using shortcode<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-15\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-do-you-add-your-own-html-code-to-a-page-based-on-wordpress\/#How_do_I_create_a_shortcode_with_my_own_HTML_code\" >How do I create a shortcode with my own HTML code?<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-16\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-do-you-add-your-own-html-code-to-a-page-based-on-wordpress\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_the_block_editor_Gutenberg\"><\/span>Using the block editor (Gutenberg)<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Since version 5.0, WordPress has been using a block editor called <strong>Gutenberg<\/strong> by default, which allows you to add HTML code directly to pages and posts.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_do_I_add_an_HTML_block_in_the_Gutenberg_editor\"><\/span>How do I add an HTML block in the Gutenberg editor?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to the page or post you want to edit .<\/li>\n\n\n\n<li>Click the icon &#8220;+&#8221; (add block) and search for a block with the name <strong>&#8220;HTML&#8221;<\/strong>.<\/li>\n\n\n\n<li>Select the <strong>&#8220;Custom HTML&#8221;<\/strong> block.<\/li>\n\n\n\n<li>Enter or paste your HTML code in the editing field.<\/li>\n<\/ol>\n\n\n\n<\/div>\n\n<div id=\"mybox-2764098951\" class=\"mybox-content mybox-entity-placement\"><div class=\"early-access-banner-inpost\">\r\n  <div class=\"banner-left-inpost\">\r\n    <div class=\"icon-box-inpost\">\r\n      <img decoding=\"async\" src=\"https:\/\/mybox.com\/help\/wp-content\/uploads\/2026\/02\/square-info-icon.svg\" alt=\"Info\">\r\n    <\/div>\r\n    <div class=\"text-box-inpost\">\r\n      <span class=\"label-inpost\"><span class=\"translation-block translation-block-banner-text\">Early access<\/span><\/span>\r\n      <h4><span class=\"translation-block translation-block-banner-text\">Still need help?<\/span><\/h4>\r\n      <p><span class=\"translation-block translation-block-banner-text\">Contact our customer service team.<\/span><\/p>\r\n    <\/div>\r\n  <\/div>\r\n\r\n  <div class=\"banner-right-inpost\">\r\n    <a href=\"https:\/\/panel.mybox.com\/helpdesk2\/v\/list\/\" class=\"banner-button-inpost\"><span class=\"translation-block translation-block-banner-text\">Message us<\/span><\/a>\r\n  <\/div>\r\n<\/div><\/div>\n\n<div class=\"translation-block translation-block-merged\"><p class=\"wp-block-paragraph\">This solution is ideal if you want to add simple HTML code such as buttons, iframes, forms, or other elements.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"HTML_code_preview\"><\/span>HTML code preview<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">After adding the HTML code, you can check how it looks on the page by clicking the <strong>&#8220;Preview&#8221;<\/strong> button. This allows you to ensure that everything is working as expected.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Adding_HTML_code_using_widgets\"><\/span>Adding HTML code using widgets<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Widgets are another way to add your own HTML code to WordPress. Widgets allow you to place content in various places on a16&gt; the site, such as the sidebar or footer.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_do_I_add_an_HTML_widget\"><\/span>How do I add an HTML widget?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <strong>Appearance > Widgets<\/strong> in the WordPress admin panel.<\/li>\n\n\n\n<li>Click <strong>the Add Widget<\/strong> button and select <strong>&#8220;Custom HTML&#8221;.<\/strong><\/li>\n\n\n\n<li>Type or paste your HTML code into the widget field.<\/li>\n\n\n\n<li>Click <strong>Save<\/strong>, to apply the changes.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">HTML widgets are a great solution if you want to add, for example, contact forms, CTA buttons, or other a14&gt; custom elements on the sidebar or in the footer.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Adding_code_HTML_in_the_editor_classic\"><\/span>Adding code HTML in the editor classic<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you are using an older version of WordPress or prefer the <strong>classic editor<\/strong>, you can also add HTML code directly into the content of your page or post.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_do_I_do_that\"><\/span>How do I do that?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the page or entry in the classic editor.<\/li>\n\n\n\n<li>Switch to the <strong>&#8220;Text&#8221;<\/strong> tab (next to the &#8220;Visual&#8221; tab).<\/li>\n\n\n\n<li>Paste your HTML code into the text editor.<\/li>\n\n\n\n<li>Save or publish changes.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">The classic editor is a simple tool that allows you to have a7&gt; full control over HTML code, but requires basic knowledge of HTML.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Adding_code_HTML_directly_to_files_theme\"><\/span>Adding code HTML directly to files theme<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you need more advanced control over adding HTML code, you can edit directly the files of the WordPress theme. <strong>NOTE<\/strong>: Editing files theme can be risky, especially if you do not have experience in programming. It is recommended to a30&gt; create a backup copy before making any changes.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_edit_the_theme_files\"><\/span>How to edit the theme files?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Go to <strong>Appearance > Theme file editor<\/strong> in the WordPress administration panel.<\/li>\n\n\n\n<li>Select the file, which you wish to edit, e.g.<code>header.php<\/code>, <code>footer.php<\/code> or <code>single.php<\/code>.<\/li>\n\n\n\n<li>Insert your HTML code in the appropriate place.<\/li>\n\n\n\n<li>Save your changes.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Alternative_child_theme\"><\/span>Alternative: child theme<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To avoid overwriting changes when updating the theme, it is advisable to use a <strong>child theme<\/strong>. Creating a child theme allows you to modify the appearance of the website without the risk of losing changes during updates.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Using_plugins_to_add_HTML_code\"><\/span>Using plugins to add HTML code<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">If you wish to regularly add custom HTML code, it is worth using dedicated plugins. Here are a few popular options:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"The_best_plugins_for_adding_HTML_code\"><\/span>The best plugins for adding HTML code<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/wordpress.org\/plugins\/wp-headers-and-footers\/\" target=\"_blank\" rel=\"noopener\"><strong>Insert Headers and Footers<\/strong><\/a> \u2013 allows you to add HTML code to the <code>&lt;head><\/code> section or before closing <code>&lt;body><\/code>.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/custom-html-block-extension\/\" target=\"_blank\" rel=\"noopener\"><strong>Custom HTML Block<\/strong><\/a> \u2013 allows you to add an HTML block in the Gutenberg editor.<\/li>\n\n\n\n<li><a href=\"https:\/\/wordpress.org\/plugins\/insert-headers-and-footers\/\" target=\"_blank\" rel=\"noopener\"><strong>WPCode \u2013 Insert Headers and Footers + Custom Code Snippets<\/strong><\/a> \u2013 a versatile plugin that allows you to add HTML, JavaScript, CSS, etc.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_to_use_the_Insert_Headers_and_Footers_plug-in\"><\/span>How to use the Insert Headers and Footers plug-in?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Install and activate the plugin.<\/li>\n\n\n\n<li>Go to <strong>Settings > Insert Headers and Footers<\/strong>.<\/li>\n\n\n\n<li>Paste the HTML code into the appropriate field (e.g. &#8220;Scripts in Header&#8221; or &#8220;Scripts in Footer&#8221;).<\/li>\n\n\n\n<li>Save your changes.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Plugins are a great solution for people who want to add custom code throughout their website without having to modify theme files.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Adding_HTML_code_using_shortcode\"><\/span>Adding HTML code using shortcode<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">WordPress also allows the creation <strong>of shortcodes<\/strong>, which can be used to add HTML code in various places on the page.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_do_I_create_a_shortcode_with_my_own_HTML_code\"><\/span>How do I create a shortcode with my own HTML code?<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Open the file <code>functions.php<\/code> of your theme or child theme.<\/li>\n\n\n\n<li>Add the following code:<br><code>function custom_html_shortcode() { return '<\/code>Your HTML code here&#8217;; } add_shortcode(&#8216;custom_html&#8217;, &#8216;custom_html_shortcode&#8217;);<\/li>\n\n\n\n<li>Save changes<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Now you can add the shortcode <code>[custom_html]<\/code> anywhere in your post or page to display the HTML code.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">There are several ways to add your own HTML code to a WordPress-based website. The method you choose depends on your needs and level of expertise:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>The block editor and widgets<\/strong> <strong>are ideal<\/strong> for a8> ideal for novice users.<\/li>\n\n\n\n<li><strong>Editor classic<\/strong> and <strong>shortcode<\/strong> give more control over the code.<\/li>\n\n\n\n<li><strong>Editing theme files<\/strong> and <strong>plugins<\/strong> are solutions for more advanced users who want to add code to the entire site.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">With these methods, you can easily customize your WordPress site and add unique elements that will a8&gt; add unique elements that will attract visitors and keep them coming back.<\/p>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[25,58],"manual_kb_tag":[],"class_list":["post-463","manual_kb","type-manual_kb","status-publish","format-standard","hentry","manualknowledgebasecat-hosting","manualknowledgebasecat-web-applications-cms"],"_links":{"self":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb"}],"about":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/types\/manual_kb"}],"author":[{"embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/users\/1"}],"version-history":[{"count":0,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/463\/revisions"}],"wp:attachment":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/media?parent=463"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manualknowledgebasecat?post=463"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb_tag?post=463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}