Cómo añadir código personalizado en WordPress

En ocasiones te habrás encontrado en la situación de querer añadir una funcionalidad o personalización en tu WordPress. Y seguramente más de una vez habrás visto páginas donde indican un código personalizado que puedes agregar para conseguirlo. Aquí te voy a explicar diferentes maneras de insertar este código.

Qué se puede conseguir añadiendo código personalizado en WordPress

Personalmente considero que un error muy habitual que se comete en WordPress es instalar plugins sin buscar posibles alternativas. Básicamente, cada vez que queremos una funcionalidad nueva buscamos si hay un plugin y, si existe, lo añadimos.

Con esta (mala) práctica conseguirás una web sobrecargada de plugins. ¿Qué problema hay? Los plugins suelen ser uno de los principales causantes de una carga lenta de la web. Además, si el desarrollador del plugin abandona el proyecto, el código puede quedar obsoleto, lo que puede provocar problemas con el tiempo. Incluso puede generar agujeros de seguridad.

Con esto no estoy diciendo que no instales ningún plugin. ¡Por supuesto que habrá que hacerlo! Hay plugins muy buenos, e incluso imprescindibles.

Ahora bien, en múltiples ocasiones, añadiendo unas pocas líneas de código conseguiremos esa funcionalidad o cambio de diseño de la web, y todo ello sin necesidad de plugins adicionales.

¿Qué podemos conseguir añadiendo código? Prácticamente de todo. Gracias a la forma en que está desarrollado WordPress y sus plugins, con sus acciones (actions), filtros (filters) y shortcodes, podremos modificar el comportamiento de casi cualquier cosa.

No te hará falta un empleo de programador para hacer esto. Haciendo una búsqueda en Google encontrarás cientos de ejemplos de códigos de todo tipo.

Añadir código personalizado con el plugin Code Snippets

El primer sistema que vamos a ver para añadir código en mediante el uso del plugin Code Snippets.

Vale, ahora me dirás que se está usando un plugin para evitar usar otros plugins. Cierto, pero gracias a él podrás añadir todos los fragmentos de código que necesites.

Para instalar el plugin vete en la administración de WordPress a Plugins > Añadir nuevo. En la caja de búsqueda escribe code snippets. Verás que se muestra el plugin. Pulsa en el botón Instalar ahora y espera unos segundos.

Una vez instalado el plugin pulsa en el botón Activar para poder empezar a usarlo.

Si necesitas más ayuda con el proceso de instalación puedes revisar el tutorial sobre instalación de plugins en WordPress.

Una vez instalado verás en el menú lateral de la administración un nuevo elemento Fragmentos de código. Pulsando en él entrarás en una página donde se mostrará un listado con diversos códigos de ejemplo creados. No te preocupes, estos códigos estarán desactivados, y solo servirán como referencia.

Para cada fragmento de código dispones de las opciones de editar, clonar, exportar o borrar, por lo que si lo deseas puedes eliminar estos códigos de ejemplo.

Para añadir un nuevo código personalizado pulsa en el botón Añadir nuevo de la parte superior o en Fragmentos de código > Añadir nuevo del menú de administración de WordPress.

Se mostrará la ventana donde podrás añadir el nuevo código.

En primer lugar deberás poner un título al fragmento de código. Tiene que ser algo que te ayude a identificar rápidamente el código que estás añadiendo. Por ejemplo, un texto como «Insertar código de Google Analytics», «Mover descripciones de categorías de WooCommerce al pie» o similar puede servir.

Debajo ya podrás pegar el fragmento del código que vayas a utilizar. Recuerda que no debes poner las etiquetas de apertura y cierre de php (<?php y ?>), ya que se eso ya se encarga el propio plugin.

A continuación tienes la opción de seleccionar dónde se ejecutará este código dentro de tu WordPress. Dispones de 4 posibilidades:

