Cómo y dónde pegar en WordPress códigos PHP, JS, CSS y funciones que encuentres por ahí

Seguramente muchas veces has encontrado por ahí códigos fantásticos para añadir a tu WordPress con los que añadir funcionalidades o corregir problemas pero no has sabido o no te has atrevido a meterlos en tu web.

Aquí mismo soy mucho de compartir todo tipo de códigos, snippets les llaman por ahí, recetas a veces también, con los que modificar aspectos de WordPress, WooCommerce, plugins y temas.

Pero sois muchos los que me decís a veces que no os atrevéis, bien por miedo a no saber bien dónde pegar el código, bien por no saber cómo hacerlo sin riesgos.

Y eso es lo que pretendo solucionar hoy, ayudarte y animarte a aprovechar todos esos fantásticos códigos que hay por ahí, en la red, y que pueden ayudarte a mejorar tu sitio WordPress.

Personalizador de WordPress para códigos CSS

Si el código que has encontrado y te gustaría usar en tu web es CSS entonces el mejor modo de hacerlo es desde la herramienta de «CSS adicional» del personalizador de WordPress.

Puedes acceder de 2 maneras:

• En la administración de tu WordPress, desde Apariencia → Personalizar → CSS adicional.
• Desde tu web, en el icono de Personalizar, y luego yendo a la sección de CSS adicional.

Una vez en el personalizador, ya en la sección de CSS adicional tienes una caja – inicialmente vacía – donde pegar tu código CSS.

Lo mejor de usar el personalizador de WordPress es que los códigos CSS que pegues aquí se activan de inmediato en la vista previa, pudiendo comprobar de inmediato si consigues el resultado que esperabas.

Como verás en la captura anterior, al añadir el código CSS automáticamente cambia el color del texto de la página, que es lo que buscaba en este ejemplo.

Ventajas del personalizador

• Ves los cambios en tiempo real en la vista previa de la página.
• Los cambios no afectan al visitante hasta que no los publiques.
• Los cambios se hacen en la base de datos de WordPress.
• No le afectan actualizaciones de temas y plugins.
• La herramienta de CSS adicional tiene ayuda de programación instantánea: te muestra los parámetros disponibles a medida que tecleas código.
• La herramienta de CSS adicional tiene detección de errores de código y te los muestra en tiempo real.
• Algunos códigos seguirán sirviendo aunque cambies de tema, si el identificador CSS coincide, y sino simplemente cambia el identificador

Desventajas del personalizador

• Por secuencia de carga de WordPress el CSS del personalizador se activa más tarde que si estuviese en la hoja de estilos.
• Es un modo menos óptimo de cargar CSS al requerir consultas a la base de datos.

Hoja de estilos para códigos CSS

El otro modo, más tradicional, de añadir códigos, en este caso hablando de CSS, es usar la hoja de estilos (styles.css) del tema actualmente activo.

Lo que sí debes tener en cuenta es que debes añadir códigos CSS a la hoja de estilos del tema hijo, pues si lo haces al tema padre o principal, si no has creado y activado un tema hijo, cuando actualices el tema se perderá todo el CSS que añadas a la hoja de estilos del tema.

La hoja de estilos estará en la carpeta del tema hijo, o sea, en una ruta similar a: /wp-content/themes/carpeta-tema-hijo/style.css.

Para aprovechar el código CSS simplemente pégalo en el archivo style.css de la carpeta del tema hijo, guarda los cambios y se aplicará el nuevo código.

Puedes ir añadiendo los distintos códigos CSS uno debajo del otro. Sí te recomiendo que añadas antes algún comentario que explique lo que hace, para futuras revisiones de código.

Ventajas de la hoja de estilos

• Los códigos afectan solo al tema actual activo.
• Por secuencia de carga de WordPress la hoja de estilos del tema hijo se activa muy pronto, antes que si estuviese en la base de datos.
• Es el modo más óptimo de cargar CSS al no requerir consultas a la base de datos.
• Utilizas tu propio editor de código o el del hosting.
• Si añades el código CSS al tema hijo no le afectan las actualizaciones del tema padre.

Desventajas de la hoja de estilos

• No ves los cambios en tiempo real, hay que guardar los cambios e ir a la web a verlos.
• Los cambios afectan al visitante, todos verán el cambio al mismo tiempo que tú.
• Necesitas familiarizarte con un editor de código o el del hosting, que no siempre tienen ayudas de programación.
• Los editores de código no siempre avisan de errores de programación.
• Si añades el código CSS al tema padre se perderá con las actualizaciones del tema.

Archivo functions.php del tema

Dejando ya de lado los códigos CSS, de lo que más encontrarás para copiar y pegar son códigos PHP, JavaScript y funciones WordPress.

