How to Start a Blog in 2024 (Beginner’s Guide) Click here
This page may contain compensated links. For more information read our disclaimer here.

How to Add or Insert Code in WordPress?

Photo of author

By Kermit Vaughn

Navigating through WordPress can be a journey of discovery, especially when it comes to customizing your site with specific codes.

Whether it’s for tracking, customization, or adding unique functionalities, knowing how to insert code into your WordPress site is an essential skill for any blogger or website owner.

In This guide, we aim to simplify this process, providing clear, step-by-step instructions on how to effectively add custom or tracking codes to your WordPress headers and footers, as well as how to embed HTML code in your WordPress posts and pages.

By mastering these techniques, you can enhance your site’s capabilities and tailor it to meet your specific needs.

Adding Custom or Tracking Code into WordPress Headers and Footers

The process of inserting custom or tracking codes into your WordPress site can be accomplished in two main ways: using a plugin or inserting the code manually.

Using a Plugin

For those who prefer a more user-friendly approach, utilizing a plugin is the ideal method. Plugins like ‘Insert Headers and Footers’ simplify the process greatly. Once installed, this plugin can be found in the ‘Settings’ of your WordPress admin dashboard.

It provides dedicated fields where you can paste your tracking or custom code. For header code, simply place it in the ‘Scripts in Header’ section, and for footer code, in the ‘Scripts in Footer’ section.

See also  How to Add a Reading Progress Bar to Your WordPress Posts

After pasting your code, remember to save your changes. This method is particularly useful for those who are not comfortable editing their site’s code directly.

Inserting Code Manually

If you prefer a more hands-on approach or wish to avoid using additional plugins, manually inserting the code is the way to go.

To add code to your site’s header, navigate to the ‘Appearance’ section and select ‘Editor’ or ‘Theme Editor.’ From there, locate the ‘Header’ file (header.php) and insert your code within the <head></head> tags.

To add code to the footer, follow a similar process but instead select the ‘Footer’ (footer.php) file and place your code before the closing </body> tag. This method offers more control but requires careful editing to avoid any site issues.

  1. Insert any type of custom or tracking code in the Header & Footer.
  2. Add HTML Code in WordPress Posts and Pages.

First Condition:

How to Insert Custom or Tracking Code into WordPress Headers and Footers?

You can add custom or tracking code into WordPress by two methods.

  1. You can add using the plugin.
  2. Insert Manually in WordPress.

First Method:

How to Insert Custom or Tracking Code in WordPress Headers and Footers using Plugin?

Step 1: Go to your WordPress admin dashboard. Install the WordPress Plugin name Insert Headers and Footers Plugin.

Insert Headers and Footers
Insert Headers and Footers

Step 2: You will find the Insert Headers and Footers in Settings in WordPress Admin Dashboard.

Insert Headers and Footer in Settings
Insert Headers and Footer in Settings

Step 3: If you want to paste the tracking or custom code into the Header of WordPress then put the code into Scripts in Header. This will add your code to the head section of your website.

After entering the code, Save this Code.

Scripts in Header
Scripts in Header

If you want to paste the code into the footer of your WordPress website. Paste your tracking or custom code into Scripts in the Footer. Save the code.

Scripts in Footer
Scripts in Footer

This is the first method for putting the code into WordPress Headers and Footers.

See also  7 Best WordPress Email Newsletter Subscription Plugins for List Building

Second Method:

How to Insert Custom or Tracking Code in WordPress Headers and Footers without Plugin?

If you want to put your code into the Headers section of the WordPress website without a plugin then follow this guide.

Step 1: Go to the Appearance section and Click Editor or Theme Editor.

Appearance
Appearance

Step 2: On the right side, you will see Theme Files. Open the Header file which is in the form of a header.php file.

Header file
Header file

So put your code into the head section between <head></head> tags. After entering your code, save your header.php file.

So your custom or tracking code will be successfully inserted.

If you want to put your custom or tracking code into the WordPress Footer then follow this guide.

Step 1: Go to Appearance, and Open Theme Editor.

Step 2: In Theme Files, Open Footer ( footer.php) file.

 Footer File
Footer File

Step 3: Put your code before the </body> tag in the footer.php file. Your code will be successfully added. Save the header.php file.

body tag
body tag

This is a method that will help you insert your custom or tracking code into WordPress Headers and Footers manually.

Note: If you want to put your code after the <body> tag then the <body> tag will be found in the header.php file.

Second Condition:

How to Add HTML Code in WordPress Posts & Pages?

Case 1:

If you want to insert HTML code into WordPress Posts & Pages then follow this guide. This will remain the same for posts and pages.

Step 1: If you are using Gutenberg editor then you will see a + ( Plus ) sign in the upper side. Click on the Plus sign.

Plus Sign
Plus Sign

Step 2: After clicking on the plus sign, you will see many options like

  • Most Used
  • Inline Elements
  • Common Blocks
  • Formatting
  • Layout Elements
  • Widgets
  • Embeds
  • Yoast Structured Data blocks
See also  How to Install WordPress Plugins in 2024

Click on Formatting to add the code. In Formatting, you will see Custom HTML. Click on Custom HTML.

Formatting
Formatting

When you click on Custom HTML you will see an HTML Box like this. Paste your HTML Code into HTML.

Example: We put a code into HTML.

<h5>This is our first headings</h5>

In Preview, it will show the result like this.

HTML Preview
HTML Preview

This will successfully add your HTML Code to WordPress posts and pages like this in Gutenberg.

Case 2:

If you are using Classic Editor and want to paste the HTML Code then follow this guide.

Step 1: Go to Classic Editor and You will see two options.

  1. Visual Editor
  2. HTML Editor

Choose HTML Editor. Paste your HTML Code. Paste your code between paragraph tags.

HTML Editor
HTML Editor

After pasting the code, move on to Visual Editor. It will show your HTML result like this.

So you can insert your HTML Code into Classic Editor like this. So this is the complete guide about How to Add Code into WordPress Posts & Pages.

Conclusion: Flexibility and Ease with WordPress Code Insertion

Whether you choose to use a plugin or insert code manually, WordPress offers flexibility and ease in customizing your site to your exact specifications.

Both methods are effective and cater to different comfort levels with website editing.

By following these steps, you can successfully add custom or HTML code to your WordPress headers, footers, posts, and pages, enhancing your site’s functionality and personalizing it to better reflect your vision.

We love to hear from you about which method you want to use. Please let us know in the comment section.