How do you add your own HTML code to a page based on WordPress?

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.

Using the block editor (Gutenberg)

Since version 5.0, WordPress has been using a block editor called Gutenberg by default, which allows you to add HTML code directly to pages and posts.

How do I add an HTML block in the Gutenberg editor?

1. Go to the page or post you want to edit .
2. Click the icon “+” (add block) and search for a block with the name “HTML”.
3. Select the “Custom HTML” block.
4. Enter or paste your HTML code in the editing field.

This solution is ideal if you want to add simple HTML code such as buttons, iframes, forms, or other elements.

HTML code preview

After adding the HTML code, you can check how it looks on the page by clicking the “Preview” button. This allows you to ensure that everything is working as expected.

Adding HTML code using widgets

Widgets are another way to add your own HTML code to WordPress. Widgets allow you to place content in various places on a16> the site, such as the sidebar or footer.

How do I add an HTML widget?

1. Go to Appearance > Widgets in the WordPress admin panel.
2. Click the Add Widget button and select “Custom HTML”.
3. Type or paste your HTML code into the widget field.
4. Click Save, to apply the changes.

HTML widgets are a great solution if you want to add, for example, contact forms, CTA buttons, or other a14> custom elements on the sidebar or in the footer.

Adding code HTML in the editor classic

If you are using an older version of WordPress or prefer the classic editor, you can also add HTML code directly into the content of your page or post.

How do I do that?

1. Open the page or entry in the classic editor.
2. Switch to the “Text” tab (next to the “Visual” tab).
3. Paste your HTML code into the text editor.
4. Save or publish changes.

The classic editor is a simple tool that allows you to have a7> full control over HTML code, but requires basic knowledge of HTML.

Adding code HTML directly to files theme

If you need more advanced control over adding HTML code, you can edit directly the files of the WordPress theme. NOTE: Editing files theme can be risky, especially if you do not have experience in programming. It is recommended to a30> create a backup copy before making any changes.

How to edit the theme files?

1. Go to Appearance > Theme file editor in the WordPress administration panel.
2. Select the file, which you wish to edit, e.g.header.php, footer.php or single.php.
3. Insert your HTML code in the appropriate place.
4. Save your changes.

Alternative: child theme

To avoid overwriting changes when updating the theme, it is advisable to use a child theme. Creating a child theme allows you to modify the appearance of the website without the risk of losing changes during updates.

Using plugins to add HTML code

If you wish to regularly add custom HTML code, it is worth using dedicated plugins. Here are a few popular options:

The best plugins for adding HTML code

• Insert Headers and Footers – allows you to add HTML code to the <head> section or before closing <body>.
• Custom HTML Block – allows you to add an HTML block in the Gutenberg editor.
• WPCode – Insert Headers and Footers + Custom Code Snippets – a versatile plugin that allows you to add HTML, JavaScript, CSS, etc.

How to use the Insert Headers and Footers plug-in?

1. Install and activate the plugin.
2. Go to Settings > Insert Headers and Footers.
3. Paste the HTML code into the appropriate field (e.g. “Scripts in Header” or “Scripts in Footer”).
4. Save your changes.

Plugins are a great solution for people who want to add custom code throughout their website without having to modify theme files.

Adding HTML code using shortcode

WordPress also allows the creation of shortcodes, which can be used to add HTML code in various places on the page.

How do I create a shortcode with my own HTML code?

1. Open the file functions.php of your theme or child theme.
2. Add the following code:
   function custom_html_shortcode() { return 'Your HTML code here’; } add_shortcode(‘custom_html’, ‘custom_html_shortcode’);
3. Save changes

Now you can add the shortcode [custom_html] anywhere in your post or page to display the HTML code.

Summary

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:

• The block editor and widgets are ideal for a8> ideal for novice users.
• Editor classic and shortcode give more control over the code.
• Editing theme files and plugins are solutions for more advanced users who want to add code to the entire site.

With these methods, you can easily customize your WordPress site and add unique elements that will a8> add unique elements that will attract visitors and keep them coming back.