Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Cómo añadir código de cabecera y pie de página en WordPress (de forma sencilla)

En WPBeginner, escribimos muchos tutoriales que requieren que insertes código en las secciones <header> o <footer> de tu sitio web WordPress. Esto puede parecer una tarea desalentadora, sobre todo porque WordPress no proporciona una opción integrada para añadir fragmentos de código en la cabecera y pie de página.

Pero, añadir código de cabecera y pie de página en WordPress es necesario cuando se intenta integrar con servicios web como Google Analytics, Google Search Console, Facebook Pixel, etc.

También puede encontrarse con tutoriales de WordPress que le pidan que añada algún código CSS personalizado o JavaScript a su cabecera o pie de página de WordPress.

Por suerte, existe una solución fácil para los principiantes. Con el plugin gratuito WPCode, puedes añadir el código de forma segura sin editar directamente los archivos de tu tema de WordPress.

En este artículo, le mostraremos cómo añadir fácilmente código de cabecera y pie de página en WordPress.

How to Add Header and Footer Code in WordPress

La mejor manera de añadir cabecera de WordPress y el código de pie de página

Si desea añadir el código de cabecera y pie de página de WordPress, hay tres soluciones posibles:

  1. Manualmente, editando los archivos header.php y pie de página.php de su tema.
  2. Con la característica de código de cabecera y pie de página integrada en tu tema
  3. Utilizar un plugin de WordPress

La primera opción no es apta para principiantes porque requiere que añada código de cabecera y pie de página editando directamente los archivos header.php y footer.php de forma manual.

Otra desventaja de utilizar este método es que su código será eliminado si instala una actualización de su tema.

La segunda opción es utilizar la característica incorporada de su tema. Algunos temas de WordPress como Elegant Themes y Genesis Framework de StudioPress ofrecen una opción integrada para añadir rápidamente código y scripts a la cabecera y pie de página de WordPress.

Si está utilizando un tema con una característica incorporada, entonces parece una solución segura y sencilla. Sin embargo, si cambias de tema, todos los fragmentos de código añadidos a tu sitio web desaparecerán. Esto incluye la verificación del sitio en Google Search Console, el análisis del sitio web a través de Google Analytics, etc.

Por eso siempre recomendamos a los usuarios que utilicen la tercera opción, un plugin de cabeceras y pies de página. Esta opción es, con diferencia, el método más fácil y seguro para añadir código de cabecera y pie de página en WordPress.

Tras muchas peticiones de los lectores, nuestro equipo ha creado el plugin WPCode.

WPCode

WPCode (antes Insert Headers and Footers) es un plugin de fragmentos de código 100% gratuito. Se puede utilizar para añadir fácilmente código a la cabecera y pie de página en WordPress.

Estas son algunas ventajas de utilizar el plugin WPCode:

1. Fácil, rápido y organizado: Te permite añadir código a la cabecera y al pie de página de tu sitio de forma fácil y rápida. Además, te mantiene organizado al permitirte almacenar todos tus códigos de pie de página y cabecera en un solo lugar.

2. Previene Errores: La validación inteligente de fragmentos de código ayuda a evitar los errores que pueden producirse si editas manualmente los archivos de tu tema.

3. Actualiza o cambia tu tema sin preocuparte: El plugin guardará tu código de cabecera y pie de página en un lugar separado, para que puedas actualizar o cambiar tu tema sin preocuparte de que se borre el código.

Además de las secuencias de comandos de cabecera y pie de página, también puede utilizar WPCode para insertar fácilmente fragmentos de código PHP, JavaScript, CSS, HTML y texto personalizados sin necesidad de editar los archivos de su tema.

Además, WPCode tiene una biblioteca de fragmentos de código integrada donde puedes encontrar todos los fragmentos de código de WordPress más útiles. Esto te permite eliminar rápidamente las características de WordPress que no quieras como actualizaciones automáticas, REST API, XML-RPC, comentarios y mucho más.

Nota: Si quieres características avanzadas como una biblioteca privada de fragmentos de código en la nube, píxeles de conversión, fragmentos programados, revisiones de código y mucho más, puedes actualizar a WPCode Pro.

Para más detalles, lea nuestra guía sobre cómo añadir fácilmente código personalizado en WordPress.

Dicho esto, veamos cómo añadir fácilmente código de cabecera y pie de página en WordPress utilizando el plugin WPCode.

Añadir código a cabecera y pie de página en WordPress

Lo primero que tienes que hacer es instalar y activar el plugin gratuito WPCode. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Una vez activado el plugin, vaya a Fragmentos de código ” Cabecera y pie de página desde su panel de administrador de WordPress. A continuación, verás un cuadro “Cabecera” en el que puedes añadir tu código.

Add code to header and footer with WPCode