• Ejecutar el fragmento de código en todas partes: en caso de dudas puedes dejar esta opción, ya que te aseguras de que el código se ejecutará donde lo necesitas.
• Ejecutar solo en el área de administración: si el código que vas a añadir es para algo específico de la administración. Por ejemplo, para cargar un campo adicional en el listado de entradas.
• Ejecutar solo en la portada del sitio: es la opción más habitual, ya que normalmente el código que insertes será para modificar algo en el frontal de la web. Por ejemplo, si añades un código para cargar el script de Google Analytics o para modificar la vista de las entradas bastará con que se ejecute en la portada del sitio.
• Ejecutar solo una vez: es la opción menos habitual, y está pensada para códigos que van a modificar algo de forma permanente la primera que se ejecutan. Si elijes esta opción y se ejecuta el código es mejor que después desactives el fragmento de código.

A su derecha verás la opción de marcar la Prioridad. Esto te permitirá ejecutar unos fragmentos antes que otros, de forma que en primer lugar se ejecutarán los fragmentos con una prioridad más baja. Normalmente esto no es importante, y puedes dejar la prioridad que viene por defecto, a menos que necesites un orden por alguna razón (por ejemplo, en filtros).

Lo siguiente es el apartado de Descripción, donde podrás añadir información adicional sobre el código personalizado que estás añadiendo como, por ejemplo, la página donde lo encontraste. Por supuesto, esto es algo opcional, ya que solo servirá de información para el administrador que edite este fragmento.

Por último tienes la opción de añadir etiquetas para organizar los fragmentos de código. Podrían ser etiquetas como «javascript», «entradas», «woocommerce», etc. De nuevo es algo opcional, y no veo necesario utilizarlas, ya que no se suelen añadir tantos fragmentos de códigos como para requerir aplicar estos filtros.

Una vez añadido el código se puede pulsar en el botón Guardar los cambios y activar para que el código empiece a funcionar de inmediato, o simplemente en Guardar si tienes pensado activarlo más adelante. Además, dispondrás de la opción de descargar, exportar y borrar el código.

Desde la página que muestra el listado de códigos del plugin también podrás activar y desactivar rápidamente los plugins utilizando el interruptor que hay en cada uno de ellos.

Una ventaja de utilizar este plugin es que si existe algún error en el código el propio Code Snippets lo detectará y evitará que se ejecute, por lo que no se producirán errores en la carga de tu WordPress, cosa que si pasará si añades el código con otros métodos. También es el método más cómodo de añadir código, ya que nos permite activar y desactivar fragmentos con comodidad y tenerlos separados de forma individual. Es la opción que debes elegir si no quieres complicaciones.

Por contra, no sería la forma más óptima de añadir el código, ya que en lugar de ejecutarse de forma directa se leerá desde la base de datos. Con los métodos que veremos a continuación no ocurre esto.

Añadir código personalizado en el functions.php

Seguramente cuando has encontrado un código personalizado en una página web para conseguir un determinado comportamiento en WordPress verás que te indican que hay que añadirlo en el archivo functions.php.

¿Dónde se encuentra ese archivo functions.php? En el directorio del tema que estás utilizando. Por ejemplo, si tu tema se llama mi-tema, el archivo estará en la ruta wp-content/themes/mi-tema.

Si editas este archivo observarás que ya contiene código, por lo que el nuevo fragmento que vayas a añadir tendrás que ponerlo al final del todo.

Ahora bien, hay un problema importante: si añades tu código personalizado y, más adelante, actualizas el tema a una nueva versión, cosa siempre recomendable, perderás los cambios que has aplicado. Esto ocurre debido a que con la actualización del tema también se actualizará el propio archivo functions.php.

¿Cómo se puede puede evitar esto? Creando un tema hijo, que tendrá su propio archivo functions.php, y dejando activado este tema hijo. De esta forma, cuando se actualice el tema padre, no se perderá el código que has añadido en el functions.php del tema hijo. Si no sabes cómo crear un tema hijo puedes revisar nuestro tutorial sobre cómo crear un tema hijo en WordPress, donde se explica todo de forma detallada.

