{"id":8064,"date":"2026-05-10T14:52:01","date_gmt":"2026-05-10T12:52:01","guid":{"rendered":"https:\/\/mybox.com\/help\/?post_type=manual_kb&#038;p=8064"},"modified":"2026-06-08T09:57:10","modified_gmt":"2026-06-08T07:57:10","slug":"how-to-add-custom-html-to-your-wordpress-site","status":"publish","type":"manual_kb","link":"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-custom-html-to-your-wordpress-site\/","title":{"rendered":"How to Add Custom HTML to Your WordPress Site"},"content":{"rendered":"\n<div class=\"translation-block translation-block-merged\">\n<p class=\"wp-block-paragraph\">Adding custom HTML code allows you to extend the functionality of your <strong>mybox-hosted<\/strong> WordPress site beyond the standard features. Whether you need to embed a third-party widget, add a tracking script, or create a unique layout element, there are several ways to do it safely.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/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-3'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-custom-html-to-your-wordpress-site\/#Method_1_Using_the_Block_Editor_Gutenberg\" >Method 1: Using the Block Editor (Gutenberg)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-custom-html-to-your-wordpress-site\/#Method_2_Using_WordPress_Widgets\" >Method 2: Using WordPress Widgets<\/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-to-add-custom-html-to-your-wordpress-site\/#Method_3_Adding_Code_to_the_Header_or_Footer\" >Method 3: Adding Code to the Header or Footer<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-custom-html-to-your-wordpress-site\/#Method_4_Editing_Theme_Files_Advanced\" >Method 4: Editing Theme Files (Advanced)<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-custom-html-to-your-wordpress-site\/#Method_5_Creating_a_Shortcode\" >Method 5: Creating a Shortcode<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-custom-html-to-your-wordpress-site\/#Security_and_Performance_Tips_for_mybox_Users\" >Security and Performance Tips for mybox Users<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/mybox.com\/help\/en\/knowledgebase\/how-to-add-custom-html-to-your-wordpress-site\/#Summary\" >Summary<\/a><\/li><\/ul><\/nav><\/div>\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_1_Using_the_Block_Editor_Gutenberg\"><\/span>Method 1: Using the Block Editor (Gutenberg)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The most common way to add HTML to a specific page or post is by using the built-in <strong>Custom HTML<\/strong> block. This is ideal for one-off elements like contact forms or embed scripts.<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Open the page or post you wish to edit.<\/li>\n\n\n\n<li>Click the <strong>(+) icon<\/strong> to add a new block.<\/li>\n\n\n\n<li>Search for <strong>&#8220;HTML&#8221;<\/strong> and select the <strong>Custom HTML<\/strong> block.<\/li>\n\n\n\n<li>Paste your code into the text area.<\/li>\n\n\n\n<li>Click the <strong>Preview<\/strong> button within the block to see how it renders before saving.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_2_Using_WordPress_Widgets\"><\/span>Method 2: Using WordPress Widgets<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<\/div>\n\n<div id=\"mybox-1039320788\" 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\">If you want the HTML code to appear in your sidebar, footer, or any other widget area, use the <strong>Custom HTML widget<\/strong>.<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Navigate to <strong>Appearance &gt; Widgets<\/strong>.<\/li>\n\n\n\n<li>Find the area where you want the code (e.g., <em>Footer Column 1<\/em>).<\/li>\n\n\n\n<li>Click the <strong>(+) icon<\/strong> and search for the <strong>Custom HTML<\/strong> widget.<\/li>\n\n\n\n<li>Paste your code and click <strong>Update<\/strong>.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_3_Adding_Code_to_the_Header_or_Footer\"><\/span>Method 3: Adding Code to the Header or Footer<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Many services (like Google Analytics or Facebook Pixel) require you to add code to the <code>&lt;head&gt;<\/code> or <code>&lt;footer&gt;<\/code> of every page. Instead of editing theme files directly, it is a mechanical necessity to use a plugin for this.<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">Recommended Plugin: WPCode (formerly Insert Headers and Footers)<\/h4>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Install and activate the <strong>WPCode<\/strong> plugin.<\/li>\n\n\n\n<li>Navigate to <strong>Code Snippets &gt; Header &amp; Footer<\/strong>.<\/li>\n\n\n\n<li>Paste your code into the <strong>Header<\/strong>, <strong>Body<\/strong>, or <strong>Footer<\/strong> boxes.<\/li>\n\n\n\n<li>Click <strong>Save Changes<\/strong>. <em>This method is safer because your code won&#8217;t be deleted when you update your theme.<\/em><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_4_Editing_Theme_Files_Advanced\"><\/span>Method 4: Editing Theme Files (Advanced)<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you need to make permanent changes to your site&#8217;s structure, you can edit the theme files via your <strong>mybox panel<\/strong>.<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Connect to your FTP account via an FTP client such as FileZilla.<\/li>\n\n\n\n<li>Navigate to <code>\/wp-content\/themes\/your-active-theme\/<\/code>.<\/li>\n\n\n\n<li>Locate files like <code>header.php<\/code> or <code>footer.php<\/code>.<\/li>\n\n\n\n<li><strong>Important:<\/strong> Always create a backup of the file before editing. Alternatively, use a <strong>Child Theme<\/strong> to prevent your changes from being overwritten during updates.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Method_5_Creating_a_Shortcode\"><\/span>Method 5: Creating a Shortcode<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">If you want to use the same piece of HTML code in multiple places, you can create a custom shortcode in your <code>functions.php<\/code> file.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">PHP<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>function my_custom_html_shortcode() {\n    return '&lt;div class=\"custom-box\"&gt;Your Custom HTML here&lt;\/div&gt;';\n}\nadd_shortcode('my_html', 'my_custom_html_shortcode');\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><em>After adding this, you can simply type <code>[my_html]<\/code> anywhere on your site to display your code.<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Security_and_Performance_Tips_for_mybox_Users\"><\/span>Security and Performance Tips for mybox Users<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Sanitize Your Code:<\/strong> Only paste code from trusted sources. Malicious HTML\/JavaScript can compromise your <strong>mybox-hosted<\/strong> account.<\/li>\n\n\n\n<li><strong>CSS and JS:<\/strong> If your HTML requires specific styling or functionality, it is better to place the CSS in <strong>Appearance &gt; Customize &gt; Additional CSS<\/strong> and use a plugin like WPCode for the JavaScript.<\/li>\n\n\n\n<li><strong>Check Responsiveness:<\/strong> Custom HTML doesn&#8217;t always automatically adapt to mobile screens. Always test your new code on a smartphone to ensure it doesn&#8217;t break the layout.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Summary\"><\/span>Summary<span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">From simple blocks for beginners to manual file editing for developers, WordPress offers multiple ways to integrate custom HTML. By choosing the method that fits your technical comfort level on your <strong>mybox-hosted<\/strong> site, you can personalize your website without limits.<\/p>\n<\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"template":"","format":"standard","manualknowledgebasecat":[58,60],"manual_kb_tag":[8590,8591,8592,8593,190,842,8586,8587,8588,8589],"class_list":["post-8064","manual_kb","type-manual_kb","status-publish","format-standard","hentry","manualknowledgebasecat-web-applications-cms","manualknowledgebasecat-wordpress-plugins","manual_kb_tag-sidebar-widget","manual_kb_tag-footer-widget","manual_kb_tag-header-and-footer","manual_kb_tag-insert-headers-and-footers","manual_kb_tag-wordpress","manual_kb_tag-gutenberg-editor","manual_kb_tag-custom-code","manual_kb_tag-custom-html","manual_kb_tag-custom-html-block","manual_kb_tag-wordpress-widgets"],"_links":{"self":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/8064","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":2,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/8064\/revisions"}],"predecessor-version":[{"id":8065,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb\/8064\/revisions\/8065"}],"wp:attachment":[{"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/media?parent=8064"}],"wp:term":[{"taxonomy":"manualknowledgebasecat","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manualknowledgebasecat?post=8064"},{"taxonomy":"manual_kb_tag","embeddable":true,"href":"https:\/\/mybox.com\/help\/en\/wp-json\/wp\/v2\/manual_kb_tag?post=8064"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}