More
    Home WordPress Plugins GUIDE ADD WORDPRESS CODE IN THE HEADER OR FOOTER OF THE 2020...

    GUIDE ADD WORDPRESS CODE IN THE HEADER OR FOOTER OF THE 2020 THEME -WAU

    0
    527

    Add code to WordPress

    It is more common than you imagine having to deal with scripts (codes) that allow you to add functionalities to WordPress, and that do not always come packaged in a brand new plugin of those of Install and Activate.

    Add code WordPress in theme header or footer, something that usually usually requires having to access the folders of the theme of your website and edit certain files to place those scripts and then you can complete other processes derived from it.

    In favor of plugins that allow you to add code in subject headers and footers, I will say that many users come from sectors that have nothing to do with WordPress programming or layout. Why do they have to fight with .php files if it’s not their focus?

    Read on and learn that adding WordPress scripts can be done with a plugin And also that they work!

     

    My dear partner #sysadmin Carlos, from Websites Are Us, asks me to remind you that you cannot edit certain WordPress core files or themes from the dashboard.

    Thus…

    You must keep in mind that since WordPress 4.9 it is not possible to edit files like header.php or footer.php from the dashboard, Appearance, Editor.

    But I better tell you the reason for this notice below …

    Script application cases in WordPress


    There are hundreds of situations that come to mind in which it is necessary to edit files of the active WordPress theme to add different types of codes and thus extend functionalities or connect with external services.

    I quote you some of the typical cases that justify having to edit files like header.php or footer.php to add scripts.

    At the end of what it is about is that you can add code provided by certain external services on your website without having to fight with code files of the theme or the WordPress core (I do not recommend modifying the latter, use other options) and above all if yours is not the code.

    The Insert Headers and Footers plugin


    Inserting code in headers and footers is something you can do with plugins like Insert Headers and Footers, developed by the boys of WPBeginner (I recommend you follow them on their website), which allows you to insert code without having to manually edit files of your theme in use.

    Insert Headers and Footers

    Click on the image to go to the plugin link

    Plugin Features:

    • It is very quick to install.
    • Add nested scripts in header or footer.
    • You can add header and / or footer code.
    • It allows you to insert any code or script, including HTML and Javascript.

    If for some reason you don’t need to use this plugin anymore, after having had it running for some time with some added script in the header or footer, the moment you disable or uninstall the plugin, the script will no longer be operational (the one you have inserted in the plugin) without the need to manually remove it from the theme file.

    Installation and use of the plugin


    You locate the plugin in the dashboard, Plugins, Add new, looking for it by name and clicking “Install” and “Activate”.

    Then go to Settings, Insert Headers and Footers and you will see the configuration and single use screen of the plugin where you can add codes like the one I put in the example.

    Script in header

    Once you insert the script for example in “Header” (Header) and save the changes in the plugin, if you go to the front page of your website and with the right mouse button you say “View the source code of the page” in a tab new browser you can see the source of the web and find the inserted script:

         

    You can do a Control + F and look for example the string function (c, h, i, m, p) to quickly detect it without leaving your tabs looking at code

    View source of the page

    This confirms that the added script, once the changes in the plugin have been saved, becomes operational and can be found in the source code of the page.

    What does PageSpeed ​​Insights think about this?


    Commenting with Carlos (remember, my dear colleague and sysadmin on Websites Are Us) he said to me “Are you sure it’s a good idea to put scripts in the footer or header?” referring for example to installations that use Autoptimize or Magic Cache, for that of possible loading problems or errors.

    To make it clear that Insert Headers and Footers It has an acceptable behavior once activated and added a script in header or footer, I show you tests carried out on it.

    The web on which I have made PoC with the plugin and various scripts for header.php and footer.php, before installing and activating “Insert Headers and Footers” and adding any scripts.

    PageSpeed ​​Insights before inserting the script

    I install the plugin and add a MailChimp domain validation script (discussed above) and check the subsequent loading of the web with PageSpeed ​​Insights to see what it says about it …

    PageSpeed ​​Insights after inserting the script

    Basically except for the minor change in the mobile version score that is less optimized, and with the script in “header” in both tests, the result for desktop remains at 95/100 reason why it does not represent a decrease in the loading speed or in the optimization that the MailChimp script has been inserted with the plugin Insert Headers and Footers.

    Obviously these tests will vary depending on other plugins you have installed, mainly caching and minification and the theme you use as well as the elements you load on the cover.

    Video on the use of Insert Headers and Footers


    I want to illustrate as a proof of concept, the case of activating a domain in MailChimp which in turn provides a script for validation control and data management between both sites (bridge) and how to add this script in a WordPress installation.

     

    It is a simple process to apply and with it you can validate services or add functionality quickly in WordPress.

    Conclusions


    You don’t need to have knowledge of PHP programming, or know how to manage certain global CSS styles that you want to add to your page, since with plugins like the one discussed in this article you can do it Without messing around!

    Never forget to make a backup copy of your website before digging into the core files of your theme, don’t mess around and have no one to turn to!

    Member of the Websites Are Us technical team.
    Coordinator of content on the Blog and YouTube.
    Technical support in CyberProtector. Teacher at Websites Are Us Learning.

    Leave a reply

    Please enter your comment!
    Please enter your name here