Si se desplaza hacia abajo, también verá un cuadro de “Cuerpo” y otro de “Pie de página”.

Header and footer script boxes WPCode

Sólo tienes que pegar el código en una de las tres casillas. Cuando hayas terminado, no olvides hacer clic en el botón “Guardar cambios” para guardar tus ajustes.

El plugin cargará automáticamente el código en las ubicaciones correspondientes de su sitio de WordPress.

Siempre puedes editar y quitar cualquier código que no quieras conservar.

Deberá mantener el plugin instalado y activado en todo momento. Si desactiva el plugin, dejará de añadir código personalizado a su sitio.

Si desactiva accidentalmente el plugin, el código seguirá almacenado de forma segura en la base de datos de WordPress. Basta con reinstalar o reactivar el plugin para que el código vuelva a aparecer.

Nota: Es posible que tenga que vaciar la caché de WordPress después de guardar los cambios, para que el código aparezca correctamente en el front-end de su sitio web.

Hemos encontrado que la mayor razón por la que muchos principiantes utilizan el plugin WPCode es para añadir Google Analytics a su sitio web. Para eso, recomendamos usar el plugin gratuito MonsterInsights.

MonsterInsights es el mejor plugin de Google Analytics para WordPress. Le ayuda a establecer correctamente el seguimiento de Google Analytics con sólo unos clics, y le muestra estadísticas útiles dentro de su escritorio de WordPress.

Para obtener instrucciones paso a paso, consulte este tutorial sobre cómo instalar Google Analytics en WordPress.

Tutorial en vídeo

Si no le gusta seguir instrucciones escritas, puede ver nuestro tutorial en vídeo sobre cómo añadir código de cabecera y pie de página en WordPress:

Subscribe to WPBeginner

Esperamos que este artículo te haya ayudado a aprender cómo añadir código de cabecera y pie de página en WordPress fácilmente. Puede que también quieras ver nuestra guía sobre cómo mostrar código en tu sitio WordPress, o nuestras selecciones de expertos sobre las mejores herramientas de desarrollo para WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