Para añadir el nuevo código personalizado puedes descargar el archivo functions.php vía FTP, aplicar los cambios en tu equipo con una aplicación como Sublime Text o Notepad, y volver a subir el archivo modificado. También puedes optar por editar el archivo directamente desde tu cuenta de hosting, en el caso de que disponga de esta opción. Por ejemplo, con el administrador de archivos de cPanel.

Es fundamental que antes de modificar el archivo functions.php hagas una copia de seguridad del mismo, ya que en el caso de que cometas algún error añadiendo el código personalizado tu WordPress no cargará. Si se produce un error, simplemente tendrás que restaurar el archivo original.

Desde la propia administración de WordPress también será posible modificar el archivo functions.php del tema activo. Para ello hay que ir a Apariencia > Editor de temas.

En la parte derecha verás los distintos archivos del tema activo que puedes modificar. Para editar el archivo funtions.php deberás pulsar en Funciones del tema. Además tendrás disponibles otros archivos, como la hoja de estilos, la cabecera o el pie. No te recomiendo usar este método para modificar el functions.php si no has hecho la correspondiente copia de seguridad.

Crear un plugin de WordPress para añadir el código personalizado

¿Crear un plugin para añadir código? Tranquilo, no se trata de hacer un plugin como WooCommerce, es mucho más sencillo 🙂

Para crear el plugin vete al directorio wp-content/plugins de tu WordPress. Aquí añade un nuevo directorio para tu nuevo plugin. Por ejemplo, lo puedes llamar mi-plugin-personalizado. Ahora accede a este nuevo directorio y crea un archivo PHP con el mismo nombre que el directorio, por ejemplo mi-plugin-personalizado.php.

Una vez hecho esto edita este archivo. En la cabecera hay que agregar unas líneas que servirán a WordPress para identificar tu plugin. Se trata de algo como lo siguiente:

