How to Add a custom HTML block in WordPress

How to Use WordPress Custom HTML Block for Easy Code Integration

Hey everyone, Ghulam Mohiuddin here from MohiRDO!

Sometimes we need to add a little custom code to our website. Like yesterday I made a small AI tool named “Slowed and Reverb Generator”. I made it from HTML and I was very excited to put it on my site.

But the problem was that I did not want to use the plugin. You know, every plugin you install increases the load time a bit, slows down the website and also creates extra steps for the users. I wanted my tool to be simple and fast, without any extra hassle.

Discovering the Custom HTML Block

So then how did I add it without a plugin? I used a built-in option of WordPress called Custom HTML block. And believe me, it worked absolutely perfectly!

Then I realized that many bloggers and website owners might not know this trick. So I decided to write this article and show you how you can add your custom code, scripts or embeds directly on your site, that too in an easy way.

What is the Custom HTML Block?

Custom HTML block is basically a small box inside the WordPress editor where you can paste your HTML code. With this you can add unique elements, embed content from other websites, or add scripts directly on your posts or pages. This is perfect for those situations when you need more control than normal blocks.

How to Use the Custom HTML Block in WordPress

Now you must be wondering how to use it? It’s simple:

1. First of all open your WordPress post or page where you want to add the code.
2. Then click on the plus icon (+) to open the block library.
3. Type “HTML” in the search bar and you will find the “Custom HTML” block. Click on it and add it to your page.

As soon as the block is added, a box will open in which you can write or paste your code. If you want to see how the code will look, there is a “Preview” button inside the block itself. By clicking on it you can easily check it without leaving the editor. If everything looks fine, just press the “Update” or “Publish” button and your custom HTML will go live.

Simple, right?

When and Why to Use the Custom HTML Block

When and why should you use Custom HTML block? It is a simple thing, this block is used when you need to add such things in WordPress which are not normally built-in. I use it a lot on my affiliate and AdSense websites.

Common Uses of the Custom HTML Block

• Embedding Third-Party Content: The most common use is to embed third-party content. Like embedding Google Maps, adding social media follow buttons, pasting an email subscription form like Mailchimp, or adding YouTube videos and Spotify players.
• Adding Ads: The second use is for ads. Paste the AdSense ad code or any affiliate banner wherever you want. Very simple.
• Custom Design Elements: And the third use is for design. If you know a little HTML and CSS, you can create custom-styled buttons, call-to-action boxes, or unique layouts that make your site more attractive.

Just remember one tip: If you add too many widgets and external scripts, your site can slow down. I have made this mistake. That is why it is important to check the speed of your site every time you add new code.

Tips for Using Custom HTML Block Effectively

Now some small tips:

• Always use the preview option before publishing so that you can check whether the code is working properly or not.
• Only paste code from trusted sources, because unknown scripts can harm your site’s security.
• And most important, you don’t need to write the code yourself. Mostly services give you ready-made embed code, you just have to copy-paste.

FAQs About WordPress Custom HTML Block

Now talking about FAQs:

• Custom HTML vs. Code Block: Custom HTML block and Code block are different. Custom HTML block renders the code and shows the final output, like a map. Code block only shows the code in text form, which is useful for tutorials.
• Adding CSS: You can also add Custom CSS inside the Custom HTML block in the <style> tag. But if you want to change the styling of the whole site then the theme’s “Additional CSS” option is better.
• Cost: And yes, it is absolutely free. This is the default block of WordPress, no extra charge.

Start Customizing Your WordPress Site Today

So start customizing your site today. Taking small steps is the biggest secret to success. Don’t be afraid of hearing the word “code”. This Custom HTML block is a simple tool that opens up new possibilities for you.

Try This Challenge

A small challenge: open a test page now, copy the embed code of your choice, paste it and see how easy it is.

Final Thoughts

I hope this guide will be useful to you. If you have any questions or tips to share, please comment below. I am always ready to help.