En el caso de funciones WordPress, o sea, ganchos, acciones y filtros, tienes 2 posibilidades, dependiendo de su objetivo:

• Añadirlas al archivo functions.php del tema – Si la función es específica del tema activo.
• Añadirlas a un plugin personalizado – Si la función no es específica del tema activo, si afecta a WordPress o a plugins.

Así que, dicho lo anterior, si quieres aprovechar una función WordPress cuyo objetivo es aplicar cambios en el tema activo, debes pegarlas en el archivo functions.php del tema hijo.

Este archivo lo encontrarás en la carpeta del tema hijo, o sea, en una ruta similar a: /wp-content/themes/carpeta-tema-hijo/functions.php.

Igual que antes, pega el código en el archivo functions.php de la carpeta del tema hijo, guarda los cambios y se aplicará el nuevo código. En este caso es importante que te acostumbres a pegarlos siempre al final del archivo.

En este archivo es especialmente importante que añadas comentarios explicando lo que hace cada código, como en el ejemplo anterior.

Ventajas del archivo functions.php

• Los códigos afectan solo al tema actual activo.
• Por secuencia de carga de WordPress el archivo functions.php del tema hijo se activa muy pronto, antes que si estuviese en la base de datos.
• Utilizas tu propio editor de código o el del hosting.
• Si añades el código al tema hijo no le afectan las actualizaciones del tema padre.

Desventajas del archivo functions.php

• No ves los cambios en tiempo real, hay que guardar los cambios e ir a la web a verlos.
• Los cambios afectan al visitante, todos verán el cambio al mismo tiempo que tú.
• Necesitas familiarizarte con un editor de código o el del hosting, que no siempre tienen ayudas de programación.
• Los editores de código no siempre avisan de errores de programación.
• Si añades el código al tema padre se perderá con las actualizaciones del tema.
• Dejarán de funcionar si cambias de tema, así que recuerda usarlos solo para funcionalidades que afecten al tema actual.

Plugin personalizado

Como hemos visto antes, hay dos maneras de añadir funciones WordPress, y cuando el código no sea específico del tema el modo perfecto de aprovecharlo es añadiéndolo a un plugin nuestro, para nuestras personalizaciones.

Esto no significa que una función destinada a WordPress o plugins no vaya a funcionar en el archivo functions.php, algunas funcionarán, pero no es el modo adecuado y seguro de añadirlas.

Dicho esto, hacer un plugin propio es muy fácil:

1. Con un editor de código crea un archivo nuevo y llámalo como gustes, pero con extensión .php. Por ejemplo: mi-plugin.php (evita espacios, eñes, mayúsculas, etc., algo simple).
2. Añade el archivo de tu plugin las cadenas base para que funcione como plugin, estas:

   <?php
   /*
   Plugin Name: Mi plugin de personalizaciones.
   Plugin URI: https://ayudawp.com/
   Description: Plugin de personalizaciones que no van en el archivo <code>functions.php</code> porque no son del tema.
   Version: 1.0
   Author: Fernando Tellado
   Author URI: https://tellado.es
   */

3. A continuación de estas cadenas, imprescindibles para que WordPress identifique el archivo como plugin, añade tus códigos, esas fantásticas funciones WordPress que has encontrado por ahí y que tan útiles te van a ser. Por ejemplo:

   <?php
   /*
   Plugin Name: Mi plugin de personalizaciones.
   Plugin URI: https://ayudawp.com/
   Description: Plugin de personalizaciones que no van en el archivo <code>functions.php</code> porque no son del tema.
   Version: 1.0
   Author: Fernando Tellado
   Author URI: https://tellado.es
   */
   /* Desactivar lazy load de WordPress */
   add_filter( 'wp_lazy_loading_enabled', '__return_false' );
   /* Quitar menu marketing de WooCommerce en admin */
   function disable_features( $features ) {
   $marketing = array_search('marketing', $features);
   unset( $features[$marketing] );
   return $features;
   }
   add_filter( 'woocommerce_marketing_menu_items', '__return_empty_array' );
   add_filter( 'woocommerce_admin_features', 'disable_features' );

4. Guarda el archivo PHP de tu plugin en una carpeta nueva. Llámala, por ejemplo, carpeta-de-mi-plugin, o como quieras (de nuevo, evita espacios, eñes, etc.)
5. Comprime en ZIP la carpeta.
6. Instala tu plugin como cualquier otro, desde el instalador de plugins de WordPress, eligiendo la opción de «Subir plugin».
7. Actívalo.

Como ves, más fácil de lo que imaginabas, es solo ponerte, hasta yo supe hacerlo 🙂

Ayudita: Si no te animas a hacer tu primer plugin aquí puedes descargar el del ejemplo y modificarlo a tu gusto.

Ventajas de un plugin personalizado