263 comentariosLeave a Reply

    • You would want to check with your specific theme’s support for the header not appearing on a specific page as it could be a page specific template causing you issues.

      Admin

  1. Thanks guys for your plugin! I used it to add FB Pixel to my site, but now I have a landing page and I need a different Pixel event (Lead) on the Thank You page after visitors confirm their details. Can I use the plugin to add the script to a specific page?

  2. Hi, is there a way to change the font size of the footer?
    I tried keying in a chunk of disclaimer text but it is too large.

    Thanks in advance!

  3. You need to change your messaging/advertising regarding header/footer plug-in being free to install. It is not free unless you have purchased the Business plan for your page.

  4. 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.

  5. Was wondering if PHP can be added in the header section. Like adding Yoast’s Breadcrumb code to the header so I don’t have to go into my theme files.

  6. Can You add more than one header code, to the plug-in, for example
    AdSense code and YouTube Verification code.

    • You may want to try resaving your permalinks and checking with your hosting provider that they are not receiving an error on your site that would be preventing the page from saving.

      Admin

  7. Thank you so much for your video, although I have copied the code still I’m not able to enable my header. How to do it?

    • If the plugin is installed you should be able to add the code under Settings>Insert Headers and Footers

      Admin

  8. Hi. I already install the plugin and it’s work. But how to add more than 1 code? Just copy like that or I need to make 1 space to copy the code

  9. Cant update “Insert Headers and Footers Plugin”.
    Error message: Update Error: Not possible to eliminate previous version of plugin. (translation from spanish)

    When trying to remove the plugin: ” insert-headers-and-footers-old/ihaf.php could not be removed completely .” (translation from spanish)

  10. I have another plugin it seems to work almost exactly the same way only it can be used on a single page or customized as to which pages the script is added.

    I am trying the WpBeginner plugin just because I trust y’all.

    Am I likely to run into problems having both added to my site?

    Using yours for the whole site, and the other one for adding something only to the header or footer of an individual page?

  11. Hello,
    I’m trying to update something in my footer section.
    I have already downloaded and installed/ used this plug in previously and it is working currently. However, when I try to go edit it, when my cursor is hovering over settings…. no drop out menu appears to go to –>insert header and footer. It only takes me to my account setting page. Please help me because I need to update my mailing list options asap! Thank you!

    • If you go to your settings area, it should expand the other options for you to be able to see the Insert Headers and Footers menu item.

      Admin

  12. Thanks WPbeginer,

    I tried saving the plugin when I added my google search console code, it redirected me to error 404.

    What could be wrong?

  13. Should i deactivate and delete the plugin after inserting the code?

    Will the code be deleted as soon as the plugin is deactivated?

    • You would want to leave the plugin active, if you deactivate the plugin the code you’ve added will no longer be included.

      Admin

  14. Hello. I’ve been using this plugin for some time and find it invaluable.
    However, I am about to update to WordPress 5 but on the download page, it says ‘Compatible up to 4.9.9’. This makes me wary – will it work with 5 and are there plans to update it? Thank you.

  15. I have added this to my site. It reads it just fine, but prints the code across the top of my header bar EVERY time! Not sure how to fix this.

  16. Plsss explian in details how to add more than one code in the headers space, cos i have already inserted ,google search console code with the pluggin how am i going to add the adsene code in the same headers section

    • You would add the new code on the next line as if you copied the entire code for each they should close themselves.

      Admin

  17. How do I add a HTLM code in the header of my theme. I dont quite understand where it is. I use Xtheme and some people said to go to appearance and editor, but I dont have no editor.

    I need to add the Gtag in the heard of my website for Google analytics and I dont want to use a plug in

  18. I want to ask you about this plugin.
    Can I put more than one code from different sites (eg Google Analytics code, Webmaster’s code, and Adsense ad code) Will the number of codes affects their performance because I see a difference in terms of visitors Google Analytics and WordPress analytics(WP Statistics)?
    And the difference between placing the code in the header and in the footer?
    Thank you sorry for bothering you
    I hope you will respond quickly.

  19. Hi, is it possible use this plugin to add more scripts? For example i need to add the AdSense and PushCrew codes.

    If possible, just copy the code one under the other?

    Thanks

  20. So far so good. I’ve been trying to search your site for code to insert line breaks and center text. Any urls to these explanations?

  21. Thank you so so much. That solved my problem. I would also love to know if there’s a way to solve the error code I get in my theme codes. I’ve got 53 error when I view the source code.

  22. I wish this was available for Premium Accounts as well as Business. Is there another way to embed code in your site

  23. I’ve installed header and footer plugin, entered the relevant code and saved it. When I look in header script in header editor I can’t see the relevant code I’ve just entered. Please advise.
    Thank you.

  24. When I try to add header code using the plug in I get a 403 forbidden page. How do I get around this? I temporarily tried to turn off my security but that didn’t help.

  25. Hi, Iam looking for option like this but for a multi-site,

    but I need is like a general admin for network-wide option,
    where when i config this, it will show to the header on all sub-site,

    currently, I need to set this for every sub-site plugin config.

    is there any way to have the plugin option of this menu under network option or something and not per sub-site.

    is there any other option i can use/do.

    thanks

  26. Hey, is there anyway to check if the code has been inserted ? Can’t detect it in my site source code nor in the headers.php file. Is is possible for this plugin to not be working ?

    • Hi Riddhi,

      Once you add the code and save your changes you will be able to see the code in your site’s source code. For header code you will find it between <head> and </head> tags. Footer code will be added before the </body> tag.

      Admin

  27. Is there a way to use this to add an image in the header that does not replace the existing header? In other words, I already have a logo there on the left, and a search bar with social media links on the right. The center is empty. I want to add an image widget which links to the source page of the image. I have the widget code ready to insert, but there is no HTML showing in the header.php file. I do not know PHP (i do know HTML quite well).
    I added the widget to the footer, which was easy because in my theme there IS HTML (an HTML table) in the footer. But it is supposed to be at the top of the pages.

  28. Thank you so much for information. I have been so much problem with pasting html adsense code in header. This information helps me a lot

  29. So, can I disable this notification after install anywhere?
    I don’t need all my multisite clients to see this notification!!

  30. When I add my code into the header or footer section in the plugin, does it apply it across all my pages? Thanks.

  31. hi, I just re-added my footer widget embedded code, it’s from keyreply.
    I don’t know what’s went wrong, I could see my footer widget from my pc(while I am logged in WP), however any other devices(pc or mobile phone), the widget is not showing. any ideas?

  32. I installed the insert headers and footers plugin on my clients WordPress site but when I click on it under settings it just shows a blank page. There are no fields available for me to insert text into.

  33. Hi,
    I’m trying to install an html5 banner ad at the top of my home page and a few other page tops. I have a customer that wants to only deliver their banner ad in that format so that as a rotating banner each image links to a different url we’re promoting. Where do I put this code to make it show up? I’ve tried downloading some plugins to place it but nothing is working. We normally just accept jpgs and links but I don’t want to lose this sale as she won’t deliver other than in html5. Thanks for your help! Geraldine

  34. Hi, I love the simplicity of this plugin. There is one annoying point however.

    How can I disable the dashboard notice “Thank you for installing….” in a multisite set up.

    I don’t need all my client sites seeing that notice.

    A solution that doesn’t involve another plugin would be appreciated, preferably I can just remove an action or something.

Leave A Reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.