Vous a-t-on déjà demandé d’ajouter quelques extraits de code dans la section <header> ou <footer> de votre site WordPress ?
Souvent, on vous demande d’ajouter du code d’en-tête et de pied de page dans WordPress lorsque vous essayez d’intégrer des services web tels que Google Analytics, Google Search Console, Facebook Pixel, et plus encore.
Vous pouvez également rencontrer des tutoriels WordPress qui vous demanderont d’ajouter du CSS personnalisé ou du code JavaScript à votre en-tête ou pied de page WordPress.
Par défaut, WordPress ne propose pas d’option pour insérer du code dans l’en-tête et le pied de page de votre site. Heureusement, il existe une solution simple pour les débutants.
Dans cet article, nous allons vous afficher comment ajouter facilement du code d’en-tête et de pied de page dans WordPress. L’objectif est d’ajouter le code en toute sécurité sans modifier directement les fichiers de votre thème WordPress.
La meilleure façon d’ajouter le code de l’en-tête et du pied de page de WordPress
Si vous souhaitez ajouter le code de l’en-tête et du pied de page de WordPress, trois solutions sont possibles :
- Manuellement, en modifiant les fichiers header.php et footer.php de votre thème.
- Avec la fonctionnalité de code d’en-tête et de pied de page intégrée à votre thème.
- Utilisation d’une extension WordPress
La première option n’est pas adaptée aux débutants car elle requiert que vous ajoutiez le code de l’en-tête et du pied de page en modifiant directement les fichiers header.php et footer.php à la main.
Un autre inconvénient de l’utilisation de cette méthode est que votre code sera retiré si vous installez une mise à jour de votre thème.
La deuxième option consiste à utiliser la fonctionnalité intégrée de votre thème. Certains thèmes WordPress comme Elegant Themes et Genesis Framework de StudioPress offrent une option intégrée pour ajouter rapidement du code et des scripts à votre en-tête et pied de page WordPress.
Si vous utilisez un thème avec une fonctionnalité en avant, alors cela semble être une solution sûre et simple. Cependant, si vous modifiez votre thème, alors tous les extraits de code ajoutés à votre site disparaîtront. Cela inclut la vérification du site dans Google Search Console, l’analyse du site via Google Statistiques, etc.
C’est pourquoi nous recommandons toujours aux utilisateurs/utilisatrices d’utiliser la troisième option, une extension d’en-têtes et de pieds de page. Cette option est de loin la méthode la plus simple et la plus sûre pour ajouter du code d’en-tête et de pied de page dans WordPress.
Suite à de nombreuses demandes de la part des Lecteurs, notre équipe a développé l’extension WPCode.
WPCode (anciennement Insert Headers and Footers) est une extension d’extraits de code 100% gratuite. Vous pouvez l’utiliser pour ajouter facilement du code à l’en-tête et au pied de page dans WordPress.
Voici quelques avantages de l’utilisation de l’extension WPCode :
1. Facile, rapide et organisé: Il vous permet d’ajouter des codes à l’en-tête et au pied de page de votre site facilement et rapidement. De plus, il vous permet de stocker tous vos codes d’en-tête et de pied de page en un seul endroit.
2. Prévient les erreurs: La validation intelligente des extraits de code aide à prévenir les erreurs susceptibles de se produire si vous modifiez manuellement les fichiers de votre thème.
3. Passer à la version ou changer de thème sans souci: L’extension enregistrera le code de votre en-tête et de votre pied de page dans un endroit séparé, de sorte que vous pouvez mettre à jour ou modifier votre thème sans vous soucier de l’effacement du code.
Outre les scripts d’en-tête et de pied de page, vous pouvez également utiliser WPCode pour insérer facilement des extraits de code PHP, JavaScript, CSS, HTML et texte personnalisés sans modifier les fichiers de votre thème.
De plus, WPCode dispose d’une bibliothèque d’extraits intégrée où vous pouvez trouver tous les extraits de code WordPress les plus utiles. Cela vous permet de retirer rapidement les fonctionnalités de WordPress dont vous ne voulez pas comme les mises à jour automatiques, l’API REST, XML-RPC, les commentaires, et bien d’autres encore.
Note : Si vous souhaitez bénéficier de fonctionnalités avancées telles qu’une bibliothèque d’extraits dans le cloud privé, des pixels de conversion, des extraits planifiés, des révisions de code, et plus encore, vous pouvez mettre à niveau vers WPCode Pro.
Pour plus de détails, lisez notre guide sur la façon d’ajouter facilement du code personnalisé dans WordPress.
Ceci étant dit, voyons comment ajouter facilement du code d’en-tête et de pied de page dans WordPress à l’aide de l’extension WPCode.
Tutoriel vidéo
Si vous ne souhaitez pas regarder le tutoriel vidéo, vous pouvez continuer à lire la version texte ci-dessous :
Ajout de code dans l’en-tête et le pied de page de WordPress
La première chose à faire est d’installer et d’activer l’extension gratuite WPCode. Pour plus de détails, consultez notre guide étape par étape sur l’installation d’une extension WordPress.
Une fois l’extension activée, allez dans Extraits de code » En-tête et pied de page depuis votre panneau d’administration WordPress. Après cela, vous verrez une boîte » En-tête » où vous pouvez ajouter votre code.
Si vous défilez vers le bas, vous verrez également un « corps » et un « pied de page ».
Il vous suffit de coller le code dans l’une des trois cases. Une fois que vous avez terminé, n’oubliez pas de cliquer sur le bouton « Enregistrer les modifications » pour stocker vos réglages.
L’extension va maintenant charger automatiquement le code dans les Emplacements respectifs de votre site WordPress.
Vous pouvez toujours modifier et retirer tout code que vous ne souhaitez pas conserver.
L’extension doit être installée et activée en permanence. En désactivant l’extension, vous cesserez d’ajouter tout le code personnalisé à votre site.
Si vous désactivez accidentellement l’extension, le code sera toujours stocké en toute sécurité dans votre base de données WordPress. Vous pouvez simplement réinstaller ou réactiver l’extension, et le code recommencera à apparaître.
Note : Il se peut que vous deviez vider votre cache WordPress après avoir enregistré les modifications, afin que le code apparaisse correctement sur l’interface publique de votre site.
Nous avons trouvé que la raison principale pour laquelle beaucoup de débutants utilisent l’extension WPCode est d’ajouter Google Analytics à leur site. Pour cela, nous recommandons d’utiliser l’extension gratuite MonsterInsights.
MonsterInsights est la meilleure extension Google Analytics pour WordPress. Il vous aide à configurer correctement le suivi Google Statistiques en quelques clics, et il vous affiche des statistiques utiles directement dans votre tableau de bord WordPress.
Pour obtenir des instructions étape par étape, consultez ce tutoriel sur l ‘installation de Google Analytics dans WordPress.
Nous espérons que cet article vous a aidé à apprendre comment ajouter facilement le code de l’en-tête et du pied de page dans WordPress. Vous pouvez également consulter notre comparatif des meilleurs services de marketing e-mail et des meilleurs services de téléphonie d’entreprise.
Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.
Syed Balkhi says
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
Rattanak says
Adsense give me copy code in to my site (between head) , where I can put code into my site?? I use premium plan!
WPBeginner Support says
Hi Rattanak,
You cannot use Adsense on WordPress.com premium plan, you will need at least their business plan for that. Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
Administrateur
MADHUSUDAN says
Hi,
Your team member has tried to resolve my issue and they are on time .. but i just saw this place where we can leave a reply..
I am trying to add a meta tag to my front page as required by my affiliate programm company to get to promote their product. I used add header and footer plug in as suggested by your team member and after adding and saving changes I do not see the changes .. how would the site look after adding the meta tag by the way the meta tag is as below
OR the other option is to add a new page with their code which is .html . i tried to copy paste as but it remains as such. IS IT BECAUSE MY SITE IS PHP SUPPORT AND THE CODE IS HTML OR HOW?
Hope to recieve your advice and feedback.
WPBeginner Support says
Hi Madhusudan,
The meta tags are located in your website’s HTML code. They are added in the header section or at the end. Meta tags are not visible on your website and do not make any change to your website’s appearance. You can still view the meta tag by viewing the source or using the inspect tool.
Administrateur
Angela says
I have added the header/footer plug in. I added my facebook pixel code and hit saved. But how to I install this code to specific pages of my website so I can track certain conversions?
Jen says
I use this plug-in all the time with no issues. Today, I installed it and added my code needed into the correct area. Every page is showing the code except the home page. Any idea why every page would have the code except the home page?
John says
This post doesn’t teach what script to put in the footer though. What simple script can I use to get started? I just want a simple footer.
Sarthak says
I am having an issue her. It would be very helpful of you to resolve my issue.
I have to add the code of google adsense in the header of my website, but earlier i had added the instant article code in the header, now what shold i do to keep both of them?
(As i am the beginner, so i don’ know much about it. Help me please.)
George Beasley Jr says
I tried installing the « Insert Headers and Footers » into my website. When I go to « Settings/Insert Headers and Footers », I get this error: (Fatal error: Call to undefined function wp_unslash() in /home/afvetrep/public_html/wp-content/plugins/insert-headers-and-footers/ihaf.php on line 169)
What do I do?
WPBeginner Support says
Hey George,
wp_unslash() is a standard WordPress core function since WordPress 3.6. If you are using an older version of WordPress, then you need to update WordPress.
If you are using the latest version of WordPress and still seeing this error, then let us know and we will help you troubleshoot.
Administrateur
Frank says
Hi. I am inserting a MailChimp popup script into the footer and this breaks my WP main navigation menu. Any idea why or how to fix it ? I just upgraded to your latest plugin version but the problem persists. Thanks.
Frank says
Anyone have any idea why I have this problem ?
Thanks !
Riju says
Please help me
I can’t see any editor on appearance..
I need to put webmaster tool verify meta code in how can I edit the header?
Need help
Bamz says
Thank you very much. Please where can I paste Google AdSense code in this plugin, header or footer?
Riju says
Hi, I can’t see any
I’m trying to connect my WB with Adsense
Can i add Adsense ad code on WordPress after using mobile???
Please help
echenze says
Hi, can this still be used to insert the code that one is given for verification of a Google Adsense account?
WPBeginner Support says
Yes it can be used for that.
Administrateur
Samuel says
This is one of my best plugins and i use em frequently to add codes to the header and footer, but something happen after i update the plugins few hours ago, it gave an error [Fatal error: Can’t use function return value in write context in /home/campmmcg/public_html/wp-content/plugins/insert-headers-and-footers/ihaf.php on line 102]
Please resolve this
WPBeginner Support says
Hi Samuel,
This issue has been fixed in version 1.4.1, please update the plugin.
Administrateur
Meaghan Nutt says
This was really easy but it changed my header on the website and it is huge! It has pushed down my slider and my content for a huge white box. Help!
raunak says
hey thanks for this amazing plugin
but could it work if i paste google verification code on the header
massive says
Thank you for this greate article, my question can I use this plugin to insert ad codes like ad codes of affiliates programs?
Rizwan Amjad says
Hellow.. i am using this plugin, I have a question that can i use this plugin to insert multiple codes in this way..
Code 1
Code 2
Code 3
Simply Code 1 and then Enter Button and code 2 and enter button.
I want to insert codes likes google authorship, analytics, webmaster, etc.
WPBeginner Support says
Hey Rizwan,
Yes you can multiple code snippets on new lines by pressing enter button after pasting each snippet.
Administrateur
Isabella says
Hi, This is probably a silly question, but if I already installed a facebook script in the header and now want to install another one from Hotjar, I am deleting the prior Facebook script so it is not re- installed, correct? Sorry I am not well versed in code.
Thanks
WPBeginner Support says
Hi Isabella,
Yes it is ok to do that. If you are unsure, then you can just copy the old code and save it as a text file on your computer.
Paul says
Excellent video. Very clear and helpful. I am now subscribing to your channel.
dominion says
good day. without installing any wp theme,is there any way I can use my own theme. or template
gajendra says
Superb Plugin….
Vladimír says
This is grat plugin, I see it is more than one year without updates. Could you please update it?
Vladimir
Lauren says
Thanks so much for the video. I tried to figure this out through other websites, and with my own brain, but I was still unsure. Your video was short and sweet, and finally gave me the visuals I needed to get the job done. Thanks again!
WPBeginner Support says
You are welcome
Administrateur
nazanin says
hi ,
i want to add my logo from wp(dynamic logo)
where is this plugins >?
khalid says
hey amazing people, i installed and added FB instant article code but FB still says that the code is not in the website.
I have added it to head section part.
Suzanne Ball says
I get « 403 Forbidden
A potentially unsafe operation has been detected in your request to this site. »
when I insert the google script
Rene Hedges says
Thank you! Being very new to site building, and with no experience with working with coding, this was easy to follow!
WPBeginner Support says
Glad you found it helpful.
Administrateur
haris says
hi i am new in wp…….how to make database in wp and create table insertion etc….
Marcelo Guimaraes says
Hello! I am using Insert Headers and Footers to add the Google Analytics code to my WP site. Do I need to worry about each page on my site separately or am I covering the entire site simply by following the instructions on this video and adding the code to the Headers box (Insert Headers and Footers > Settings)?
WPBeginner Support says
You are covering the entire site.
Administrateur
Luciferbui says
Do you have html code or something, i need it to make my site faster
No more plugin
Thanks
Patrick Saad says
Hello !
This would be my first time using your plugin. I am hoping to render my web site more secure by adding these following scripts in the header :
X-Content-Type-Options: nosniff
X-Frame-Options: SAMEORIGIN
X-XSS-Protection: 1; mode=block
My questions are : Can I use your plugin to do this and if so do I make the header addition scripts one at a time or as I have typed them here.
Thanks for your help !
WPBeginner Support says
The more appropriate way to set HTTP headers in WordPress is by using the send_headers hook. Here is an example, it goes in functions.php file.
add_action( 'send_headers', 'add_header_xua' ); function add_header_xua() { header( 'X-UA-Compatible: IE=edge,chrome=1' ); }1-click Use in WordPress
Administrateur
Conrad Hall says
Hi,
I’m new to WPBeginner.com, and this is the first tutorial I have viewed. To be blunt, I’m stunned that a tutorial says « Here you see two text boxes where you can add your code. Simply copy and paste any meta information, scripts, Google Analytics, etc. and click “save settings”. This code will now be output to either your header or you footer. »
Regrettably, there are no links to information that helps a beginner understand how to get, or use, any of the code indicated. This renders the plugin useless to me.
My use for this plugin is to use it for connecting to pages such as privacy policy and publisher disclaimer. Is there a tutorial somewhere that shows this? if so, please link to it from this page.
WPBeginner Support says
If your theme has a navigation menu in the footer area, then please see our guide how to add navigation menu in WordPress.
Administrateur
Richard Bauer says
Can Headers be static menus that include text, graphics, and links to pages? Same for Footers.
is my site and is developed using FrontPage. We want to simply convert the entire site to Word Press as simple as possible. All links are to other site pages, site PDF and Word files, and a few external links. No Forms, No dynamic database, NO searches.
any help would be appreciated
marke says
Same result from inserting in wp_head Hook in Genesis Simple Hooks? Worked for me.
WPBeginner Staff says
Yes it is.
Mary says
There have been big changes in WP – Is this plugin still compatible?
Thanks
WPBeginner Staff says
It seems like your WordPress theme does not uses the standard wp_header and wp_footer functions. Please try switching temporarily to a default theme like twenty thirteen and see if the problem persists.
Mufidah Kassalias says
I’ve been using this plugin happily until the other day when we upgraded to the latest theme version (a major upgrade). The plugin broke our menu (it took quite a bit of investigation to narrow it down and be sure it was this plugin causing the conflict), so I’ve had to deactivate it. As you can imagine this is not a great solution, since our Google site verification, publisher info, analytics tracking and so on no longer exist in the head of our site. Do you have any suggestions regarding additional code I could include that would resolve the problem? Thank you.
WPBeginner Staff says
Are you sure its this plugin? We tested this and we were able to upload images just fine.
Andrea says
Hi there. I’ve noticed that I have to deactivate the plugin in order to see my images to insert them into a post. Is there way to fix this? I love the plugin otherwise!
Cha says
How long does it take before the code starts publishing data for Google Analytics?
Henrietta says
Hello there,
You have helped me so much with so many issues – best site ever! thanks!
Krista says
Hi there,
I am trying to update my one line of code in google analytics to get demographic info. I am sure I have pasted it correctly into the header(and footer, which I have always had there, but just read in a previous comment is unnecessary.) When I clcik the button in google analytics to validate code, it does not recognize the change. Have tried several times. Could you help me figure out how to solve this, please? Thanks!
WPBeginner Support says
You can try adding you analytics code in the header.
Administrateur
corlie says
Brilliant! super easy to use
Julie says
Can I use this plugin to add javascript code? Such as a redirection script?
Thanks!
WPBeginner Support says
you can add javascript code
Administrateur
Pedro says
Hi, I just installed your plugin, and I understand it allows to insert website-wide code in the header, do you have some version/recommendation for a plugin that works separately for each page in the site?
Thank you very much!
Bob says
I’m using Genesis and am looking for a footer which is much more plug and play such as a widget where typical footer fields can be entered by a business user (non-coder). Even the available widget-based footers I see in the marketplace only go as far as saying ok, here’s your space, now add a random widget with some code snippets (way beyond my skills).
If that magic doesn’t exist, can I just copy the footer code you are using on wpbeginner.com, edit the info and paste it into a Text widget into my Footer 1 position?
Editorial Staff says
Theoretically yes you can copy the code and paste it in the footer area. However it may cause some styling issues.
Administrateur
april whitlow says
If I am using this for google analytics, do i insert it into the header and footer or just the footer. sorry for the simple question. I am at the very beginning of learning.
Editorial Staff says
Header
Administrateur
Vince says
How do you add header scripts in just « one specific » page? This plugin is only applicable if you are adding a script for all the pages, but is not applicable if you will add it in a specific page.
Rya says
for “How do you add header scripts in just “one specific” page? This plugin is only applicable if you are adding a script for all the pages, but is not applicable if you will add it in a specific page.”
You can use php w/ the following info:
http://codex.wordpress.org/Conditional_Tags
in conjunction with your scripts.
Fayola says
I did this and I see that the script appears in the footer of my page. However, Google Analytics still says that the tracking is not installed. Please help!
Editorial Staff says
Are you using a caching plugin? If so, can you please empty your cache?
Administrateur
Stan Peters says
I get Notice: wp_register_style was called incorrectly. Scripts and styles should not be registered or enqueued until the wp_enqueue_scripts, admin_enqueue_scripts, or init hooks. Please see Debugging in WordPress for more information. (This message was added in version 3.3.) in C:\tools\xampp\htdocs\wpfrontier\wp-includes\functions.php on line 2758
when I use it to insert google font code in header
Editorial Staff says
This plugin is mainly created for analytics script, or meta information. This is not meant to be used for inserting jQuery or other design elements like those. The purpose was to allow users to easily add tags in their head or footer without editing theme files.
Administrateur
Ed says
I get the same problem. Is there a solution to this?
Mladen says
I have tried to add FB meta tags in header with this plugin, but it didn’t work. The idea is good, though.
Editorial Staff says
If you are trying to add dynamic PHP code in this plugin, then it would not work. This plugin does not execute PHP. It is mainly for inserting static meta tags.
Administrateur
Mladen says
Well, I don’t know if those tags are dynamic or static
I tried the standard Facebook tags such as this:
<meta property="og:url" content=" »/>
<meta property="og:title" content=" » />
<meta property="og:description" content="ID)); ?> » />
<meta property="og:image" content="ID ) ) ?> » />
Can you tell me if this plugin is good for this purpose? Thanks
Editorial Staff says
No it is not good for that. Because the URL, the Title, and Description all have the PHP tag which is dynamic.
Gautam Doddamani says
a great plugin but my custom theme already has this option! will bookmark this post in case i change my themes.
Editorial Staff says
Yeah it’s main purpose is to keep you from being theme dependent. Often people place their Analytics codes etc in their theme’s footer scripts area like this. Then they forgot about it when they switch themes. This causes them to lose analytics data for number of days.
Administrateur