To make things simple, we have developed a WordPress plugin that is available for free from official WordPress plugins’ repository.
Step 1: Install the plugin
First, you need to install Add Custom Codes plugin on your wordpress website! Login to the WordPress dashboard and navigate to Plugins–> Add New and search for ‘Add Custom Codes’. You can now install the plugin below and activate it just like you do for other plugins.
Step 2: Start adding your codes
That’s it! Once you have installed the plugin, you can go to Appearance –> Add Custom Codes and you will see an interface to add your global codes. That means, if you add codes in this page, it will be available on all pages of the website. There will be 3 sections to add your codes.
Section 1: Custom CSS (Global)
Here is where you will add custom css codes that will apply to the entire website. If you check the screenshot below, you can see that it is pretty simple to add the code and it has a syntax highlighter feature to align codes better. By Default, the css codes you put here will be added before </head> section of the website. If you want it to be before the </body> section of the website, you can tick the option below. Please note that this section support css codes only.
Section 2: Global Header Codes
Step 3: Global Footer Codes
Bonus Feature: Add Custom Codes to Individual Pages or Posts
The plugin has an option to add custom codes to any individual page, post, category, product, or even custom post types! To do this, go to Edit a page or post, and scroll down to see the interface where you can add your custom codes. Pretty Simple!
This feature is really helpful as you can add custom codes that are meant to output only on specific page or post you are working on. You can also choose to hide global header and footer codes for that page.
That’s it! You have successfully learned how to add custom codes to your WordPress website. We hope this post helped you.