<?php
/**
 * Plugin Name: Mi plugin personalizado
 * Plugin URI: https://caltener.com/
 * Description:  Plugin en donde iré añadiendo mi código personalizado.
 * Version: 1.0.0
 * Author: Caltener
 * Author URI: https://caltener.com
 * Text Domain: mi-codigo-personalizado
 * Domain Path: /languages/
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

Aquí puedes personalizar el contenido con tus datos, pero realmente no es necesario añadir todo esto. De hecho, con el valor Plugin Name ya sería suficiente:

<?php
/**
 * Plugin Name: Mi plugin personalizado
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

El código que ves al final sirve para evitar que los visitantes de tu web puedan acceder a este archivo de forma directa.

Mi recomendación es de dejes los valores de Plugin Name, Version y Description. Es decir, quedaría así:

<?php
/**
 * Plugin Name: Mi plugin personalizado
 * Description:  Plugin en donde iré añadiendo mi código personalizado.
 * Version: 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

Si guardas los cambios con el código anterior y a continuación vas en la administración de WordPress a Plugins ya verás el plugin en el listado de plugins instalados

El plugin estará en estado desactivado (no realizará ninguna acción), y lo puedes activar como cualquier plugin normal para que el código que añadas tenga efecto en tu WordPress.

Te pongo un ejemplo para que veas más claro cómo añadir el código personalizado en el plugin. Supongamos que quieres eliminar el campo url de los comentarios de WordPress. Esto se puede hacer con el siguiente código:

function eliminar_url_comentarios( $fields ) {
  unset( $fields['url'] );
  return $fields;
}
add_filter( 'comment_form_default_fields', 'eliminar_url_comentarios' );

El archivo que has creado para el plugin tendrá que quedar de la siguiente forma:

<?php
/**
 * Plugin Name: Mi plugin personalizado
 * Description:  Plugin en donde iré añadiendo mi código personalizado.
 * Version: 1.0.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

function eliminar_url_comentarios( $fields ) {
  unset( $fields['url'] );
  return $fields;
}
add_filter( 'comment_form_default_fields', 'eliminar_url_comentarios' );

Una vez que tengas el plugin activado verás que ya no se carga ese parámetro de url en los comentarios. ¡Conseguido!

Si más adelante quieres añadir nuevo código para conseguir otras modificaciones en WordPress no hace falta que crees un plugin nuevo. Simplemente puedes añadir el nuevo fragmento al final del archivo del plugin, debajo de los otros códigos que hayas insertado.

Recuerda hacer una copia de seguridad del archivo del plugin antes de añadir tus líneas de código, ya que si hay un error en ellas te dejará de cargar WordPress. De nuevo, se solucionará restaurando el backup de este archivo.

Como ves, este sistema tiene muchas ventajas. Todo el código estará organizado en un único archivo, y podrás hacer que deje de actuar simplemente desactivando el plugin. Además, este mismo plugin lo podrás utilizar en otros WordPress que tengas, copiando el directorio del plugin a tu nueva instalación. Otra ventaja será que si cambias de tema tu código seguirá funcionando, al contrario de lo que ocurriría si añades el código en el archivo functions.php del tema.

Será tu propia navaja suiza hecha plugin.

Añadir CSS personalizado en WordPress

En el que caso de que quieres agregar a tu WordPress estilos CSS para personalizar el diseño no será necesario seguir ninguna de las indicaciones anteriores. Es mucho más sencillo.

Todos los temas de WordPress ya cuentan con un método para añadir tus propios estilos CSS. Para ello simplemente tienes que ir en la administración a Apariencia > Personalizar.

Aquí entrarás en el área de personalización del tema. Las distintas opciones que encontrarás en la parte izquierda cambiarán según el tema que tengas activo en WordPress, incluso puede que el propio tema tenga sus apartados de configuración fuera de este área de personalización. Pero un elemento común que encontrarás será el apartado CSS adicional.

Pulsando aquí verás que se abre una caja de texto donde podrás añadir tus estilos CSS personalizados. Una vez añadidos simplemente en el botón Publicar de la parte superior.

Fácil, ¿no? Por supuesto, también se pueden añadir estilos CSS con otros métodos, como editando el archivo styles.css que encontrarás en el directorio del tema que estés usando, pero de hacerlo así que sea con un tema hijo, para no perder las modificaciones tras actualizar el tema.

Mi recomendación es que no te compliques la vida y añadas tus propios estilos CSS desde el área de personalización del tema de WordPress.

Insertar otro tipo de código en WordPress

En ocasiones verás páginas donde te indican un determinado código para colocar en un archivo distinto al functions.php del tema. Por ejemplo, te pueden indicar que lo añadas en el header.php (cabecera de la página) o en el footer.php (pie de la página)..

Para estos casos sí que será necesario crear un tema hijo de WordPress. Con el tema hijo creado tendrás que copiar el archivo a modificar del directorio del tema padre al directorio del tema hijo. Una vez hecho esto, ya podrás editar el archivo en el tema hijo.

Recuerda hacer la copia de seguridad de los archivos que vayas a modificar. Evitarás posibles disgustos.

Existen otros tipos de modificación de código, como personalizar las plantilla de WooCommerce, pero no voy a entrar aquí a tratar estos temas, ya que resulta más complicado.

Conclusiones

Si no tienes conocimientos en programación es posible que en más de una ocasión hayas renunciado a añadir un código para mejorar el funcionamiento de tu WordPress. Como has podido ver, dispones de varias formas de hacerlo, y todas bastante sencillas.

WordPress es una herramienta maravillosa, y la forma en la que está programado permite modificar casi cualquier del aspecto y los contenidos de la web. Aunque en ocasiones hace falta recurrir a plugins para cubrir nuestras necesidades, en otros casos conseguiremos lo que buscamos agregando unas pocas líneas de código.

¿Te han quedado dudas sobre cómo añadir tu código? No te preocupes, consúltame en los comentarios.