Chez WPBeginner, nous écrivons de nombreux tutoriels qui nécessitent d’insérer du code dans les sections <header> ou <footer> de votre site WordPress. Cela peut sembler être une tâche décourageante, d’autant plus que WordPress ne fournit pas d’option intégrée pour ajouter des extraits de code dans l’en-tête et le pied de page.
Mais, l’ajout de code d’en-tête et de pied de page dans WordPress est nécessaire lorsqu’on essaie 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 demandent d’ajouter du CSS personnalisé ou du code JavaScript à votre en-tête ou pied de page WordPress.
Heureusement, il existe une solution simple pour les débutants. Avec l’extension gratuite WPCode, vous pouvez ajouter le code en toute sécurité sans modifier directement les fichiers de votre thème WordPress.
Dans cet article, nous allons vous afficher comment ajouter facilement le code de l’en-tête et du pied de page dans 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 du code à 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 du code d’en-tête et de pied de page sur WordPress. Vous pouvez également consulter notre guide sur la façon d’afficher du code sur votre site WordPress ou nos choix d’experts sur les meilleurs outils de développement WordPress.
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.
Jiří Vaněk
I’ve been using the WpCode plugin for several years and it’s really great. Especially for newbies who are afraid to insert codes into the website. This plugin is almost a must on every website. It can really save a lot of work and here on wpbeginner there are a lot of ready-made solutions.
Pierre-Yves
Hello
I’ve installed the WPCode plugin and I’ve inserted code in the header field in the « Global Header and Footer » tab. This code shows a popup.
The website is multisite and WPCode is activated on all the network.
The popup shows well in the home page of my website, but not on other pages where people can land after searching in Google.
What I’ve to do to get the popup showing on any page ?
Thanks
WPBeginner Support
Just to be certain, does your theme have a style for your other pages that uses a different header or removes the header?
Administrateur
Viney Bhatia
Is there any way to hide the header or footer code for some posts/pages?
WPBeginner Support
Not at the moment with the plugin.
Administrateur
Aamir Nadeem
How many codes we can add in single header or footer section, I mean can i use two or three codes in single header section like facebook code google code etc.
WPBeginner Support
As long as the code is added properly and you’re not placing code within other blocks of code you can add as many as you would like.
Administrateur
FRANK Pirrone
Hello, I added the code and clicked save. Nothing happened. Is there a publish button I need to press?
WPBeginner Support
It would depend on the code you added as not all code has a visible component, you may also want to try clearing any caching on your site for another common reason for not seeing any change on a site.
Administrateur
Jamie Turner
Hi — Quick question. I’ve installed the plugin. Is there a way to select which pages the header and footer show up on? All I see is a global install without the ability to select pages. Thanks!
WPBeginner Support
At the moment the plugin is for adding code to your site’s header and not showing/hiding your header. Your theme’s templates would decide where your header and footer show on your site.
Administrateur
Pierre Patenaude
I have installed the plugin (and it shows as being activated in the plugin list) but it doesn’t show up in the « Settings » menu. Did I miss a step? Could you provide a solution?
Thanks
WPBeginner Support
No, the option should be available once the plugin is active as long as you have access to edit the site’s settings, you would want to ensure you are an admin on the site and if it is still not visible you would want to try disabling your other plugins to see if it is possibly a conflict with one of those plugins.
Administrateur
Ashleigh White
Hi! I have a question! I am trying to add the global site tag and phone snippet to my code on each page so I can track my google ad calls. I have the « Headers and Footers » plugin, can I just paste it here and I am good? Or does it matter where I post it (Header vs. Body. Footer)? Thanks so much!
WPBeginner Support
For ad code, it is recommended to place the code in the header, you can see more about that in our article below:
https://www.wpbeginner.com/beginners-guide/how-to-add-google-adsense-to-your-wordpress-site/
Administrateur
Deborah Dakota
So close to being what’s needed! But Google strongly recommends using different metadata for every page. « Identical or similar descriptions on every page of a site aren’t helpful when individual pages appear in the web results. In these cases we’re less likely to display the boilerplate text. Wherever possible, create descriptions that accurately describe the specific page. » Please consider updating your plugin accordingly.
WPBeginner Support
Our plugin is not for metadata, it is mainly for code to add things like Google Analytics tracking or for verification codes. If you want a plugin for adding metadata to individual posts, we would recommend taking a look at All in One SEO as that will give you far better control over your metadata
Administrateur
Robert Zou
I have a question. How do you remove code that you added using the insert headers and footers plugin? When I open up the theme editor I can’t find the code I added using this plugin.
WPBeginner Support
Code added using the plugin would be removed when removed from the plugin’s settings or the plugin is uninstalled.
Administrateur
James
Hello, hey I added the plugin above to my site and added the code to the header section. Then I tested with your site and it said it was saved successfully.
But I don’t see the bot when I go to the live site. Could u tell me what I’m doing worng? Tnx.
WPBeginner Support
It would depend on the specific code you are adding, we would recommend checking with the support for the code for if you added it correctly as not all code is made to have something visible.
Administrateur
Emmanuel
I wanted to change the color of my address bar using this plugin but each time I paste it gives me an error message
Is my code okay?
WPBeginner Support
It would depend on the specific code and where the code is intended to be added. You would want to reach out to who you received the code from for where it should be placed.
Administrateur
Elizabeth
I bought a theme but it does not let me add any button action in the header nor in the menu, do you think this plugin could help me???
WPBeginner Support
This plugin is for adding code such as scripts into the header, not for adding buttons. For an easy way to customize your design, you would want to take a look at page builders like the ones in our article below:
https://www.wpbeginner.com/beginners-guide/best-drag-and-drop-page-builders-for-wordpress/
Administrateur
Ahmed
How can add the code in the header as high as possible? I need to put Code first of few lines in the header. How can I control the position of the code?
Thanks
WPBeginner Support
If you need a very specific location for the code, you would want to manually add the code to your files.
Administrateur
William
USELESS for a theme that does not have headers in the first place, like wordpress 2021. Useless.
It was implied that this plugin would do that. It. Does. Not. ALL it does in insert a GIANT version of the picture you choose ABOVE your menu and site name.
WPBeginner Support
The 2021 theme does have a header but, the Insert Headers and Footers plugin is for inserting code such as Google Analytics, not for adding photos to the header of your website. We would not recommend using this plugin for adding a header image as that would cause the errors you are running into.
Administrateur
Muhammad Shoaib
Hey There,
I have already installed « Insert Footer and Header plugin », if I wanna to remove from site then the inserted code would also be removed from header section or still saved without plugin?
Kindly light me.
WPBeginner Support
If you remove the plugin, the added code should be removed as well.
Administrateur
Kirsten
I’m being told by Google Analytics to add a Global Site Tag code immediately after the tag. Does this plugin do that? Otherwise, I have no idea how to add this code to *every* page on my site!
WPBeginner Support
Yes, the plugin will add it to all of your pages with a header.
Administrateur
Lisa Masquelier
Thank you SO much for these simple instructions and the plug-in. I could not figure out why my website kept deleting from Pinterest!
WPBeginner Support
Glad our guide was helpful!
Administrateur
Kamlesh
The Header and Footer in each blog post will be different? Is the Plugin for each Post?
WPBeginner Support
Code added using the plugin will be on every post and page and not individual codes for individual posts and pages.
Administrateur
Denise
If I need to add code before the closing tag, which box do I put the code into?
WPBeginner Support
You would place that code into the footer section
Administrateur
Redentor mariano
Thank you for some plug in that you shared.
I gonna try it into my site.
WPBeginner Support
We hope our plugin helps you add code to your header
Administrateur
Ana
Thank you! Very helpful!
WPBeginner Support
You’re welcome
Administrateur
Trang
Hey,
I can’t find the « Insert Headers » section below my post’s editor? So how can I enable that function allowing me insert different code for specific post?
WPBeginner Support
Our plugin is for the entire site at this time and not individual posts or pages.
Administrateur
Emory
How do I install different code for each page type instead of putting all the code in every page?
WPBeginner Support
You would need to manually add that if we’re understanding what you’re wanting.
Administrateur
Ali
Is « Insert Headers and Footers » plugin compatible with WordPress version 5.5.1?
WPBeginner Support
Yes, we will look into updating the tested with version as soon as we are able
Administrateur
Brian Small
I am getting the following error when hitting SAVE from this plug-in:
A potentially unsafe operation has been detected in your request to this site
WPBeginner Support
You would want to check if you have any security plugins active on your site or if your host has one set up. You may also want to ensure you copied the code you are attempting to add correctly.
Administrateur
DAVE
On your demonstration you didn’t have anything come up on the top.
This is the instructions from the code generator I am using;
Paste the copied code into bottom of your HTML page just before the closing tag
I tested the code and it does not work, « Am I doing something different? «
WPBeginner Support
We would first recommend reaching out to the support of what has generated the code to ensure there isn’t anything specific about the code that needs to be set on your page for it to work correctly.
Administrateur
DAVE
Yes thank you, good idea.
James
Hello. I need to edit the header code on a specific set of pages only. I have currently added the script I need to the header.php file, however this applies the code to all pages globally.
Is there any way I can add the script to a specific set of pages only?
WPBeginner Support
Unless I hear otherwise, we do not have a recommended method for page specific code at this time.
Administrateur
Susan
Thank you so much!!!
This stuff scares me as I think I am going to doom my website forever!!
So easily explained will definitely be subscribing.
I need to work on this every day.
WPBeginner Support
Glad our guides have been helpful
Administrateur
Marc
If my theme does not allow custom header images, will this plugin allow me to make custom header images. Lost on how to do this. We have an old theme with custom header function
WPBeginner Support
This plugin is not for that at the moment. For customizing the design of your theme you may want to look into page builder plugins like the ones in our article below:
https://www.wpbeginner.com/beginners-guide/best-drag-and-drop-page-builders-for-wordpress/
Administrateur
Mark
Would i be able to use a relative path? so I can move the site to a different host without changing header? if so where is the origin?
i tried to include some some examples but sucuri blocked the post as malicious. i guess it doesn’t like seeing paths.
WPBeginner Support
It would depend on the code but you should be able to user relative paths if you wanted.
Administrateur
Alexandra
Yaaaaaaay! I am so excited. I was having so much trouble getting my Mailchimp pop-up to work, but this plugin did the job easy-peasy!
WPBeginner Support
Glad our recommendation could help
Administrateur
Steve
Hi, I have installed the Headers and Footers plugin and added code for the footer. The text that I want displayed is at the very bottom, below the Bento copyright line. Is there a way to have my footer appear at the top of the footer display? Thanks
WPBeginner Support
For footer customizations, you would want to reach out to your theme’s support to see if they have any recommended options you can use.
Administrateur
Subrat
I have already put Google analytics code in the header section using insert header and footer plugin how can I add adsense code there again?
WPBeginner Support
You would add the new code below the analytics code
Administrateur
rooch
How about using the functions.php file in child theme to add header and footer snippets
WPBeginner Support
That would be something you can do but not all beginners want to or understand how to create a child theme, that is why we recommend this method.
Administrateur
Ruhul
This plugin’s activation active auto bulk mail sending from my hosting server. This is working like a spam. So I have to delete this from my website.
WPBeginner Support
This plugin does not have anything like that, we would recommend scanning your site to ensure you do not have any malicious code on your site
Administrateur
Tom
I added this plugin to my site but nothing showed when I clicked on the plugin? I’m using an old version of WP but not sure if this is the reason why.
WPBeginner Support
You should find the plugin’s section under Settings>Insert Headers and Footers
Administrateur
Fazil Ibrahim Moihammed
Hi team,
Does the FB Pixel Base Code was copied and paste on the header tag in that plugin.
will it automatically apply to every page of the website? Please reply!
WPBeginner Support
Yes, the plugin will add the code to every page
Administrateur
Anchal
How can I add a code in body section (not in the header/footer section ) with this plugin?
I want to add certain code in the body section to avoid render blocking.
WPBeginner Support
The plugin should currently have a third input box where you can include code that should be in the body of your site.
Administrateur
firatba
Thanks a lot! It helps me while adding our on-site messagin system code.
WPBeginner Support
You’re welcome, glad it was helpful
Administrateur
ANA LUIZA
Very helpful! <3 Thank you!
WPBeginner Support
You’re welcome
Administrateur
Noya
Hi,
My site was built by a web developer who already included all sorts of code snippets in the section of my site.
If I add new snippets of code using this plugin, will it overwrite the code that’s already there or just add the new code to the existing code?
I don’t want to make a mess of my site…
Thanks!
WPBeginner Support
If you add code using this plugin it would be added to your site, it would not replace code
Administrateur
Arsalaan
Nice explanation!
WPBeginner Support
Thank you
Administrateur
Wendy
Hi! I tried to add the plugin to my site but you need to have a business page to add any plugins? Can I add the code without a plugin?
WPBeginner Support
It sounds like your site is on WordPress.com, in which case you are limited to what WordPress.com allows. Our guides are for WordPress.org sites, you can see a comparison between the two here:
https://www.wpbeginner.com/beginners-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/
Administrateur
anudeep
hi
First i have install header and footer plugin than after past my google analytics code . but my problem is once past the code and see my website, the code showing disable? How to solve it?
WPBeginner Support
If the code is not being added to your header, you would want to clear any caching on your site as that is the most common root of that issue.
Administrateur