• Puedes crear varios plugins, cada uno para una funcionalidad, y así activar o desactivar según necesidad.
• Son independientes del tema, si sigues mis indicaciones.
• No se desactivan al cambiar de tema.

Desventajas de un plugin personalizado

• Cualquier usuario administrador de la web puede desactivarlo.
• Por secuencia de carga de WordPress se activa después del tema y de los plugins imprescindibles.

Plugin imprescindible (mu-plugin)

Una variante del método anterior es instalar nuestro plugin como plugin imprescindible, también conocido como mu-plugin.

El procedimiento para crear el plugin es casi el mismo, más fácil en realidad. Quedaría así:

1. Con un editor de código crea un archivo nuevo y llámalo como gustes, pero con extensión .php. Por ejemplo: mi-plugin.php (evita espacios, eñes, mayúsculas, etc., algo simple).
2. Añade el archivo de tu plugin las cadenas base para que funcione como plugin, estas:

   <?php
   /*
   Plugin Name: Mi plugin de personalizaciones.
   Plugin URI: https://ayudawp.com/
   Description: Plugin de personalizaciones que no van en el archivo <code>functions.php</code> porque no son del tema.
   Version: 1.0
   Author: Fernando Tellado
   Author URI: https://tellado.es
   */

3. A continuación de estas cadenas, imprescindibles para que WordPress identifique el archivo como plugin, añade tus códigos, esas fantásticas funciones WordPress que has encontrado por ahí y que tan útiles te van a ser. Por ejemplo:

   <?php
   /*
   Plugin Name: Mi plugin de personalizaciones.
   Plugin URI: https://ayudawp.com/
   Description: Plugin de personalizaciones que no van en el archivo <code>functions.php</code> porque no son del tema.
   Version: 1.0
   Author: Fernando Tellado
   Author URI: https://tellado.es
   */
   /* Desactivar lazy load de WordPress */
   add_filter( 'wp_lazy_loading_enabled', '__return_false' );

4. Crea una carpeta llamada mu-plugins dentro del directorio wp-content y sube a esa carpeta el archivo PHP de tu plugin. Quedaría en esta ruta: /wp-content/mu-plugins/mi-plugin.php.

Ya está. El plugin queda instalado y activo automáticamente, en la lista de plugins imprescindibles.

Una de las gracias de los mu-plugins es que se activan automáticamente, y además no se pueden desactivar desde la administración de WordPress, solo borrando o renombrando el archivo.

Ventajas de un mu-plugin imprescindible

• Son independientes del tema, si sigues mis indicaciones.
• No se desactivan al cambiar de tema.
• No se pueden desactivar desde la administración.
• Por secuencia de carga de WordPress se activa antes del tema y del resto de plugins.

Desventajas de un mu-plugin imprescindible

• Para desactivarlo hay que borrar físicamente el archivo.
• Para modificarlo o añadir funcionalidades hay que usar un editor de código o del hosting.

Plugin de Snippets

Si nada de lo anterior de convence a la hora de pegar funciones WordPress o incluso CSS en tu web, también puedes optar por usar un plugin como Code Snippets, una verdadera joya para estas cosas.

Es un plugin totalmente gratuito, y nada más instalarlo te ofrece un modo muy sencillo de añadir todo tipo de códigos, mostrándote incluso algunos códigos de ejemplo, lo que me parece un acierto total.

Si tienes que añadir un código la interfaz es muy sencilla.

Pero te recomiendo revisar los fragmentos de código de ejemplo, para ver cómo se utiliza el sistema de alcance del código (dónde se ejecutará) y la prioridad.

Verás que en el ejemplo de CSS también se añade mediante una acción de WordPress, pero que es muy sencillo.

Y lo mismo para otro tipo de códigos.

Lo bueno de este plugin es que, aquí sí, te permite añadir cualquier tipo de código, también JavaScript y PHP, no solo funciones WordPress y CSS.

Por si fuera poco, puedes descargar los códigos o exportarlos, para usarlos en otra web ¿quizás con tu propio plugin de funciones? ¡venga, anímate! 😀

Ventajas del plugin de snippets

• No tienes que aprender a usar editores de código.
• No tienes que subir archivos al servidor.
• Puedes definir el alcance de los códigos.
• Sirve para todo tipo de códigos.

Desventajas del plugin de snippets

• Carga siempre recursos innecesarios, aunque no tengas ningún snippet activo.
• Por secuencia de carga de WordPress se activa después del tema y de los plugins imprescindibles o códigos.
• Cualquier administrador de la web puede desactivar el plugin, desactivando todos los fragmentos de código y su funcionalidad.

¡Pues ya está!

No obstante, si nos quieres compartir algún otro método aquí felices de incorporarlo a la guía.

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!