How to Add HTML to WordPress Pages, Sidebars and Footers

Can you add HTML to WordPress? Yes, and you rarely need a developer for it. This guide shows where to add HTML to WordPress for an ElectricBlaze widget: inside one post, in a sidebar, across the whole site, or through Elementor.

Self-hosted site or WordPress.com?

Whether a snippet runs depends on who hosts the installation.

  • Self-hosted WordPress.org (your own hosting, Hostinger, SiteGround and similar). Administrators hold the unfiltered_html capability, so script tags survive when the post is saved. Authors and Contributors lack it: their markup gets sanitised and the script disappears. On Multisite networks only Super Admins keep raw scripts by default.
  • WordPress.com. The free plan filters out script and iframe. A paid plan works once hosting features are activated, which happens the first time you install a plugin or upload a theme.

Why paste a snippet instead of adding one more plugin? A hosted widget lives on ElectricBlaze servers, so there is nothing new to update in the dashboard, no extra database tables and no risk of clashing with your caching or security plugins. Plugins are a fine choice too; the snippet just keeps the stack smaller.

Paste the snippet into a Custom HTML block

In the ElectricBlaze editor press Add to website and copy the code. It is two lines: a script tag and an empty div.

  1. In the dashboard open Pages or Posts and edit the entry that should display the widget.

  2. Click the Block Inserter (+) and search for Custom HTML, or type /html in an empty paragraph and press Enter.

  3. Press Edit HTML, paste the full snippet into the HTML pane (leave the separate CSS and JavaScript panels empty) and click Update in the dialog.

  4. Save the post with Update or Publish, then open the public URL to see the widget running.

Since WordPress 7.0 the block opens a code dialog with its own preview. Older releases show an HTML/Preview toggle instead; the paste works the same way.

Other places to insert HTML into WordPress

Elementor pages

People often ask how to add HTML code to WordPress Elementor layouts. Drag the HTML widget (it ships with free Elementor) into a column, paste the snippet into its Code field and update the page. Elementor Pro adds a site-wide Custom Code screen with a Body End location, the neat option for chat buttons.

Sidebar and footer areas in classic themes

Go to Appearance → Widgets, add a Custom HTML widget to the sidebar or footer area and paste the code. Anything placed there repeats on every page that uses the area, which answers the question of how to add HTML code to WordPress website templates without editing PHP.

Block themes and the Site Editor

Twenty Twenty-Four and other block themes drop the Widgets screen. Open Appearance → Editor, edit the Footer template part and insert a Custom HTML block there.

Header and footer code plugins

If WPCode (formerly Insert Headers and Footers) or a similar tool is already installed, paste the snippet into its footer box. This is the cleanest way to load a floating Popup Chat or a sticky music bar everywhere at once.

Rule of thumb: feeds go into a block where they should appear; floating widgets go into site-wide footer code.

Snippet not showing on the live page?

  • The block is empty after saving. Your role cannot post scripts. Ask an Administrator to paste it, or on WordPress.com activate a paid plan’s hosting features.
  • Visible when logged in, missing for visitors. A caching or optimisation plugin served an old copy. Purge the cache; if the plugin delays JavaScript, exclude s.electricblaze.com.
  • Squeezed into a narrow strip. The theme content width is small. Use a full-width page template or a wide/full alignment group around the block.
  • Chat bubble appears on one page only. It was placed in a single post. Move it to footer code.

New posts and edited settings reach your pages on their own; edit the post only to move or delete the block.

Widget guides for WordPress

Each guide walks through one widget: which layout suits a typical theme and where its code should go.

Custom HTML in WordPress: answers

Can I use HTML in WordPress without a plugin?

Yes. The Custom HTML block is part of core, and classic themes also offer a Custom HTML widget. No plugin is required to embed a feed of Instagram posts.

How to add HTML tag to WordPress site header?

Core has no header box. Use a code plugin with a header field, the Custom Code screen in Elementor Pro, or a child theme. ElectricBlaze widgets work from the footer.

How do I add custom HTML to WordPress page sections built with Gutenberg groups?

Select the group or columns block, open its inserter and choose Custom HTML. The widget takes that group’s width.

How to embed iframe code in WordPress?

Paste the iframe into a Custom HTML block. On WordPress.com this needs a paid plan with hosting features. ElectricBlaze snippets use a script rather than an iframe.

Build a widget for your WordPress site

Create it for free, copy two lines of code and add custom HTML to WordPress page layouts in a minute.

Create a widget