So when it comes down to injecting JavaScript in your WordPress website, whether it be for adsense or amazon native shopping ads etc., we must divide up the area that we can work with according to the tools that we have. For example, we have widgets that take care of what we can inject into the sidebar and footer of our website- depending on the WordPress theme that you choose. Additionally, we need to be able to inject ads in special places that widgets can’t; like above the Title of our webpage, and inside our webpage. A special plugin, Header And Footer, takes care of these requirements.
Table of Contents
How do I use Widgets for Injecting the JavaScript Ad?
Step 1: Once you are logged into your WordPress website, hover the mouse cursor over the first tab from the webmaster’s nav bar. A drop-down menu will appear, select the widgets option.
Step 2: Scroll down the available Widgets and look for a widget called Text. Left click the widget, and drop-down menu will give you the option of where you would like to add the widget. Once you select the desired option, click the Add Widget button.
Step 3: Open the Text widget you made and paste in the Adsense ad code or any other JavaScript code. Then select the save button to save the change.
How do I Inject JavaScript at the end of a Webpage?
Step 1: First install the Header And Footer plugin onto your WordPress website. Once installed, go to your Dashboard > Settings > Header and Footer.
Step 2: Flip to the Posts tab and paste in the JavaScript where it says After The Post Content.
How do I Inject JavaScript above the Title of a Webpage?
Step 1: Go to one of your website’s webpages. Right click anywhere on your website or the area where you want your JavaScript ad to be injected, and select the Inspect Element option.
Step 2: A lot of html will pop up. If the Inspect Element is a separate window, select one window + Left Arrow Key & select the other window + Right Arrow Key. That way you can look at which parts of your website are highlighted while you hover your mouse cursor over the lines of html. This way you can see which html corresponds with which elements of your website.
Step 3: Select a div of where you want your ad to appear before. Copy that code, and go to your Header and Footer plugin settings. Select the Generics tab, and paste the div html code into one of the input fields, like Generic Injection 1. Then in the input field beneath, paste in the JavaScript code that you want injected.
If you have any questions, feel free to ask!
