This guide shows you how to add HTML tag to WordPress using the block editor, theme files, and plugins. Whether you’re customizing content or tweaking design, these simple steps help you embed HTML safely and effectively.
Key Takeaways
- Use the HTML block in Gutenberg: The easiest way to insert HTML directly into posts or pages without touching code files.
- Edit theme files for site-wide changes: Add HTML to headers, footers, or templates via Appearance > Theme File Editor (with caution).
- Leverage plugins for advanced control: Tools like Insert Headers and Footers let you add HTML globally without editing core files.
- Always back up before editing: Prevent crashes by backing up your site before making direct code changes.
- Test on a staging site first: Avoid breaking your live site by testing HTML changes in a safe environment.
- Use child themes for safety: When modifying theme files, always use a child theme to preserve changes during updates.
- Validate your HTML: Ensure your code is error-free to avoid layout issues or security risks.
How to Add HTML Tag to WordPress: A Complete Guide
If you’re working with WordPress, you might need to add custom HTML—whether it’s a tracking script, a special button, or a unique layout element. While WordPress is designed to be user-friendly, sometimes you need to go beyond the visual editor and insert raw HTML. This guide will walk you through how to add HTML tag to WordPress safely and effectively, no matter your skill level.
You’ll learn multiple methods: using the built-in block editor, editing theme files, and using plugins. We’ll also cover best practices to keep your site secure and functional. By the end, you’ll know exactly when and how to use HTML in WordPress without breaking your site.
Method 1: Using the HTML Block in the Gutenberg Editor
The easiest and safest way to add HTML to a specific post or page is by using the HTML block in WordPress’s default editor, Gutenberg.
Step 1: Open the Page or Post
Log in to your WordPress dashboard. Go to Posts > All Posts or Pages > All Pages, then click to edit the content where you want to add HTML.
Step 2: Add a New Block
Click the + button to add a new block. In the search bar, type “HTML” and select the Custom HTML block.
Step 3: Insert Your HTML Code
Paste or type your HTML directly into the block. For example:
<div class="highlight-box">
<p>This is a custom HTML message!</p>
</div>You can add buttons, iframes, forms, or even embedded videos this way. The block will render the HTML when the page loads.
Step 4: Preview and Publish
Click Preview to see how it looks. If everything looks good, hit Publish or Update.
Tip: This method is perfect for one-off HTML additions. It keeps your code isolated and doesn’t affect other parts of your site.
Method 2: Adding HTML to Theme Files
For site-wide HTML changes—like adding a banner to every page or inserting a script in the header—you may need to edit your theme files. This method requires more caution.
Step 1: Use a Child Theme
Before editing any theme file, always use a child theme. This protects your changes when the parent theme updates. If you haven’t set one up, learn how to create a WordPress theme with Elementor or use a plugin like Child Theme Configurator.
Step 2: Access Theme Files
Go to Appearance > Theme File Editor in your dashboard. From the right sidebar, select the file you want to edit—common choices include:
- header.php – for code that appears at the top of every page
- footer.php – for code at the bottom
- functions.php – for adding HTML via PHP hooks
Step 3: Insert Your HTML
Find the appropriate location in the file and add your HTML. For example, to add a notice bar below the header, insert this in header.php:
<div class="site-notice">
<p>Welcome! Free shipping on orders over $50.</p>
</div>Step 4: Save and Test
Click Update File, then visit your site to confirm the change. If something breaks, restore from backup or revert the file.
Warning: Editing theme files directly can break your site if done incorrectly. Always back up first.
Method 3: Using Plugins to Add HTML
Plugins offer a safer, more user-friendly way to insert HTML across your site—especially for scripts like Google Analytics or Facebook Pixel.
Recommended Plugin: Insert Headers and Footers
This free plugin lets you add HTML, CSS, or JavaScript to the header or footer without touching code.
Step 1: Install the Plugin
Go to Plugins > Add New. Search for “Insert Headers and Footers”, install it, and activate.
Step 2: Add Your HTML
Navigate to Settings > Insert Headers and Footers. You’ll see two boxes:
- Scripts in Header – adds code between
<head>tags - Scripts in Footer – adds code before
</body>
Paste your HTML or script into the appropriate box. For example:
<script>
console.log('Tracking script loaded!');
</script>Step 3: Save Changes
Click Save. The code will now appear on every page.
Bonus: This method is ideal for SEO scripts, chat widgets, or analytics codes. It’s also safer than editing theme files.
Method 4: Adding HTML via Widgets
You can also add HTML to widget areas like sidebars or footers using the Custom HTML widget.
Step 1: Go to Widgets
Navigate to Appearance > Widgets.
Step 2: Add the Custom HTML Widget
Drag the Custom HTML widget to your desired area (e.g., “Sidebar” or “Footer”).
Step 3: Insert Your Code
Add your HTML, such as a newsletter signup form:
<form action="#" method="post">
<input type="email" placeholder="Your email" required>
<button type="submit">Subscribe</button>
</form>Step 4: Save and View
Click Save, then check your site to see the widget in action.
Tip: This method is great for reusable content like social media links or promotional banners.
Best Practices When Adding HTML to WordPress
To keep your site secure and functional, follow these guidelines:
1. Always Back Up Your Site
Before making any code changes, use a plugin like UpdraftPlus to back up your site. This lets you restore it if something goes wrong.
2. Use a Staging Site for Testing
If your host offers a staging environment, test HTML changes there first. This prevents downtime on your live site.
3. Validate Your HTML
Use tools like the W3C Validator to check for syntax errors. Broken HTML can cause layout issues or security vulnerabilities.
4. Avoid Editing Core Files
Never modify WordPress core files. Always use child themes or plugins instead.
5. Keep Code Clean and Minimal
Only add necessary HTML. Bloated code can slow down your site and confuse future editors.
Troubleshooting Common Issues
HTML Not Displaying?
Check if you’re in the correct editor mode. In Gutenberg, make sure you’re using the Custom HTML block, not the visual editor.
Code Appears as Text?
This happens when HTML is escaped. Ensure you’re not pasting code into a text block. Use the HTML block or widget instead.
Site Breaks After Adding HTML?
Revert the change immediately. Restore from backup or use the Theme File Editor to undo edits. If using a plugin, deactivate it temporarily.
Scripts Not Loading?
Some scripts require specific placement (e.g., in the footer). Try moving the code or using a plugin like Insert Headers and Footers.
Conclusion
Adding HTML to WordPress doesn’t have to be scary. Whether you’re inserting a simple div tag or a complex tracking script, you now know how to add HTML tag to WordPress using safe, effective methods. Use the HTML block for quick edits, plugins for global scripts, and child themes for deeper customization.
Remember: always back up, test changes, and keep your code clean. With these tools and tips, you can enhance your site’s functionality without risking stability. For more advanced styling, check out our guide on the best way to add CSS in WordPress.